Afficher la page de paiement dans une iframe

  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.

    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