Display in an iFrame
Display the emerchantpay Web Payment Form (WPF) in an inline frame (iFrame) webpage within a webpage
Display the emerchantpay Web Payment Form (WPF) in an iFrame on your checkout page for a more uniform checkout experience for your customers.
Integrating the emerchantpay WPF into an existing storefront requires connecting to the emerchantpay Genesis gateway using the WPF API. You should have a working knowledge of web programming languages, HTTP methods in XML and JSON formats, and UTF8 encoding. Genesis SDK libraries with code samples are available to integrate with the emerchantpay gateway in a range of languages.For a solution that requires less development overhead, see emerchantpay’s custom shopping cart plugins.
To proceed with this solution, you must have an emerchantpay merchant account. Apply for a merchant account by filling out and submitting this contact form.You will be assigned an emerchantpay Account Manager, who will provide you with credentials and assist you with any of emerchantpay’s payment solutions.
Tell your Account Manager that you will display the WPF in an iFrame so that your domain address(es) are whitelisted.
Follow the steps to create an endpoint from your server and authenticate with the emerchantpay payment gateway as outlined in Integrate your WPF.
You will receive a Success or Error response to your Create method request. A Success response will contain a
redirect_url that contains a unique URL address of the payment session for you to redirect your customer to.
<?xml version=”1.0″ encoding=”UTF-8″?> <wpf_payment> <transaction_type>wpf_create</transaction_type> <status>new</status> <mode>live</mode> <transaction_id>119643250547501c79d8295</transaction_id> <consumer_id>123456</consumer_id> <unique_id>44177a21403427eb96664a6d7e5d5d48</unique_id> <technical_message>Transaction successful!</technical_message> <message>Transaction successful!</message> <redirect_url>https://staging.wpf.emerchantpay.net/en/v2/payment/c7e32c1e9d1</redirect_url> <timestamp>2022-05-24T17:25:08Z</timestamp> <amount>100</amount> <currency>USD</currency> </wpf_payment>
Displaying the WPF redirect in an iFrame
Redirect your customer to the unique URL address of the payment session that you received in the
redirect_url parameter of your WPF Create method response. Your customer sees your WPF hosted on the emerchantpay servers displayed in an iframe on your checkout page.
<!DOCTYPE html> <html> <head> <title>Checkout</title> // Title of your checkout page </head> <body> <ul name=”Navigation Menu”> // Navigation menu of your online store <li><a href=”index.html”>Home</a></li> <li><a href=”products.html”>Products</a></li> <li><a href=”checkout.html”>Checkout</a></li> <li><a href=”about.html”>About</a></li> </ul> <h1>Order confirmation</h1> // Optionally display additional checkout information <h2>You have ordered:</h2> <p>3 concert tickets</p> <iframe src=’https://[<redirect_url> from response]’></iframe> // Unique redirect URL from the Create request response </body> </html>
redirect_urlis unique, so you must display a unique payment link URL for each transaction. See the WPF API documentation for the complete list of request and response parameters as part of a Create method.
Payment methods incompatible with iFrame
Some payment methods and all shopping carts are incompatible with iFrame. The following payment methods cannot be displayed in an iFrame, and must be processed using a full-page redirect to the WPF URL:
- Pago Facil
- Tarjeta Shopping
After you display the WPF in an iFrame or as a full-page redirect, show a success page and follow the integration steps to complete your integration.