Hyperline provides built-in React components to allow you to directly display your customer subscription and preview and update your customer payment method right into your app.

This doc assumes that you already have a basic working knowledge of React and that you have already set up a React project.

Getting started

1

Install the dependency

First install the @hyperline/react-components NPM package.

Install the package
npm install @hyperline/react-components
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
curl -X POST 'https://api.hyperline.co/v1/integrations/components/token' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer <API key>' \ # You can create an [api key here](https://app.hyperline.co/app/settings/api)
  -d '{ "customer_id": "<customer ID>" }'
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.

import { Subscriptions, PaymentMethod } from "@hyperline/react-components";

export default function HyperlineSubscriptions() {
  return (
    <Subscriptions
      options={{
        token: "<YOUR AUTH TOKEN>",
        mode: "production" // if you're using our sandbox, set "sandbox" here
      }}
    />
  );
}

export default function HyperlinePaymentMethod() {
  return (
    <PaymentMethod
      options={{
        token: "<YOUR AUTH TOKEN>",
        mode: "production" // if you're using our sandbox, set "sandbox" here
      }}
      onPaymentMethodCreated={() => do something} // optional, from 0.2.20
      onPaymentMethodDeleted={() => do something} // optional, from 0.2.20
    />
  );
}

Example of a subscription

Edit and display a card payment method

List and download invoices

Component options

When using the components, you will need to provide an options prop with the following parameters:

nameDescriptionTypeDefault valueRequired
tokenThe token specific to your customerstring☑️
modeWhich Hyperline environment are you usingproduction | sandboxproduction
appearanceCustomise the appearance of the componentObject

Appearance

You can change the colors and fonts of the component.

<Subscription
  options={{
    token: "<token>",
    appearance: {
      variables: {
        borderRadius: "10px",
        colorBackground: "#000000",
        colorPrimary: "#e1e2f3",
        colorPrimaryHover: "#d0d1e5",
        colorPrimaryDisabled: "#667",
        colorBorder: "#445",
        colorText: "#f1f2f3",
        colorTextSecondary: "#dededf",
        fontFamily: "sacramento"
      },
      fonts: [
        {
          src: "url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4C0f_f5Iai0.woff2)",
          family: "sacramento"
        }
      ]
    }
  }}
/>

Custom color

Variables

They are meant to customise all elements at once.

Variable nameDescription
borderRadiusChange the roundness of the elements: Buttons, tables, …
colorBackgroundMost elements have a transparent background. In other cases, you can customise the background color of the element
colorPrimaryColor used for buttons and accent text
colorPrimaryHoverHover color for buttons
colorPrimaryDisabledColor of disabled buttons
colorBorderThe color of all our regular borders
colorTextDefault text color
colorTextSecondaryText color of secondary text
fontFamilyFont used. If you need to import a font, please read the next section

Fonts

Set your application’s font.

  • src Url of the font file
  • family Name of the font - this is the name you’ll use for the fontFamily variable
<Subscriptions
  options={{
    fonts: [
      {
        src: "url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4C0f_f5Iai0.woff2)",
        family: "sacramento"
      }
    ]
  }}
/>