Hyperline provides built-in React components to:

  • 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

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

Update billing info

​
Components

​
Subscriptions

List all active subscriptions

<Subscriptions
  options={{
    token: "<token>"
  }}
/>

​
Subscription

Display a subscripton by ID

<Subscription
  id="sub_xxxx"
  options={{
    token: "<token>"
  }}
/>

​
InvoicesList

List and download all invoices and refunds

<InvoicesList
  options={{
    token: "<token>"
  }}
/>

​
PaymentMethod

Display the current payment method, delete it if allowed, or add a new payment method

<PaymentMethod
  options={{
    token: "<token>"
  }}
/>

​
CustomerBillingInfoForm

Display a form with all billing info

<CustomerBillingInfoForm
  options={{
    token: "<token>"
  }}
/>

​
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.

<Subscriptions
  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"
      }
    ]
  }}
/>
API upgradesThird-party app