Finalisation de la commande sur le Web
Sélectionnez l'intégration DEUNA Web prise en charge pour une finalisation complète de la commande et migrez de la surface initCheckout obsolète.
Sur cette page
L'SDK DEUNA Web actuel ne permet pas d'accéder à initCheckout. Créez la page de finalisation de commande de votre entreprise et intégrez initPaymentWidget pour le paiement, ou utilisez le SDK natif maintenu lorsque la finalisation de la commande se fait dans une application mobile.
Sélectionnez l'intégration prise en charge#
| Nécessaire | Surface prise en charge |
|---|---|
| Ajouter des méthodes de paiement à un processus de commande en ligne existant | Widget de paiement pour le Web |
| Stocker une carte ou utiliser Click to Pay | Éléments et stockage de cartes |
| Continuer une transaction 3DS ou une action APM | Prochaine étape |
| Créer un processus de commande mobile natif | iOS, Android, ou Réagir à l'initié |
| Intégrer un processus de commande web existant | SDK web dans un WebView mobile, avec les limitations documentées |
Architecture web recommandée#
const {orderToken, merchantOrderId} = await createOrderFromServer(checkoutState);
await DeunaSDK.initPaymentWidget({
orderToken,
mode: 'target',
target: '#payment-step',
callbacks: {
onSuccess: () => renderVerifiedResult(merchantOrderId),
onError: showPaymentRecovery,
onClosed: () => returnToPaymentMethods(),
onResize: ({height}) => resizePaymentStep(height),
},
});Migration depuis initCheckout#
- Conserver l'état du panier, de la livraison, du paiement, du client et du consentement dans l'application du commerçant.
- Déplacer la création de commande vers le backend du commerçant si elle a été effectuée côté client.
- Remplacer
initCheckout(...)etinitPaymentWidget({orderToken, ...}). - Mapper la gestion précédente de la finalisation de la commande à
onSuccess, puis récupérer la commande sur le backend. - Mapper l'ancienne analyse de cycle de vie à la nouvelle Événements SDK.
- Tester les largeurs mobiles, l'édition des adresses, la navigation dans le navigateur, 3DS, les redirections APM et la récupération après rafraîchissement.
Propriété de l'état#
| État | Propriétaire |
|---|---|
| Contenu du panier, prix, inventaire, livraison, taxes | Backend du commerçant |
| Formulaire de paiement et navigation par étapes | Application du commerçant |
| Méthodes de paiement et saisie de données compatibles | Widget de paiement DEUNA et connexions configurées |
| Traitement du paiement et état de commande normalisé | DEUNA API |
| Décision de livraison | Backend du commerçant après vérification |
Disposition responsive#
Placer l'élément de paiement dans un flux d'une colonne sur les petits écrans. Éviter l'affichage de la synthèse de commande et du contenu de paiement côte à côte en dessous de votre limite de rupture, maintenir l'élément à width: 100%, et répondre à onResize. Les en-têtes et pieds de page fixes ne doivent pas masquer les défis de l'émetteur ou les actions du widget.