Finalização completa na Web
Escolha a integração DEUNA Web suportada para uma finalização completa e migre da superfície de inicialização desativada.
Nesta página
O SDK DEUNA Web atual não expõe initCheckout. Crie a página de finalização sob o controle do comerciante e incorpore initPaymentWidget para pagamento, ou utilize o SDK nativo mantido quando a finalização ocorre em um aplicativo móvel.
Escolha a integração suportada#
Diagrama de fluxo
| Necessário | Superfície suportada |
|---|---|
| Adicione métodos de pagamento a uma finalização web existente | Widget de Pagamento para Web |
| Armazene um cartão ou utilize o Click to Pay | Elementos e armazenamento de cartão |
| Continue com 3DS ou uma ação APM | Próxima Ação |
| Crie uma finalização móvel nativa | iOS, Android, ou Reagir nativo |
| Incorpore uma finalização web existente do comerciante | SDK Web em um WebView móvel, com as limitações documentadas |
Arquitetura web recomendada#
01 · merchant UI
Colete dados de finalização
Seus próprios campos de carrinho, contato, envio e consentimento em sua aplicação.
02 · merchant backend
Criar o pedido
Valide os totais e envie o contrato de pedido suportado.
03 · DEUNA widget
Colete o pagamento
Abra o Widget de Pagamento com o token de pedido retornado.
04 · merchant backend
Verifique e realize
Utilize o estado final do DEUNA e webhooks.
JavaScript
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),
},
});Migração de initCheckout#
- Mantenha o estado do carrinho, envio, faturamento, cliente e consentimento na aplicação do comerciante.
- Mova a criação do pedido para o backend do comerciante, se for no lado do cliente.
- Substituir
initCheckout(...)cominitPaymentWidget({orderToken, ...}). - Mapeie o tratamento de finalização de checkout antigo para
onSuccess, e recupere o pedido no backend. - Mapeie a análise de ciclo de vida antiga para o Eventos do SDK.
- Teste as larguras de tela móveis, edição de endereço, navegação no navegador, 3DS, redirecionamentos APM e recuperação após a atualização.
Propriedade do estado#
| Estado | Proprietário |
|---|---|
| Conteúdo do carrinho, preços, estoque, envio, impostos | Backend do comerciante |
| Formulário de finalização e navegação por etapas | Aplicação do comerciante |
| Métodos de pagamento e entrada de credenciais suportados | Widget de Pagamento DEUNA e conexões configuradas |
| Processamento de pagamento e estado de pedido normalizado | DEUNA API |
| Decisão de entrega | Backend do comerciante após a verificação |
Layout responsivo#
Coloque o alvo de pagamento em um fluxo de uma coluna na tela pequena. Evite a exibição do resumo do pedido e o conteúdo de pagamento abaixo do seu limite de layout, mantenha o alvo em width: 100%, e responda a onResize. Cabeçalhos e rodapés fixos não devem cobrir desafios do emissor ou a ação do widget.