Elementos e armazenamento de cartão para Web

initElements Inicia uma experiência de credenciais focada, sem a necessidade do Payment Widget. Utilize-o para armazenar um cartão, iniciar o Click to Pay ou lançar uma carteira nativa configurada.

Selecione o tipo de ElementoPerguntar à Athia sobre isto#

Armazene um cartãoPerguntar à Athia sobre isto#

await DeunaSDK.initElements({
  orderToken,
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com',
  },
  types: [{name: 'vault'}],
  callbacks: {
    onSuccess: (credential) => useCredentialResult(credential),
    onError: ({type, metadata}) => showRecovery(type, metadata.code),
    onClosed: () => restorePaymentMethods(),
    onCardBinDetected: ({cardBin, cardBrand}) => updateCardOffers(cardBin, cardBrand),
    onInstallmentSelected: ({installmentPlanOptionId}) => rememberPlan(installmentPlanOptionId),
  },
});

Fluxo da experiênciaPerguntar à Athia sobre isto#

Carregue os ElementosPerguntar à Athia sobre isto#

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

// Add the order or user context and reveal the prepared experience.
await DeunaSDK.initElements({orderToken, userToken});

Os parâmetros de inicialização e a chamada subsequente são combinados pelo SDK. Coloque a configuração estável na entrada de pré-carregamento e os tokens mais recentes em initElements.

ParâmetrosPerguntar à Athia sobre isto#

Tokenize ou compraPerguntar à Athia sobre isto#

O comportamento dos elementos de cartão suporta tokenize ou purchase:

behavior: {
  paymentMethods: {
    creditCard: {
      flow: 'tokenize',
    },
  },
}

Uso tokenize quando o fluxo do comerciante só precisa de um credencial reutilizável. Use purchase apenas com o pedido e a configuração do comerciante necessários. Deixe o backend responsável por decidir como o credencial pode ser usado.

Carteiras nativasPerguntar à Athia sobre isto#

Verifique a disponibilidade antes de renderizar o botão, e inicie o tipo correspondente diretamente a partir da ação do cliente:

const wallets = await DeunaSDK.getWalletsAvailable({orderToken, userInfo});
applePayButton.hidden = !wallets.includes('APPLE_PAY');

applePayButton.addEventListener('click', () => {
  DeunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: 'APPLE_PAY'}],
    callbacks,
  });
});

Veja Disponibilidade da carteira digital para valores da plataforma, cache e solução de problemas.

Modos integrados e controladosPerguntar à Athia sobre isto#

Uso mode: 'target', targete onResize para uma experiência integrada. Quando a sua página é responsável pela ação principal, defina hidePayButton: true, chame isValid()e aguarde submit(). Desative o botão externo enquanto a submissão estiver pendente.

await DeunaSDK.initElements({
  orderToken,
  types: [{name: 'vault'}],
  mode: 'target',
  target: '#credential-entry',
  hidePayButton: true,
  callbacks: {
    onResize: ({height}) => {
      document.querySelector('#credential-entry').style.height = `${height}px`;
    },
    onSuccess: useCredentialResult,
    onError: showRecovery,
  },
});

Migrar campos de segurança legadosPerguntar à Athia sobre isto#

A documentação anterior descreveu modularPaymentCredentialsStorage, mountPaymentCredentialStorage, e um sdk.deuna.io Pacote de campos seguros. Esses nomes não estão presentes nos tipos públicos ou na implementação atuais do Web SDK auditado. Não copie os trechos de inicialização ou montagem de campos legados em uma nova integração.

A superfície de credenciais mantida é hospedada pela Elements. DeunaSDK.initElements:

Os elementos hospedados possuem controle sobre a interface de entrada sensível. O SDK público atual não expõe uma API direta para anexar cada campo de cartão a nós DOM independentes do merchant. Se o seu escopo PCI ou design de produto aprovado exigir controle independente sobre os campos, interrompa a migração e confirme uma arquitetura suportada pela DEUNA antes da implementação.

Durante a migração, execute as versões antiga e nova apenas em grupos de testes separados e controlados. Nunca inicialize ambas simultaneamente ou tente copiar valores de estruturas seguras legadas para os Elementos.

Segurança e operaçõesPerguntar à Athia sobre isto#

• Não leia, espelhe ou registre campos de cartão exibidos pelos elementos.
• Envie o resultado apenas para a operação de backend do comerciante que o necessita.
• Expire as sessões e o estado do SDK do cliente quando o cliente faz logout.
• Reconcilie um pedido após um fluxo interrompido de compra.
• Trate onSuccess como um resultado do cliente, não como permissão para usar um credencial fora do consentimento do cliente e do contrato com o comerciante.

Referências relacionadasPerguntar à Athia sobre isto#