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.
- 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:
- 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="https://paiement.systempay.fr/vads-payment/" target="nameFrame" > <input type="hidden" name="vads_action_mode" value="IFRAME" /> ... ... - 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