Loan Management System APISecure Payments API
API Reference

Create bank card

How to use Secure Payment's iframes to create bank cards.

Creating Bank Cards

Due to PCI DSS compliance requirements, creating a credit or debit card outside of the Secure Payments UI requires the use of our card creation iframe. Our iframe can be embedded within your integrated borrower portal or your own site, allowing your borrowers to securely input card information.

 What is PCI DSS compliance?

The Payment Card Industry Data Security Standard (PCI DSS) is a set of technical and operational requirements created to ensure consumer cardholder data is gathered, stored, and processed securely. Merchants (like yourself) fall within the scope of PCI DSS, meaning you need to meet the compliance requirements to interact with card data.

If you use Secure Payments to capture and use card data, you're covered. Secure Payments is routinely audited via penetration testing to ensure our software maintains security and compliance. We maintain PCI DSS compliance so that you don't have to.

How to Use a Secure Payments Iframe

There are two iframe options: one for creating credit and debit cards, and one for creating checking and savings accounts. The iframes differ slightly from each other, but using either iframe requires the following steps:

  1. Copy the iframe URL
  2. Insert your OBO token
  3. Add the URL to an HTML iframe tag
  4. Embed the iframe tag within your site

Bank Card Iframe

The URL for the card iframe is
https://securepayments.loanpro.io/api/capture-form/{YOUR OBO TOKEN}

Remember to replace {YOUR OBO TOKEN} with an OBO token associated with your Secure Payments account.

Need an OBO token? Generate an OBO Token ↗

Next, add the URL to an HTML iframe tag:

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

Feel free to style the iframe as desired.

Bank Account Iframe

The URL for checking and savings account iframe is
https://securepayments.loanpro.io/api/check-capture-form/{YOUR OBO TOKEN}?account_type={ACCOUNT TYPE}

Remember to replace {YOUR OBO TOKEN} with an OBO token associated with your Secure Payments account.

Need an OBO token? Generate an OBO Token ↗

This iframe also includes an account type value. Using the account_type value, determine whether the iframe will capture a checking or savings account.

Use the account_type parameter if you want to require your borrowers create a specific account type. If you prefer to give your borrowers a choice between adding checking or savings accounts, remove the account_type parameter—if an account_type value is not selected, the iframe will include an account type drop-down selection for the user.

Finally, add the URL to the HTML iframe tag and style as desired:

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

Capture the Payment Profile Token

Once the form has been submitted, Secure Payments will generate a token that represents the payment profile. Storing the payment profile's token is crucial, as the token is required when updating the payment profile, associating it with a customer, or pulling its information.

Here's a JavaScript snippet that retrieves the token once the payment profile is created:

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

Here's an example of a mobile-friendly CSS styling:

<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/{OBO TOKEN}">
       <p>Your browser does not support iframes.</p>
   </iframe>
   </p>
</p>