Secure Payments API – iframes

General

The use of iframes via the API is one of the payment profile options available through the Secure Payments API. See also Add Payment Profiles.

Iframes

The use of an iframe to create customer payment profiles is essential to maintaining PCI compliance. See Payment Profiles for more information.

The iframe for a checking account can be added with the following HTML snippet:

<iframe src="https://securepayments.loanpro.io/api/check-capture-form/<YOUR OBO TOKEN>?account_type=<ACCOUNT TYPE>" style="width: 800px; height: 700px; border: 1px solid black;" frameborder="0" border="0" cellspacing="0">
<p>Your browser does not support iframes.</p>
</iframe>

The account_type variable can be set to either "checking" or "savings" depending on the type of account to be created.

A credit card iframe can be created with the following HTML:

<iframe src="https://securepayments.loanpro.io/api/capture-form/<YOUR OBO TOKEN>" style="width: 800px; height: 700px; border: 1px solid black;" frameborder="0" border="0" cellspacing="0">
<p>Your browser does not support iframes.</p>
</iframe>

The iframe URL should include your OBO Token.

Once submitted, a token for the payment profile will be returned. The JavaScript below can be used to retrieve the token from the request. You can then store the token for later use.

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
console.log(event);
if(event.origin === 'https://securepayments.loanpro.io'){
// do payment processing; event.data.status = Secure Payments status; event.data.token = pmt method token;
}
}

Shown below is a sample of the credit/debit card entry window within the Secure Payments UI. Secure Payments also offers custom CSS to control the styling of this iframe.

Mobile-Friendly Formatting

The Secure Payments iframe has implemented CSS to make it mobile-friendly within itself. To achieve this on your end, we recommend displaying the frame in a similar way to the following:

<style>
iframe { position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.iframe_wrapper {
position: relative;
overflow: hidden;
padding-top: 100%;
width:100%;
max-width:720px;
margin:0 auto;
}
</style>

<h2 style="color:#606060; text-align:center; font-weight:400;">Debit card information.</h2>

<p class="iframe_wrapper" id="walletbox">
<p class="iframe_class">
<iframe src="https://securepayments.loanpro.io/api/capture-form/{{ oboToken }}">
<p>Your browser does not support iframes.</p>
</iframe>
</p>
</p>

Following the code above will help ensure that the iframe element sizes correctly.


How did we do?


Powered by HelpDocs (opens in a new tab)