React components - Hyperline

Hyperline provides built-in React components to:

Display a customer’s subscriptions
Preview and update the payment method
List and download invoices
List and update billing information

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

Install the dependency

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

Install the package

npm install @hyperline/react-components

Create an auth token

To allow a customer to see their Hyperline 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>" }'

Integrate the React components

Then, integrate the React components. You will most likely generate a new token every time your customer accesses 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
        locale: "en" // optional
      }}
    />
  );
}

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

Components

Subscriptions

List all active subscriptions

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

Subscription

Display a subscription 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, with an optional callback when the form has been successfully saved.

<CustomerBillingInfoForm
  onSuccess={() => {}}
  options={{
    token: "<token>"
  }}
/>

Component options

When using the components, provide an 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	Customize the appearance of the component	Object

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"
        }
      ]
    }
  }}
/>

Variables

Use variables to customize 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 customize 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, see 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"
      }
    ]
  }}
/>

​Getting started

​Components

​Subscriptions

​Subscription

​InvoicesList

​PaymentMethod

​CustomerBillingInfoForm

​Component options

​Appearance

​Variables

​Fonts