Elementos y almacenamiento de tarjetas para Web

initElements Avvia un'esperienza di credenziali focalizzata senza richiedere il Payment Widget. Utilizzalo per salvare una carta, avviare Click to Pay o lanciare un portafoglio nativo configurato.

Seleziona un tipo di ElementsChiedi ad Athia informazioni#

Salva una cartaChiedi ad Athia informazioni#

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

Flusso di esperienzaChiedi ad Athia informazioni#

Carica gli elementi DEUNAChiedi ad Athia informazioni#

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

I parametri di inizializzazione e la chiamata successiva vengono uniti dall'SDK. Metti la configurazione stabile nell'elemento di precaricamento e i token più recenti in initElements.

ParametriChiedi ad Athia informazioni#

Tokenizzazione o acquistoChiedi ad Athia informazioni#

Il comportamento degli elementi di pagamento supporta tokenize o purchase:

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

Uso tokenize quando il flusso del commerciante necessita solo di un credential riutilizzabile. Utilizzare purchase solo con l'ordine e la configurazione del commerciante richiesti. Lasciare che il backend gestisca la decisione su come utilizzare il credential.

Portafogli nativiChiedi ad Athia informazioni#

Verificare la disponibilità prima di visualizzare il pulsante, quindi avviare direttamente il tipo corrispondente dall'azione del 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,
  });
});

Vedi Disponibilità del portafoglio per valori di piattaforma, caching e risoluzione dei problemi.

Modalità integrate e controllateChiedi ad Athia informazioni#

Uso mode: 'target', targete onResize per un'esperienza integrata. Quando la pagina è responsabile dell'azione principale, impostare hidePayButton: true, chiamare isValid()e attendere submit(). Disabilitare il pulsante esterno durante l'elaborazione.

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

Migra i campi di sicurezza legacyChiedi ad Athia informazioni#

La documentazione precedente descrive modularPaymentCredentialsStorage, mountPaymentCredentialStorage, e un'altra sdk.deuna.io Pacchetto di campi protetti. Questi nomi non sono presenti nei tipi pubblici o nell'implementazione corrente del Web SDK. Non copiare frammenti di inizializzazione o di montaggio dei campi legacy in una nuova integrazione.

La superficie di autenticazione gestita è ospitata tramite Elements. DeunaSDK.initElements:

Gli elementi ospitati gestiscono l'interfaccia utente per l'inserimento dei dati sensibili. L'attuale SDK pubblico non espone un'API uno-a-uno per il montaggio di ogni campo di carta in nodi DOM indipendenti del merchant. Se il vostro ambito PCI o la vostra progettazione del prodotto richiedono la proprietà indipendente dei campi, interrompete la migrazione e confermate un'architettura supportata con DEUNA prima dell'implementazione.

Durante la migrazione, eseguite l'esperienza precedente e quella nuova solo in coorti di test separate e controllate. Non inizializzare mai entrambe contro la stessa azione del cliente o tentare di copiare valori da frame sicuri legacy in Elements.

Sicurezza e operazioniChiedi ad Athia informazioni#

• Non leggere, riflettere o registrare i campi della carta visualizzati dagli elementi.
• Inviare il risultato solo all'operazione backend del commerciante che ne ha bisogno.
• Scadere le sessioni del commerciante e lo stato dell'SDK quando il cliente esce.
• Riconciliare un ordine dopo un flusso di acquisto interrotto.
• Considera onSuccess come risultato del cliente, non come autorizzazione all'utilizzo di un credential al di fuori del consenso del cliente e del contratto con il commerciante.

Riferimenti correlatiChiedi ad Athia informazioni#