Passer au contenu principal
Hyperline fournit des composants React intégrés pour :
  • Pour chaque client, afficher ses abonnements
  • prévisualiser et mettre à jour le moyen de paiement
  • lister et télécharger les factures
  • lister et mettre à jour les informations de facturation
Ce document suppose que vous avez déjà une connaissance pratique de base de React et que vous avez déjà configuré un projet React.

​
Premiers pas

1

Installer la dépendance

Installez d’abord le package NPM @hyperline/react-components.
Install the package
npm install @hyperline/react-components
2

Créer un jeton d'authentification

Pour permettre à un client de voir ses données Hyperline, vous devez générer un jeton d’authentification unique côté serveur. Vous pouvez utiliser notre API et l’endpoint de création de jeton d’authentification pour cela.
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

Intégrer les composants React

Ensuite, intégrez les composants React. Vous générerez probablement un nouveau jeton chaque fois que votre client accède à la 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
    />
  );
}

​
Composants

​
Subscriptions

Liste tous les abonnements actifs 
<Subscriptions
  options={{
    token: "<token>"
  }}
/>

​
Subscription

Affiche un abonnement par ID 
<Subscription
  id="sub_xxxx"
  options={{
    token: "<token>"
  }}
/>

​
InvoicesList

Liste et télécharge toutes les factures et remboursements 
<InvoicesList
  options={{
    token: "<token>"
  }}
/>

​
PaymentMethod

Affiche le moyen de paiement actuel, le supprime si autorisé, ou ajoute un nouveau moyen de paiement 
<PaymentMethod
  options={{
    token: "<token>"
  }}
/>

​
CustomerBillingInfoForm

Affiche un formulaire avec toutes les informations de facturation, avec un callback optionnel lorsque le formulaire a été enregistré avec succès. 
<CustomerBillingInfoForm
  onSuccess={() => {}}
  options={{
    token: "<token>"
  }}
/>

​
Options de composant

Lors de l’utilisation des composants, vous devrez fournir une prop options avec les paramètres suivants :
nomDescriptionTypeValeur par défautRequis
tokenLe jeton spécifique à votre clientstring☑️
modeQuel environnement Hyperline utilisez-vousproduction | sandboxproduction
appearancePersonnaliser l’apparence du composantObject

​
Apparence

Vous pouvez modifier les couleurs et les polices du composant. 
<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

Elles sont destinées à personnaliser tous les éléments à la fois.
Nom de variableDescription
borderRadiusModifier l’arrondi des éléments : boutons, tableaux, etc.
colorBackgroundLa plupart des éléments ont un arrière-plan transparent. Dans les autres cas, vous pouvez personnaliser la couleur d’arrière-plan de l’élément
colorPrimaryCouleur utilisée pour les boutons et le texte d’accentuation
colorPrimaryHoverCouleur au survol des boutons
colorPrimaryDisabledCouleur des boutons désactivés
colorBorderCouleur de toutes nos bordures classiques
colorTextCouleur de texte par défaut
colorTextSecondaryCouleur de texte secondaire
fontFamilyPolice utilisée. Si vous devez importer une police, veuillez lire la section suivante

​
Polices

Définissez la police de votre application.
  • src URL du fichier de police
  • family Nom de la police — c’est le nom que vous utiliserez pour la variable fontFamily
<Subscriptions
  options={{
    fonts: [
      {
        src: "url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4C0f_f5Iai0.woff2)",
        family: "sacramento"
      }
    ]
  }}
/>