Comece a usar o SDK Web

O SDK Web da DEUNA é um script do navegador que renderiza experiências de pagamento em um modal ou em um elemento de destino responsivo. Seu backend cria pedidos e protege credenciais privadas; o navegador recebe uma chave de API pública e um token de pedido de curta duração.

Arquitetura de integraçãoPerguntar à Athia sobre isto#

1. Carregue uma versãoPerguntar à Athia sobre isto#

<script
  crossorigin
  src="https://cdn.deuna.io/web-sdk/v1.7/index.js">
</script>

O script expõe window.DeunaSDK. Fixe a versão na produção e faça testes de atualização no sandbox primeiro. Não reescreva silenciosamente a URL do CDN em tempo de execução a partir de entradas não confiáveis.

Para uma aplicação de uma única página, carregue o script em nível de documento. Se você o carregar dinamicamente, resolva uma promessa compartilhada para que rotas concorrentes não adicionem tags duplicadas.

function loadDeunaSdk() {
  if (window.DeunaSDK) return Promise.resolve(window.DeunaSDK);
  if (window.__deunaSdkPromise) return window.__deunaSdkPromise;

  window.__deunaSdkPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.deuna.io/web-sdk/v1.7/index.js';
    script.crossOrigin = 'anonymous';
    script.onload = () => resolve(window.DeunaSDK);
    script.onerror = () => reject(new Error('DEUNA Web SDK failed to load'));
    document.head.append(script);
  });

  return window.__deunaSdkPromise;
}

2. Inicialize o ambientePerguntar à Athia sobre isto#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
});

Uso sandbox para testes de integração e production para tráfego em produção. A produção é o SDK padrão, mas definir env explicitamente impede tokens e credenciais acidentais entre ambientes.

3. Escolha a estratégia de carregamentoPerguntar à Athia sobre isto#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
  preloadWidgets: [
    {
      widget: 'payment',
      params: {
        language: 'en',
        callbacks,
      },
    },
  ],
});

// Once your backend returns the token, reveal the prepared widget.
await DeunaSDK.initPaymentWidget({orderToken});

Pré-carregue apenas a experiência que o cliente provavelmente abrirá. A versão atual suporta payment, elements, vouchere nextAction entradas de pré-carregamento.

4. Abra uma experiênciaPerguntar à Athia sobre isto#

Política de Segurança de Conteúdo (CSP)Perguntar à Athia sobre isto#

Comece com a política existente da sua aplicação e permita apenas as origens da DEUNA usadas pelo ambiente e recursos selecionados. O SDK de produção carrega a partir de https://cdn.deuna.io; os frames do widget usam os hosts de Checkout ou Elementos de produção, enquanto as conexões de API e armazenamento usam os endpoints de produção da DEUNA. O sandbox usa os correspondentes *.sandbox.deuna.io hosts.

Content-Security-Policy:
  script-src 'self' https://cdn.deuna.io;
  frame-src https://checkout-ux.deuna.com https://elements.deuna.com https://cdn.getduna.com;
  connect-src 'self' https://api.deuna.io https://apigw.getduna.com https://elements.deuna.com;

Carteiras, provedores de fraude, APMs, fontes, imagens e arquivos de estilo personalizados podem exigir origens específicas do provedor. Adicione apenas as origens usadas pela sua integração configurada; verifique o console do navegador no sandbox e mantenha a política sob controle de versão. Não adicione wildcards amplos para silenciar violações.

Host responsivo e acessibilidadePerguntar à Athia sobre isto#

O modo "modal" utiliza a área visível em telas com até 600px de largura. Para o modo "incorporado", forneça um contêiner responsivo e atualize sua altura a partir de onResize.

#deuna-payment {
  width: 100%;
  min-width: 0;
  min-height: 32rem;
}

@media (max-width: 600px) {
  #deuna-payment { min-height: 100dvh; }
}

Mantenha a função de zoom habilitada, não prenda o foco fora do widget, restaure o foco após o fechamento e teste a navegação por teclado, além de um zoom de texto de 200%.

Lista de verificação para ambiente de testePerguntar à Athia sobre isto#

• O script carrega uma vez e, em caso de falha, gera uma interface de usuário recuperável.
• As chaves e os tokens de pedido de teste nunca chegam ao ambiente de produção, ou vice-versa.
• Os modos "modal" e "incorporado" funcionam em uma largura de 320px e com teclado apenas.
• Suporte para sucesso, rejeição, fechamento, tempo limite, atualização e interrupção de rede.
• Pop-ups ou redirecionamentos de 3DS e APM não são bloqueados pelo CSP ou pelo sandbox de iframe.
• Os logs excluem tokens, detalhes do cliente e dados de pagamento.
• Seu backend, e não a chamada de retorno, decide se a finalização é permitida.

Próximos passosPerguntar à Athia sobre isto#