Démarrage rapide

Wajub Components s'exécute dans le navigateur. Cette page présente le parcours fonctionnel le plus court : installer, monter et confirmer. Les options d'installation, la configuration et toutes les props sont présentées sur la page de votre framework.

1. Installer

Installez @wajub/js.

npm install @wajub/js

Un package de framework nécessite @wajub/js installé à côté de lui, comme dépendance homologue.

npm install @wajub/react @wajub/js

Sans bundler, chargez directement le script et n'utilisez pas npm. Il ajoute wajub, Wajub et WajubError à window.

<script src="https://js.wajub.com"></script>

2. Monter le checkout

Le conteneur doit disposer d'une hauteur réservée. Sinon, la page se décale à l'apparition du checkout.

<div id="checkout" style="min-height: 480px"></div>

mount renvoie une CheckoutInstance que vous pouvez ensuite piloter.

import { mount } from '@wajub/js';

await mount('#checkout', {
  sessionId,
  onSuccess: () => (window.location.href = '/order/complete'),
  onError: (error) => showRetry(error),
});

Dans un framework, placez un WajubProvider autour du checkout, provideWajub() en Angular, et affichez CheckoutEmbed.

import { WajubProvider, CheckoutEmbed } from '@wajub/react';

<WajubProvider>
  <CheckoutEmbed sessionId={sessionId} minHeight={480} onSuccess={onPaid} />
</WajubProvider>;

Le thème, le rendu serveur, les composants de champs et tous les callbacks figurent sur la page de votre framework : React, Vue, Svelte, Angular.

3. Origine de la session

Rien de ce qui précède ne s'affiche sans sessionId. Il correspond à la valeur authorization_token renvoyée par POST /payments. Sa création est la seule partie qui ne doit pas se faire dans un navigateur détenant une clé secrète.

curl https://api.wajub.com/payments \
-H "Authorization: sk_test.xxxxxxxxxxxxxxxx…" \
-H "Content-Type: application/json" \
-d '{"amount": 25000, "currency": "XAF", "description": "Order 4172", "customer": {"email": "buyer@example.com"}}'

Envoyez uniquement authorization_token au navigateur. Ce jeton est limité à ce paiement.

4. Confirmer sur votre serveur

Enregistrez transaction.id à la création de la session et utilisez-le pour identifier l'événement à sa réception. C'est tout le rapprochement nécessaire.