Hosted Tokenization Page

Comment ça fonctionne

Avant de traiter des transactions en production, utilisez notre environnement de test. Découvrez notre solution sans frais ni engagements ! Une fois que vous souhaitez passer en production, consultez ici comment obtenir un compte de production ou contactez-nous !

Flux

Trouvez un flux de transaction complet impliquant chaque partie et les étapes (facultatives) dans cet aperçu :

1. Vos clients se rendent sur votre page de paiement et finalisent l'achat.
2. Vous envoyez une demande CreateHostedTokenization à notre plateforme. Notre plateforme renvoie un hostedTokenizationURL.
3. Vous ajoutez l' <iframe> hébergeant le masque de paiement à votre page de paiement.
4. Vos clients saisissent leurs informations de carte dans l' <iframe>.
   4'(facultatif). Vous utilisez notre fonction de validation pour vérifier si le titulaire de la carte a correctement rempli le formulaire.
5. Vos clients soumettent les données de la carte à notre plateforme.
6. Notre plateforme tokenise les données de la carte et renvoie un hostedTokenizationId.
7. Vous envoyez une demande CreatePayment à notre plateforme en utilisant notre méthode d'intégration Server-to-server, y compris les propriétés 3-D Secure obligatoires.
   7'(facultatif). Nous effectuons une vérification de prévention des fraudes.
8. Notre plateforme envoie une réponse contenant un objet merchantAction, vous indiquant comment procéder. Ces scénarios sont possibles :
   a) Cinématique Frictionless 3-D Secure (merchantAction.actionType=null). Le flux continue à l'étape 14).
   b) Cinématique Challenge 3-D Secure (merchantAction.actionType="REDIRECT"). Le flux continue à l'étape 9).
   c) Pas d'authentification 3-D Secure (merchantAction.actionType=null). Le flux continue à l'étape 14).
9. Vous redirigez le client vers sa banque émettrice pour l'authentification 3-D Secure. Le client s'identifie.
10. Notre plateforme reçoit le résultat d'authentification 3-D Secure de l'émetteur. En fonction du résultat, deux scénarios sont possibles :
    a) Si l'identification a échoué, nous redirigeons vos clients vers votre returnURL, terminant le flux. Vous demandez/affichez le résultat de la transaction comme décrit à l'étape 13.
    b) Si l'identification a réussi, le flux continue à l'étape 11.
11. Nous traitons la transaction et recevons le résultat de l'acquéreur.
12. Nous redirigeons votre client vers votre returnURL.
13. Vous demandez le résultat de la transaction à notre plateforme et l'affichez sur votre returnURL/dans votre boutique en ligne.
14. Si la transaction a réussi, vous pouvez livrer les biens / services.
    14'(facultatif). Supprimez le token si vous ne prévoyez pas de l'utiliser pour des paiements récurrents ou si votre client n'a pas accepté de stocker les informations d'identification.

Simulation du flux dans notre API Explorer

Comme décrit dans le chapitre "Construire la page de paiement et configurer la politique de sécurité du contenu", <button> élément utilisé pour soumettre les données de la carte dans l’étape 5 du flux de paiement ne fait pas partie du <iframe> lui‑même. Par conséquent, vous devez l’ajouter vous‑même à votre page de paiement. Cela s’applique également lors de la soumission d’une session CreateHostedTokenization via notre API Explorer. Cependant, il est encore possible de simuler l’intégralité du flux dans notre API Explorer. Pour ce faire, suivez les étapes :

1. Ouvrez l’API Explorer et sélectionnez l’endpoint CreateHostedTokenization.
2. Cliquez sur le bouton "Send" pour soumettre la requête.
3. Notre plateforme affiche la réponse dans la section "Response". Dans la section "Response", sélectionnez l’onglet "Preview".
4. Remplissez les champs de données de la carte sur la <iframe> de la page de tokenisation hébergée. Cliquez sur le bouton "Create" (qui agit comme l’élément <button> mentionné ci‑dessus).
5. L’API Explorer vous redirige vers l’API Explorer CreatePayment avec l’interface de l’endpoint hostedTokenizationId, pré‑remplissant le JSON avec le hostedTokenizationId issu de votre demande CreateHostedTokenization.
6. Cliquez sur "Envoyer" pour soumettre la demande de paiement comme décrit à l’étape 7 du flux de paiement.

