- For each customer, display their subscriptions
- preview and update the payment method
- list and download invoices
- list and update billing information

List and download invoices

Display active payment method
Getting started
1
Install the dependency
First install the
@hyperline/react-components
NPM package.Install the package
2
Create an auth token
To allow a customer to see its Hyperline’s data, you need to generate a unique authentication token on your server side. You can use our API and the create auth token endpoint for this.
cURL
3
Integrate the React components
Then, integrate the React components. You will most likely generate a new token every time your customer access the page.

Example of a subscription

Update billing info
Components
Subscriptions
List all active subscriptionsSubscription
Display a subscripton by IDInvoicesList
List and download all invoices and refundsPaymentMethod
Display the current payment method, delete it if allowed, or add a new payment methodCustomerBillingInfoForm
Display a form with all billing infoComponent options
When using the components, you will need to provide anoptions
prop with the following parameters:
name | Description | Type | Default value | Required |
---|---|---|---|---|
token | The token specific to your customer | string | ☑️ | |
mode | Which Hyperline environment are you using | production | sandbox | production | |
appearance | Customise the appearance of the component | Object |
Appearance
You can change the colors and fonts of the component.
Custom color
Variables
They are meant to customise all elements at once.Variable name | Description |
---|---|
borderRadius | Change the roundness of the elements: Buttons, tables, … |
colorBackground | Most elements have a transparent background. In other cases, you can customise the background color of the element |
colorPrimary | Color used for buttons and accent text |
colorPrimaryHover | Hover color for buttons |
colorPrimaryDisabled | Color of disabled buttons |
colorBorder | The color of all our regular borders |
colorText | Default text color |
colorTextSecondary | Text color of secondary text |
fontFamily | Font used. If you need to import a font, please read the next section |
Fonts
Set your application’s font.src
Url of the font filefamily
Name of the font - this is the name you’ll use for thefontFamily
variable