Displaying the payment page in an iframe
For more information, see our Implementation of a Payment Page Into an iFrame guide available in our online document archive.
- Create an HTML <iframe> tag on the page where you would like to display the fill out form (this page should correspond to the “Payment” stage of your purchase journey):
... <body> <iframe id="idFrame" name="nameFrame" src="https://www.mystore.com/payment/form.php"/> </body> </html>Populate the src attribute with your payment form URL.
In order to correctly display 3D Secure pages, we recommend a minimum size of 400px * 400px.Example of an integrated payment page:
Example of an integrated 3D Secure page:
- Edit your payment form:
- Populate your vads_action_mode parameter with IFRAME to enable the iframe mode and obtain a clean display of the payment page.
- Add the target attribute to your <form> tag and populate it with the title of your iframe.
- In iframe mode, the buyer cannot view or download the payment receipt. The receipt must be sent to the buyer by e-mail. Therefore, the vads_cust_email parameter is required.
- Use the vads_iframe_options field if you would like to customize the background color and the font of the entry fields.vads_iframe_options = {"fieldsBackgroundColor":"#000000","fieldsFontColor":"#FFFFFF"}
... <form method="POST" action="https://secure.lyra.com/vads-payment/" target="nameFrame" > <input type="hidden" name="vads_action_mode" value="IFRAME" /> ... ... - Manage the end of payment:
In iframe mode, there is no button to cancel or return to the shop. You can, however, automatically redirect the buyer to the order confirmation page.
For this, in your payment form, populate the parameters below:- vads_redirect_success_timeout and vads_redirect_error_timeout to "0",
- vads_url_success with the URL of your order confirmation page,
- vads_url_return with the URL of your return page in case of rejected payment,
- vads_return_mode with the "POST" or "GET" value to retrieve the payment result and display it on your order confirmation page if necessary,
- vads_theme_config with the "FORM_TARGET=_top" value in order to define the way the return page will be displayed.You can also use the following values depending on your needs: "_self", "_parent", "_framename".
Example of a confirmation page that displays payment details
