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.

Some shopping carts and payment methods do not support iFrames. See Payment methods incompatible with iFrame for more information.

Integrating the emerchantpay WPF into an existing storefront requires connecting to the emerchantpay payment gateway using the WPF API. You should have a working knowledge of web programming languages, HTTP methods in XML and JSON formats, and UTF-8 encoding. emerchantpay Payment Gateway SDK libraries with code samples are available to integrate with the gateway in a range of languages.

For a solution that requires less development overhead, see emerchantpay’s custom shopping cart plugins.

Prerequisites

Integrating emerchantpay requires an account. To apply, submit the contact form. Your emerchantpay Account Manager will provide your credentials and assist you with the 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.

Example of a Create session response:

  <?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>

See the WPF API documentation for the complete list of request and response parameters as part of a Create method.

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.

Sample checkout page with an custom redirect in the <iframe> element:

 <!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>

Each WPF form redirect_url is 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:

Argencard
Aura
Baloto
Boleto
Cabal
Cencosud
Efecty
Elo
iDeal
Multibanco
Naranja
Nativa
OXXO
Pago Facil
PayU
Pix
RapiPago
Redpagos
Tarjeta Shopping

Even if your payment method is not listed as incompatible above, be sure to test your integration and all of the payment methods you intend to offer your customers to ensure that they display correctly.

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.