Éléments et coffre-fort de cartes pour le Web

initElements Ouvre une expérience de gestion des informations sans nécessiter de widget de paiement. Utilisez-le pour stocker une carte, lancer Click to Pay ou lancer un portefeuille natif configuré.

Choisissez un type d'élémentsInterroger Athia à ce sujet#

Stockez une carteInterroger Athia à ce sujet#

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

Flux d'expérienceInterroger Athia à ce sujet#

Préparez les élémentsInterroger Athia à ce sujet#

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

Les paramètres d'initialisation et l'appel ultérieur sont fusionnés par le SDK. Placez la configuration stable dans l'entrée de préchargement et les jetons les plus récents dans initElements.

ParamètresInterroger Athia à ce sujet#

Tokeniser ou effectuer un achatInterroger Athia à ce sujet#

Le comportement des cartes de crédit Elements est compatible avec tokenize ou purchase:

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

Utilisation tokenize lorsque le flux du commerçant n'a besoin que d'un identifiant réutilisable. Utilisez purchase Uniquement avec la configuration de commande et du commerçant requises. Laisser le backend décider de la manière dont le credential peut être utilisé.

Portefeuilles natifsInterroger Athia à ce sujet#

Vérifiez la disponibilité avant d'afficher votre bouton, puis lancez le type correspondant directement à partir de l'action du client :

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

Voir Disponibilité du portefeuille Pour les valeurs de la plateforme, la mise en cache et le dépannage.

Mode intégré et contrôléInterroger Athia à ce sujet#

Utilisation mode: 'target', targetet onResize Pour une intégration transparente. Lorsque votre page est responsable de l'action principale, définissez hidePayButton: true, appeler isValid(), puis attendre submit(). Désactiver le bouton externe pendant que la soumission est en cours.

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

Migrer les champs sécurisés héritésInterroger Athia à ce sujet#

La documentation précédente décrivait modularPaymentCredentialsStorage, mountPaymentCredentialStorage, et une sdk.deuna.io Bundle de champs sécurisés. Ces noms ne sont pas présents dans les types publics et l'implémentation actuelle du Web SDK audité. Ne copiez pas les snippets d'initialisation ou de montage de champs hérités dans une nouvelle intégration.

La surface de données sécurisée est hébergée par Elements. DeunaSDK.initElements:

Les éléments hébergés gèrent l'interface utilisateur sensible. L'SDK public actuel ne fournit pas d'API unique pour attacher chaque champ de carte à des nœuds DOM distincts du commerçant. Si votre portée PCI ou votre conception de produit approuvées exigent une propriété de champ indépendante, arrêtez la migration et confirmez une architecture prise en charge avec DEUNA avant la mise en œuvre.

Lors de la migration, exécutez les anciennes et les nouvelles expériences uniquement dans des cohortes de test distinctes et contrôlées. Ne démarrez jamais les deux simultanément ou n'essayez pas de copier des valeurs à partir de cadres sécurisés hérités vers les éléments.

Sécurité et opérationsInterroger Athia à ce sujet#

• Ne pas lire, copier ou enregistrer les données des cartes affichées par Elements.
• Envoyer le résultat uniquement au système de back-end du commerçant qui en a besoin.
• Annuler les sessions et l'état de l'SDK du commerçant lorsque le client se déconnecte.
• Réconcilier une commande après une interruption du processus d'achat.
• Considérez onSuccess En tant que résultat pour le client, et non comme autorisation d'utiliser un identifiant en dehors du consentement du client et du contrat avec le commerçant.

Références connexesInterroger Athia à ce sujet#