Checkout hébergé

Le checkout hébergé est la page de paiement complète affichée par Wajub : choix du moyen de paiement, récapitulatif de commande, OTP, 3DS, coupons et livraison. Vous choisissez son emplacement. La configuration reste identique dans les trois cas. Vous devez seulement choisir entre une intégration en ligne, une superposition ou une redirection.

Quelle option choisir ?

Les trois options nécessitent un sessionId, qui correspond à la valeur authorization_token de POST /payments. Aucune ne nécessite de clé.

En ligne

mount accepte un sélecteur ou un élément et renvoie l'instance que vous pouvez ensuite piloter.

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

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

Deux situations génèrent une erreur immédiate : l'absence de sessionId et un sélecteur qui ne correspond à aucun élément. Toutes deux génèrent une simple Error lors de l'appel, avant toute requête réseau.

Configuration

Chaque option ci-dessous est aussi une prop de CheckoutEmbed dans React, Vue et Svelte.

Callbacks

await mount('#checkout', {
  sessionId,
  onReady: (instance) => (checkoutRef = instance),
  onSuccess: (transaction) => markPaidInTheInterface(transaction),
  onError: (error) => console.error(error.code, error.message),
  onLoadError: (error) => showSessionExpired(error),
  onBreakdown: (b) => (total.textContent = `${b.total.toLocaleString()} ${b.currency}`),
});

onSuccess se déclenche dans un navigateur. Traitez-le comme un signal de l'interface. Livrez la commande à la réception du webhook.

Piloter l'instance

checkout.getState();                  // 'COLLECTING_DETAILS', 'PROCESSING', …
checkout.update({ locale: 'en' });
checkout.update({ appearance: { colorScheme: 'dark' } });
checkout.update({ currency: 'USD' }); // multi currency sessions only
checkout.selectMethod('pm_momo');
checkout.submit();
checkout.retry();
checkout.cancel();
checkout.destroy();

Superposition

Même configuration, mêmes callbacks et même instance, avec la fenêtre modale en plus.

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

const popup = await open({
  sessionId,
  width: 960,
  closeOnOverlay: true,
  onSuccess: (transaction) => fulfillOrder(transaction),
  onClose: () => console.log('dismissed'),
});

popup.isOpen();

La fermeture de la fenêtre modale masque uniquement l'interface. La session reste ouverte jusqu'à sa réussite, son expiration ou son annulation dans le checkout. Le même jeton permet donc encore de la monter.

onResize ne se déclenche jamais en mode superposition, car la fenêtre modale possède une hauteur fixe.

Redirection

Ce mode demande le moins de code et constitue le seul où callback est utile.

// The URL your server already received from POST /payments
window.location.href = authorizationUrl;

// Or, when the browser only has the token
import { checkout } from '@wajub/js';
await checkout({ sessionId });

Le payeur revient sur l'URL de callback définie lors de la création du paiement, avec ?status=complete|cancelled|failed|expired. Ce paramètre d'URL est une indication. Le webhook fournit la confirmation. Consultez Sessions et sécurité pour le contrat complet.

Style

Le checkout utilise déjà l'image de marque de votre compte, configurée une fois dans le Dashboard. Transmettez appearance uniquement pour modifier cette intégration précise, par exemple pour un bouton de mode sombre ou la couleur d'une campagne.

await mount('#checkout', {
  sessionId,
  layout: 'tabs',
  appearance: { theme: 'night', primaryColor: '#6366f1', labels: 'floating' },
});

La liste complète des clés figure dans Apparence. Les valeurs par défaut du compte sont présentées dans Image de marque et thème.