Add Credit/Debit Card

General

In order for integrators to remain outside the scope of PCI-DSS compliance, their systems can't touch payment card data. Because of this, Secure Payments provides iframes that can be used to enter payment profile information.

There are two iframe options: credit/debit card and checking/savings account. The source URL for each iframe is different.

In order to use an iframe, you will need to generate an OBO token.

Checking/Savings Iframe

The URL for this iframe is
https://securepayments.loanpro.io/api/check-capture-form/<YOUR OBO TOKEN>?account_type=<ACCOUNT TYPE>

Add the generated OBO token in place of <YOUR OBO TOKEN>.

An account_type value can also be included with the iframe URL. The value options are the following:

  • checking
  • savings

If you don't include a value, the drop-down for Account Type in the iframe will be editable by the user.

The final iframe for the checking/savings account iframe should look something like this:

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

Credit/Debit Card Iframe

The URL for this iframe is:
https://securepayments.loanpro.io/api/capture-form/<YOUR OBO TOKEN>

Add the generated OBO token in place of <YOUR OBO TOKEN>.

The final iframe for the credit/debit card iframe should look something like the following:

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

Payment Profile Token

Once the form has been submitted, a token for the payment profile will be returned. This token must be saved in order to use the payment profile in the future.

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 = PCI Wallet status; event.data.token = pmt method token;
        }
    }

Mobile-Friendly Iframe

While not required, the CSS below is something that can be done to help make the iframe more mobile-friendly.

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