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 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>' \
  -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 { Subscription, PaymentMethod } from "@hyperline/react-components";

export default function HyperlineSubscription() {
  return (
    <Subscription
      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

​
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
<Subscription
  options={{
    fonts: [
      {
        src: "url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4C0f_f5Iai0.woff2)",
        family: "sacramento",
      },
    ],
  }}
/>
API upgradesThird-party app