Iron Plans
Search…
React SDK

Installation

GitHub - ironplans/js: Iron Plans JS/TS Monorepo
GitHub
npm, yarn
1
yarn add @ironplans/react
Copied!
1
npm i @ironplans/react
Copied!
Requirements
  • react >16
  • react-dom >16

Versions

Our open source packages are released automatically with the release tag next if you want to live on the edge, e.g. npm i @ironplans/[email protected]

Github repo

Dive right into the source code of the React SDK here:

Usage

All components from this library can be wrapped in <CustomerProvider> to avoid passing the customer prop manually. The provider manage the lifecycle of a Customer instance. It accepts all the same props as the Customer class options, and calls init on the first render, and provides Context to any consumer for updates.
To consume the customer, we provide:
  • a useCustomer() hook,
  • a <CustomerConsumer> component, and
  • a withCustomer() hoc.
The customer instance cannot be used until isLoading (or customerLoading for the hoc) is false.
Besides initialization, the <CustomerProvider> also handles triggering re-renders when customer.setTeam resolves to the new team.

Widgets

These widgets require an authenticated customer using any of the methods above.
  • <PlanSelect> displays available plans to a customer.
  • <ManageTeam> gives customer ability to invite teammates.
  • <ViewInvoices> shows a table of customer's past invoices
  • <PaymentMethods> shows customer's stored payment methods and gives customer ability to create and delete payment methods.

Public Widgets

These widgets do not require customer authentication, but they do require a public token.
  • <PricingPlans> displays your plans in a public setting, e.g. a landing page's pricing page. Requires a redirectUrl passed in as well.
1
<PricingPlans publicToken="YOUR_PUBLIC_TOKEN" redirectUrl="https://mywebsite.com/sign-up" />
Copied!

Theme

Every widget can be passed a theme.
1
const theme = {
2
base: {
3
colors: {
4
primary: 'magenta'
5
}
6
},
7
card: {
8
backgroundColor: '#000'
9
}
10
}
11
12
const teamComponent = () => {
13
return (
14
<ManageTeam theme={theme} />
15
)
16
}
Copied!