Champs de paiement

Les champs de paiement inversent le principe du checkout hébergé. Vous conservez la page, le récapitulatif de commande et le bouton de paiement. Wajub affiche dans des iframes séparées les champs qui ne doivent pas toucher à votre DOM. Vous les envoyez lorsque vous êtes prêt.

Ce compromis vous donne le contrôle de la mise en page, mais retire les parties de la page hébergée qui nécessitent un flux complet : coupons, champs personnalisés, OTP et étape de livraison complète. Si vous en avez besoin, utilisez plutôt le checkout hébergé.

Les cinq composants

Structure générale

Une fabrique conserve la session et les options partagées. Chaque appel create() crée un composant, puis mount() le place sur la page.

import { components, confirmPayment } from '@wajub/js';

const factory = await components(sessionId, {
  locale: 'fr',
  appearance: { primaryColor: '#2563eb', labels: 'floating' },
});

const card = factory
  .create('card')
  .on('change', (event) => (payButton.disabled = !event.complete))
  .mount('#card');

payButton.onclick = () => confirmPayment({ sessionId, components: card });

Les options transmises à la fabrique deviennent les valeurs par défaut de tous ses composants. Les options transmises à create() sont prioritaires pour le composant concerné.

Configuration

componentOrigin utilise par défaut l'origine de la page qui effectue le montage. Un domaine unique ne nécessite donc aucune configuration.

factory
  .create('address', { addressMode: 'shipping', collectName: true, fields: { phone: 'auto' } })
  .mount('#address');

factory
  .create('payment', { collectAddress: 'shipping', collectName: true, layout: 'tabs' })
  .mount('#payment');

Événements

Abonnez-vous avec .on(event, handler), qui renvoie le composant et permet de chaîner les appels. Les mêmes handlers existent sous les noms onReady, onChange et autres dans ComponentConfig.

component.on('change', (event) => {
  payButton.disabled = !event.complete;
  errorLabel.textContent = event.error ? event.error.message : '';
});

Envoyer le paiement

confirmPayment reçoit la session et un composant monté, l'envoie et attend le résultat.

try {
  const { status, transaction } = await confirmPayment({ sessionId, components: card });
  showReceipt(status, transaction);
} catch (error) {
  showRetry(error.code, error.message);
}

Quatre rejets se produisent avant tout envoi. Ils signalent donc des erreurs d'intégration, pas des échecs de paiement.

Piloter un composant

getValue() renvoie null jusqu'à ce que le composant d'adresse signale une valeur lors de son premier change. Lisez-la dans le handler ou lors de l'envoi par le payeur, pas au montage.

Avec un framework

Chaque composant existe sous forme d'enveloppe prête à l'emploi, avec les mêmes options comme props. L'enveloppe surveille aussi appearance, locale et layout, puis appelle update() pour vous.

const { confirm, isConfirming } = useConfirmPayment(sessionId);
const field = useRef<ComponentInstance | null>(null);

<PaymentComponent sessionId={sessionId} onInstance={(i) => (field.current = i)} />;
<button disabled={isConfirming} onClick={() => field.current && confirm(field.current)}>
  Pay now
</button>;

Le provider, les tableaux de props et l'intégration côté serveur figurent dans React, Vue et Svelte.

Fonctionnalités abandonnées