Custom styling

We have designed our Hosted Tokenization Page in a way to allow you to customise it as freely as possible. Take a look at these features:

Create iframe template

The centrepiece of this solution is an iframe containing the payment form. Adapting the iframe to your corporate identity allows you to merge it seamlessly into your webshop. We have designed it in a way that allows you to:

• Adapt its various HTML elements at your liking.
• Use your own .css /image files to further modify the payment form.

Choose language version

Our Hosted Tokenization Page is available in various languages. Populate locale to display it in your customers’ preferred language. The value is a combination of language and country:

{ 
    "locale":"en-EN", 
    
    /* other properties omitted */ 
}

We support the following languages:

Customise template

We provide two distinct approaches for implementing a customised template:

Method 1: Create a fully customised template 

Create a fully customised template from scratch using our powerful Outil de constructions de modèles. This approach offers a high degree of customisation, allowing you to make intricate changes to the payment form's appearance and functionality.

Method 2: Adapt template from GitHub repository

You can also download and customise the necessary files directly from our GitHub repository, providing even more flexibility. It is the ideal solution to let your customers choose between local or global brands (i.e. Visa, MasterCard) if they are using a co-badged credit card.

Once you have created a template that matches your webshop's look and feel, contact us to upload the template to your account.

Adapter le style visuel

Appliquez un style CSS aux dimensions de l'iframe pour l'intégrer encore plus harmonieusement dans votre boutique en ligne. Ajoutez ce code à votre fichier .css en conséquence :

iframe[name=htpIframe0] {
    border: none;
    width: 800px;
}

Gérer le nom du titulaire de la carte

Notre API permet d'afficher ou de masquer le champ du nom du titulaire de la carte dans l'iframe.
Passez le booléen hideCardholderName: true ou le booléen hideCardholderName: false en conséquence dans le constructeur Tokenizer :

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { hideCardholderName: false });

Envoyer des arguments supplémentaires au tokenizer

L'appel du tokenizer, comme décrit à l'étape 3, prend des arguments supplémentaires en plus de hideCardholderName. Ajoutez-en un ou plusieurs dans votre demande pour adapter le flux de paiement à vos besoins :

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', 
{ paymentProductUpdatedCallback: mypaymentProductUpdatedCallback });
function mypaymentProductUpdatedCallback(result) 
{ /* Afficher/retirer la marque de carte détectée de votre page de paiement */ }

Utiliser des possibilités supplémentaires

Notre solution Hosted Tokenization Page offre de nombreuses autres possibilités. Découvrez ici toutes ses fonctionnalités disponibles.

Utiliser un token existant

Notre plateforme vous permet de stocker de manière permanente les données de carte bancaire de vos clients pour des paiements en 1 clic. En préremplissant les champs avec les données enregistrées, l’expérience de paiement de vos clients sera encore plus fluide et votre taux de conversion s’en trouvera amélioré.

Comme le token existe déjà au moment de la demande de transaction, le flux de paiement est différent :

• Étape 1 : Indiquez à notre plateforme que vous souhaitez utiliser un token existant. Pour ce faire, modifiez la demande createHostedTokenizationRequest en ajoutant la propriété tokens :

• Une réponse réussie ressemble à ceci :

  
  Status: 200 OK
  {
      "hostedTokenizationId": "2f4d08d6ddfc411e944e81c54d824a99",
      "invalidTokens": [ "86a44668-5d0f-4e3f-a597-2aa0a4d03fe5" ],
      "hostedTokenizationUrl": "https://payment.preprod.anzworldline-solutions.com.au//hostedtokenization/tokenization/form/2f4d08d6ddfc411e944e81c54d824a99",
      "partialRedirectUrl": "preprod.anzworldline-solutions.com.au//hostedtokenization/tokenization/form/2f4d08d6ddfc411e944e81c54d824a99"
  }
  

