Widget de Pagamento para Web

O Widget de Pagamento exibe os métodos de pagamento disponíveis para um pedido existente e processa o método selecionado através da DEUNA. Ele suporta cartões e métodos de pagamento alternativos configurados, sem expor credenciais sensíveis ao JavaScript do comerciante.

Antes de começarPerguntar à Athia sobre isto#

Complete Comece a usar o SDK WebCrie o pedido no seu backend e retorne apenas o order_token para o navegador.

Abrir widget de pagamentoPerguntar à Athia sobre isto#

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

Sequência de integraçãoPerguntar à Athia sobre isto#

ParâmetrosPerguntar à Athia sobre isto#

Modal ou incorporadoPerguntar à Athia sobre isto#

O modal é o padrão. Para o modo incorporado:

<div id="deuna-payment" aria-label="Detalhes de 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,
  },
});

O seletor deve corresponder a um elemento estável. Não renderize dentro de um elemento que esteja display: none em execução durante a inicialização ou que cause overflow.

Filtrar métodos de pagamentoPerguntar à Athia sobre isto#

Omita paymentMethods para permitir que a ordem e a configuração do comerciante determinem a elegibilidade. Forneça um método para abrir seu formulário diretamente, ou vários métodos para restringir a escolha.

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

O roteamento pode escolher entre os processadores de cartão configurados, portanto, a entrada de cartão de crédito normalmente não precisa de processors list.

Controle do botão de envioPerguntar à Athia sobre isto#

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

A instância ativa também expõe getWidgetState(), getSelectedPaymentMethod(), refetchOrder(), setOrderData(...), setCustomStyles(...)e close(). Use apenas os métodos relevantes para a experiência ativa e serializa as atualizações para que um token de ordem antigo não sobrescreva uma nova finalização.

Divisão de cartões e parcelamentoPerguntar à Athia sobre isto#

Utilize o comportamento aninhado documentado para um fluxo de duas cartões configurado:

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

Veja Dividir pagamentos com cartão para reconciliação e testes. Utilize onInstallmentSelected para o comportamento exato installmentPlanOptionId; nunca o derive de informações visíveis.

Tratamento de erros e encerramentoPerguntar à Athia sobre isto#

Não exiba mensagens brutas do provedor. Mapeie os tipos e códigos conhecidos para orientações personalizadas do cliente, registre diagnósticos seguros e utilize uma mensagem de repetição genérica.

Referências relacionadasPerguntar à Athia sobre isto#