Afficher la page de paiement dans une iframe

Pour plus de détails, consultez notre guide d'intégration des pages de paiement dans une iframe disponible sur notre site documentaire.

  1. Créer une balise HTML <iframe> dans la page où vous souhaitez afficher le formulaire de saisie (cette page devrait correspondre à l'étape "Paiement" de votre parcours d'achat):
    ...
    <body>
          <iframe id="idFrame" name="nameFrame" src="https://www.mystore.com/payment/form.php"  />
    </body>
    </html>

    Valorisez l'attribut src avec l'URL de votre formulaire de paiement.

    IMPORTANT
    Pour un affichage correct des pages 3D-Secure, nous vous conseillons une taille minimum de 400px * 400px.
    Exemple de page de paiement intégrée:
    Exemple de page 3D Secure intégrée:
  2. Modifier votre formulaire de paiement:
    • valorisez le paramètre vads_action_mode à IFRAME pour activer le mode iframe et obtenir un affichage épuré de la page de paiement,
    • ajoutez l'attribut target à votre balise <form> et valorisez le avec le nom de votre iframe,
    • en mode iframe, l'acheteur ne peut pas consulter ou télécharger le ticket de paiement. Ce dernier doit être envoyé par email à l'acheteur. Le paramètre vads_cust_email devient donc indispensable,
    • utilisez le champ vads_iframe_options si vous souhaitez personnaliser la couleur de fond et la police des champs de saisie.
      vads_iframe_options = {"fieldsBackgroundColor":"#000000","fieldsFontColor":"#FFFFFF"}
    ...
    <form method="POST" action="" target="nameFrame" >
          <input type="hidden" name="vads_action_mode" value="IFRAME" />
          ...
    ...
  3. Gérer la fin du paiement.

    En mode iframe, il n'y a pas de bouton pour annuler ou pour retourner à la boutique. Vous pouvez néanmoins rediriger automatiquement l'acheteur vers votre page de confirmation de commande.

    Pour cela, dans votre formulaire de paiement, valorisez les paramètres ci-dessous:
    • vads_redirect_success_timeout et vads_redirect_error_timeout à "0",
    • vads_url_success avec l'URL de votre page de confirmation de commande,
    • vads_url_return avec l'URL de votre page de retour en cas de paiement refusé,
    • vads_return_mode avec la valeur "POST" ou "GET" pour récupérer le résultat du paiement et les afficher sur votre page de confirmation de commande si nécessaire,
    • vads_theme_config avec la valeur "FORM_TARGET=_top" pour définir comment afficher la page de retour.
      Vous pouvez aussi utiliser les valeurs suivantes en fonction de votre besoin : "_self", "_parent", "_framename".
Exemple de page de confirmation qui affiche les données du paiement