• Étape 2 : Préremplissez le formulaire affiché avec les données de carte de crédit enregistrées. Notre plateforme vous offre deux manières de le faire :
  1. Préremplissez le formulaire immédiatement lors de son affichage. Pour cela, ajoutez le token comme quatrième argument au constructeur tokenizer :
  
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { }, '00164fec-32b2-462e-b48b-84a27930b10c');

  
  2. Laissez le formulaire vide au départ lors de son affichage. Permettez à vos clients de choisir dans votre environnement de boutique en ligne de payer avec leur carte enregistrée. S'ils choisissent de le faire, utilisez la fonction suivante pour peupler le formulaire :
  
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { });
  ...
  // Plus tard, par exemple lorsque l'action d'un utilisateur déclenche un changement de token
  function tokenChanged () {
  tokenizer.useToken('00164fec-32b2-462e-b48b-84a27930b10c'); // Change le formulaire pour mettre à jour le token sélectionné, affichant uniquement le champ CVV si nécessaire
  // ou
  tokenizer.useToken(); // Réinitialise le formulaire pour créer un nouveau token
  }

  
  Vous pouvez également permettre à vos clients de mettre à jour le token dans le formulaire de paiement. En initialisant le booléen hideTokenFields comme suit, vos clients peuvent faire l'un ou l'autre.
  
  a) {hideTokenFields:true} : Masquer les champs connus (numéro de carte/date d'expiration).
  b) {hideTokenFields:false} : Les champs obligatoires sont visibles et doivent être remplis / les champs connus peuvent être modifiés (uniquement le nom du titulaire de la carte/date d'expiration).
  
  La demande ressemble à ceci :
  

  var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', {hideTokenFields:true});

Obtenir le statut de validation

Votre page principale peut obtenir le statut de validation du formulaire de paiement à tout moment. Passez une fonction de rappel de validation qui est appelée chaque fois que l'état de validité du formulaire de paiement change. Assurez-vous que cette fonction contient un paramètre qui reçoit un objet avec la propriété booléenne valid. Ce booléen indique si le formulaire est correctement rempli.

Utilisez ces informations pour activer/désactiver le bouton de soumission sur la page principale si le formulaire de paiement est correctement/incorrectement rempli. Ajoutez cette fonction à votre script à l'étape 3 :

var tokenizer = new Tokenizer(hostedTokenizationUrl, 'div-hosted-tokenization', { validationCallback: myValidationCallback });
function myValidationCallback(result) { document.getElementById('btn-submit').disabled = !result.valid }

Supprimer le formulaire

Vous pouvez supprimer le formulaire de paiement de la page principale. L'appel de cette fonction supprime l'iframe et ses écouteurs d'événements :

tokenizer.destroy();

Utiliser tokenId au lieu de hostedTokenizationId

Notre plateforme vous permet de traiter des transactions avec à la fois le hostedTokenizationId et le tokenId. Le flux pour le premier est décrit dans ce chapitre. Utiliser des TokenIDs nécessite de modifier le flux comme suit :

1. Une demande de paiement est initiée.

2. Obtenez une URL de tokenisation valide via un appel Create Hosted Tokenization.

3. Ajoutez un extrait de code à votre page de paiement, vous permettant d'afficher le formulaire de tokenisation avec l'URL de tokenisation valide en tant qu'iframe sur votre page de paiement.

4. Votre client saisit ses données de carte de crédit dans l'iframe.

5. Obtenez le token pour le paiement réel.
   Récupérez le résultat de la tokenisation en effectuant un appel GetHostedTokenization depuis votre backend.
   Utilisez l'exemple de code suivant pour la demande :

   Pour les demandes à notre environnement TEST : https://payment.preprod.anzworldline-solutions.com.au/MERCHANT_ID/hostedtokenizations/hostedTokenizationId
   Pour les demandes à notre environnement LIVE : https://payment.anzworldline-solutions.com.au/MERCHANT_ID/hostedtokenizations/hostedTokenizationId 

   Skip code example

   {{selectedLanguage.name}}

   Backend

   • {{item.name}}

   Copy Try it

6. Créez le paiement réel avec le token. Envoyez une demande CreatePayment à notre serveur. Utilisez l'exemple de code suivant pour la demande :

   Skip code example

   {{selectedLanguage.name}}

   Backend

   • {{item.name}}

   Copy Try it

7. Vous redirigez vos clients vers leur banque émettrice pour une vérification 3-D Secure. Les clients s'identifient.

8. Notre système reçoit le résultat de l'émetteur.

9. Nous soumettons la transaction financière réelle à l'acquéreur pour qu'elle soit traitée.

10. Nous redirigeons votre client vers votre ReturnUrl.

11. Vous demandez le résultat de la transaction à notre plateforme via GetPaymentDetails ou recevez le résultat via webhooks.

12. Si la transaction a réussi, vous pouvez livrer les biens / services.
    12' (facultatif) : Supprimez le token.

Pré-sélectionner les schémas de carte disponibles

Vous pouvez exclure ou pré-sélectionner des schémas de carte spécifiques depuis l'iframe en utilisant les propriétés de l'objet paymentProductFilters dans votre demande CreateHostedTokenization :

• exclude.products : Tableau de paymentProductIds à filtrer
• restrictTo.products : Tableau de paymentProductIds qui devraient être disponibles

trouvez la valeur pour les paymentProductIds individuels dans la colonne "Identifiant du moyen de paiement" de cet aperçu.

Gérer le Code de Vérification de la Carte

En raison des réglementations PCI DSS, nous ne sommes autorisés à stocker la valeur de vérification d'une carte (CVV) que pour un maximum de deux heures.

Pour des paiements uniques via la Hosted Tokenization Page, cette durée est suffisante pour initialiser le paiement. Cependant, lors du traitement de paiements récurrents utilisant des tokens stockés de manière permanente, vous rencontrerez le scénario suivant : pour tout paiement ultérieur, notre plateforme préremplit les champs de l'<iframe> - à l'exception du code CVV en raison de cette réglementation.

Pour améliorer encore l'expérience de paiement de vos clients, notre plateforme vous permet de rendre la vérification CVV optionnelle. Cela s'applique à la fois au

• Paiement initial lors de la création du token.
• Paiement ultérieur lors de l'utilisation du token.

Vous pouvez y parvenir en mettant en œuvre les propriétés suivantes dans votre page de paiement / demande CreateHostedTokenization respectivement :

Lorsque vous envoyez "false" pour la propriété cvvMandatoryForNewToken/cvvMandatoryForExistingToken, la vérification de validation déclenchera un événement de validation de formulaire réussi même lorsque le CVV n'est pas ajouté à l'iframe. Cela vous permet de continuer avec le flux de paiement en envoyant la demande de paiement réelle.

Pour les demandes CreatePayment envoyées sans le hostedTokenizationId, notre plateforme prend en compte si le CVV est obligatoire pour la méthode de paiement. Contactez-nous pour configurer la ou les méthodes de paiement respectives pour vous dans votre compte. Pour remplacer ce paramètre par session, nous recommandons fortement d'envoyer le hostedTokenizationId au lieu du token dans votre demande CreatePayment.

Déclaration d’accessibilité

ANZ Worldline Payment Solutions s’engage à rendre ses solutions accessibles selon la directive (UE) 2019/882 du 17 avril 2019 relative aux exigences en matière d’accessibilité applicables aux produits et services (EAA) ainsi qu’à l’article 47 de la loi française n°2005-102 du 11 février 2005.

Lisez notre déclaration complète sur l'accessibilité pour la solution Hosted Tokenization Page afin de connaître la portée de la conformité du produit.