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

Le package principal contient le chargeur et les types. Tous les autres reposent sur lui.

npm install @wajub/js

Une enveloppe de framework doit être installée avec le package principal, car @wajub/js est une dépendance homologue et non intégrée.

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 au chargement de l'iframe.

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

mount charge lui-même l'environnement d'exécution et 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, un WajubProvider charge une fois l'environnement d'exécution et CheckoutEmbed le monte. Aucun conteneur à déclarer ni chargeur à attendre.

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.

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.kZ3qP8mWvL2xR7tB5nY4hC6dF9jS1aG0eU3i…" \
-H "Content-Type: application/json" \
-d '{"amount": 25000, "currency": "XAF", "description": "Order 4172"}'

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.