Commencer avec le SDK Web

Le SDK Web DEUNA est un script de navigateur qui affiche les expériences de paiement dans un élément modal ou un élément cible réactif. Votre serveur crée les commandes et protège les informations d'identification privées, tandis que le navigateur reçoit une clé API publique et un jeton de commande de courte durée.

Architecture d'intégrationInterroger Athia à ce sujet#

1. Charger une version fixéeInterroger Athia à ce sujet#

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

Le script expose window.DeunaSDK. Fixez la version en production et testez les mises à jour dans l'environnement de test. Ne réécrivez pas silencieusement l'URL du CDN à partir d'entrées non fiables au moment de l'exécution.

Pour une application d'une seule page, chargez le script au niveau du document. Si vous le chargez dynamiquement, résolvez une promesse partagée afin que les routes concurrentes n'ajoutent pas de balises en double.

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. Initialiser l'environnementInterroger Athia à ce sujet#

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

Utilisation sandbox pour les tests d'intégration et production pour le trafic en direct. La production est le SDK par défaut, mais définir env une valeur explicite empêche les jetons et les informations d'identification accidentels entre les environnements.

3. Choisir une stratégie de chargementInterroger Athia à ce sujet#

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échargez uniquement l'expérience que le client est susceptible d'ouvrir. La solution actuelle prend en charge payment, elements, voucheret nextAction les entrées de préchargement.

4. Ouvrir une expérienceInterroger Athia à ce sujet#

Politique de sécurité de contenuInterroger Athia à ce sujet#

Commencez à partir de votre politique existante et autorisez uniquement les origines DEUNA utilisées par l'environnement et les fonctionnalités sélectionnés. Le SDK de production lui-même est chargé à partir de https://cdn.deuna.io; les cadres de widget utilisent les hôtes Checkout ou Elements de production, tandis que les connexions API et de stockage utilisent les points de terminaison de production DEUNA. L'environnement de test utilise les points de terminaison correspondants. *.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;

Les portefeuilles, les fournisseurs de fraude, les APM, les polices de caractères, les images et les fichiers de style personnalisés peuvent nécessiter des origines spécifiques au fournisseur. Ajoutez uniquement les origines utilisées par votre intégration configurée ; vérifiez la console du navigateur dans l'environnement de test et maintenez la politique sous contrôle de version. N'ajoutez pas de wildcards larges pour supprimer les violations.

Hôte réactif et accessibilitéInterroger Athia à ce sujet#

Le mode "modal" utilise la fenêtre de visualisation pour les écrans jusqu'à 600 pixels de large. Pour le mode "embarqué", fournissez un hôte fluide et mettez à jour sa hauteur à partir de onResize.

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

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

Conservez la fonction de zoom activée, ne bloquez pas le focus en dehors du widget, restaurez le focus après la fermeture, et testez la navigation au clavier ainsi que le zoom de texte à 200 %.

Liste de contrôle pour l'acceptation du "sandbox"Interroger Athia à ce sujet#

• Le script se charge une seule fois et une erreur entraîne une interface utilisateur récupérable.
• Les clés et les jetons de commande ne sont jamais transmis à la production, ni vice versa.
• Les modes "modal" et "cible" fonctionnent avec une largeur de 320 pixels et uniquement avec un clavier.
• Les cas de succès, de refus, de fermeture, de délai d'attente, de rafraîchissement et d'interruption réseau sont gérés.
• Les popups ou les redirections 3DS et APM ne sont pas bloqués par CSP ou le "sandbox" de l'iframe.
• Les journaux excluent les jetons, les détails du client et les données de paiement.
• Votre backend, et non le callback, détermine si l'exécution est autorisée.

Prochaines étapesInterroger Athia à ce sujet#