Learn how to embed Hyperline directly into your React application
List and download invoices
Display active payment method
Install the dependency
@hyperline/react-components
NPM package.Create an auth token
Integrate the React components
Example of a subscription
Update billing info
options
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 |
Custom color
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 |
src
Url of the font filefamily
Name of the font - this is the name you’ll use for the fontFamily
variable