Widget di pagamento per Web

Il widget di pagamento visualizza i metodi di pagamento disponibili per un ordine esistente e li elabora tramite DEUNA. Supporta carte e metodi di pagamento alternativi configurati senza esporre credenziali sensibili al codice JavaScript del commerciante.

Prima di iniziareChiedi ad Athia informazioni#

Completare Comenzar con el SDK Webcrea l'ordine sul tuo backend e restituisci solo il order_token al browser.

Widget di pagamento apertoChiedi ad Athia informazioni#

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),
  },
});

Sequenza di integrazioneChiedi ad Athia informazioni#

ParametriChiedi ad Athia informazioni#

Modal o incorporatoChiedi ad Athia informazioni#

Il modal è predefinito. Per la modalità incorporata:

<div id="deuna-payment" aria-label="Dettagli di pagamento"></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,
  },
});

Il selettore deve corrispondere a un elemento stabile. Non renderizzarlo all'interno di un elemento che è display: none in fase di inizializzazione o che causa overflow.

Filtrare i metodi di pagamentoChiedi ad Athia informazioni#

Ometti paymentMethods per consentire all'ordine e alla configurazione del commerciante di determinare l'idoneità. Fornire un metodo per aprire direttamente il suo modulo, o più metodi per limitare la scelta.

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

Il routing può scegliere tra i processori di carte configurati, quindi l'inserimento di una carta di credito di solito non richiede processors list.

Possedere il pulsante di invioChiedi ad Athia informazioni#

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'istanza attiva espone anche getWidgetState(), getSelectedPaymentMethod(), refetchOrder(), setOrderData(...), setCustomStyles(...)e close(). Utilizzare solo i metodi pertinenti all'esperienza attiva e serializzare gli aggiornamenti in modo che un token di ordine precedente non possa sovrascrivere un nuovo checkout.

Gestione di carte e piani di pagamentoChiedi ad Athia informazioni#

Utilizzare il comportamento nidificato documentato per un flusso di due carte configurato:

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

Vedi Suddivisione dei pagamenti con carta per la riconciliazione e i test. Utilizzare onInstallmentSelected per l'implementazione esatta installmentPlanOptionId; non inferirlo dal testo visualizzato.

Gestione degli errori e chiusura delle transazioniChiedi ad Athia informazioni#

Non visualizzare messaggi grezzi del fornitore. Mappare i tipi e i codici noti a istruzioni per i clienti localizzate, registrare diagnosi sicure e utilizzare un messaggio di riprova generico.

Riferimenti correlatiChiedi ad Athia informazioni#