Skip to main content

Iframe Implementation

Updated

Table of Contents

  1. Overview
  2. Obtaining the Collect Checkout link
  3. Adding the Collect Checkout Link to an iframe

Overview

Collect checkout is a hosted checkout page that can be integrated into most web-based payment workflows. The checkout page lives entirely on the gateway’s servers, ensuring that no payment data ever touches your environment.

The normal flow of Collect Checkout involves the customer selecting a button, to be redirected to NMI's secure Collect Checkout payment page. However, with Collect Checkout you may embedded the payment link onto an iframe in order to avoid having to redirect a customer from your website. This article will highlight this method. More information on iframe's may be found here.

 

Obtaining the Collect Checkout link

In order to embed the Collect Checkout page you will need to first obtain the Collect Checkout link for your generated button. To do this you will need to:

  1. Login to the Merchant Gateway Account
  2. Select Collect Checkout
  3. Select History
  4. Select the Collect Checkout button you would like and select Copy Link*

* If the merchant does not have any buttons created they will need to create one

 

Adding the Collect Checkout Link to an iframe

Once you have a Collect Checkout link, you'll need to add the Collect Checkout page to your website via the HTML tag <iframe>. Here is an example of how it should appear:

<iframe src="https://Collect_Checkout_Link_Here"></iframe>

You may also add additional attributes such as width and height in order to customize the size of the iframe:

<iframe src="https://Collect_Checkout_Link_Here" width="1200" height="800"></iframe>