Secure Payments API Iframes

General

Use of iframes through the API is one of the payment profile options available through the Secure Payments (formerly PCI Wallet) API.

iframes

The use of an iframe to create customer payment profiles is essential to maintain 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://pciwallet.simnang.com/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>

Where account type is either checking or  savings depending on the type of account to be created.

A credit card iframe can be created with:

<iframe src="https://pciwallet.simnang.com/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://pci-wallet.simnang.com'){
// do payment processing; event.data.status = PCI Wallet status; event.data.token = pmt method token;
}
}

Shown below is a sample of the credit/debit card. Secure Payments also offers custom CSS to control the styling of this Iframe.

Mobile Friendly

The iframe has some CSS to make it mobile friendly within itself. You should make sure to make the iframe element mobile friendly on your side as well. To do this, we recommend implementing the frame in a similar way to this:

<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://pciwallet.simnang.com/api/capture-form/{{ oboToken }}">
<p>Your browser does not support iframes.</p>
</iframe>
</p>
</p>

This will help ensure that the iframe element sizes correctly.


How did we do?


Powered by HelpDocs (opens in a new tab)