Widget de paiement pour le Web

Le widget de paiement affiche les méthodes de paiement disponibles pour une commande existante et traite la méthode sélectionnée via DEUNA. Il prend en charge les cartes et les méthodes de paiement alternatives configurées sans exposer les informations sensibles aux scripts JavaScript du commerçant.

Avant de commencerInterroger Athia à ce sujet#

Complétez Commencer avec le SDK WebCréez la commande sur votre backend et renvoyez uniquement son order_token au navigateur.

Ouvrir le widget de paiementInterroger Athia à ce sujet#

await DeunaSDK.initPaymentWidget({
  orderToken,
  language: 'en',
  callbacks: {
    onSuccess: async () => {
      await DeunaSDK.close();
      await verifyOrderOnBackend();
    },
    onError: ({type, metadata}) => {
      showRecovery({type, code: metadata.code});
    },
    onClosed: (action, metadata) => {
      restorePaymentMethods(action, metadata);
    },
    onCardBinDetected: ({cardBin, cardBrand}) => {
      updateCardOffers(cardBin, cardBrand);
    },
    onInstallmentSelected: ({cardBin, installmentPlanOptionId}) => {
      rememberPlan(cardBin, installmentPlanOptionId);
    },
    onPaymentProcessing: () => disableDuplicateActions(),
    onEventDispatch: (event, payload) => trackSafeEvent(event, payload),
  },
});

Séquence d'intégrationInterroger Athia à ce sujet#

ParamètresInterroger Athia à ce sujet#

Modale ou intégréeInterroger Athia à ce sujet#

La modale est la valeur par défaut. Pour le mode intégré :

<div id="deuna-payment" aria-label="Détails de paiement"></div>

await DeunaSDK.initPaymentWidget({
  orderToken,
  mode: 'target',
  target: '#deuna-payment',
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#deuna-payment').style.height = `${Math.ceil(height)}px`;
    },
    onSuccess: verifyOrderOnBackend,
    onError: showRecovery,
  },
});

Le sélecteur doit correspondre à un élément stable. Ne l'affichez pas à l'intérieur d'un élément qui est display: none en cours d'initialisation ou qui provoque un débordement.

Filtrer les méthodes de paiementInterroger Athia à ce sujet#

Omettez paymentMethods pour permettre à la commande et à la configuration du commerçant de déterminer l'éligibilité. Fournissez une méthode pour ouvrir directement son formulaire, ou plusieurs méthodes pour restreindre le choix.

await DeunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    {paymentMethod: 'credit_card'},
    {paymentMethod: 'wallet', processors: ['click_to_pay']},
  ],
  callbacks,
});

Le routage peut choisir parmi les processeurs de cartes configurés, de sorte qu'un champ de saisie de carte de crédit n'a généralement pas besoin d'un processors list.

Contrôlez le bouton de soumissionInterroger Athia à ce sujet#

await DeunaSDK.initPaymentWidget({
  orderToken,
  hidePayButton: true,
  callbacks,
});

payButton.addEventListener('click', async () => {
  if (!(await DeunaSDK.isValid())) return;

  payButton.disabled = true;
  const result = await DeunaSDK.submit();
  if (result.status === 'error') showRecovery(result);
  payButton.disabled = false;
});

L'instance active expose également getWidgetState(), getSelectedPaymentMethod(), refetchOrder(), setOrderData(...), setCustomStyles(...)et close(). Utilisez uniquement les méthodes pertinentes pour l'expérience active et sérialisez les mises à jour afin qu'un ancien jeton de commande ne puisse pas écraser une nouvelle commande de paiement.

Paiements fractionnés et cartesInterroger Athia à ce sujet#

Utilisez le comportement imbriqué documenté pour un flux de deux cartes configuré :

behavior: {
  paymentMethods: {
    creditCard: {
      splitPayments: {maxCards: 2},
    },
  },
}

Voir Diviser les paiements par carte pour la réconciliation et les tests. Utilisez onInstallmentSelected pour l'exact installmentPlanOptionId; ne jamais l'inférer à partir du texte visible.

Gestion des erreurs et des fermeturesInterroger Athia à ce sujet#

Ne pas afficher les messages bruts des fournisseurs. Cartographier les types et codes connus vers des instructions client localisées, enregistrer des diagnostics sécurisés et utiliser un message de nouvelle tentative générique.

Références connexesInterroger Athia à ce sujet#