The Versapay e-commerce solution is composed of several components. First, is a server-side API that allows your application to configure a new payment session, manage customer wallets, create orders, and initiate payments. In addition, there is a client-side JavaScript SDK that enables your web applicaiton to accept secure payment data via an iframe hosted by Versapay. Your sensitive payment data will not transit your application when you use the iframe, so your application will have a reduced PCI scope.

In order to accept a payment, the general flow is to first create a session using the server-side API. Once a session ID has been generated by the Versapay server and returned to your application, your client-side code can use that session ID to initialize the Versapay payment SDK, which will, in turn, render the iframe. Next, the customer will interact with the iframe to specify a payment method. The SDK will return a token representing that payment method to your client-side code. Your client-side code must return the token to your server-side code, which will then use the original session ID and the token to create an order and take a payment. Finally, your ERP or order fulfillment system will query the Versapay cloud platform for new orders so that they may be created and fulfilled via your standard workflow.

The UAT environment is a useful sandbox for integration testing where transaction settlements are simulated using test account numbers and test dollar amounts.

https://ecommerce-api-uat.versapay.com

Once integration testing is complete via the UAT environment, start sending your requests to the production URL to start moving money and/or integrating with Versapay.

https://ecommerce-api.versapay.com

If the customer checking out through your website is a known customer with an authenticated account and you would like the Versapay cloud platform to offer to store payment methods for future use, you can generate a Wallet ID for that customer. To do so, POST to the /wallets endpoint to generate a new Wallet ID. Once the Wallet ID has been returned to your application, it is your application's responsibility to associate the Wallet ID with the customer record in your web application so that it can be provided to the API each time the customer checks out.

If the customer already has a Wallet ID associated with their record in your application, that Wallet ID should be provided in the session creation request.

Each checkout attempt requires that your application request a Session ID from the Versapay API. This is accomplished by POSTing to the /sessions endpoint. When creating a new session, you must specify your Versapay gateway credentials, which consist of an API Token and an API Key. These are passed in the http request using an authorization header. In addition, you may pass session options to the API that control the behavior, and verbiage of the checkout experience in the hosted iframe.

Session options also allow you to specify a Wallet ID for the current customer in the wallet element.

The POST request to the /sessions endpoint will return a Session ID to your application. That Session ID must be passed to your client-side JavaScript so that it can initialize the Versapay Checkout Client SDK.

The Versapay Checkout JavaScript SDK can be used to initialize a hosted iframe within your ecommerce website that contains all the fields needed to complete a secure credit card transaction while keeping your website out of scope for PCI compliance.

Install the Versapay library

To start using the SDK, load the library from the hosting url. This will give you access to functions in the versapay module.

<!-- Load the client component -->
<script src="https://ecommerce-api-uat.versapay.com/client.js"></script>

<!-- Call functions in the versapay module -->
<script>
    var client = versapay.initClient(sessionId)
</script>

Get a Session ID

The Versapay SDK requires a Session ID generated by a server side API request. Once you have a Session ID, you can initialize the client.

Create a client instance

Create an instance of the client class using the versapay.initClient function, passing the session key generated on the server side as a parameter.

<script>
    var client = versapay.initClient(sessionId)
</script>

Add styles or fonts

Although you can use the default styles and fonts of the checkout iframe, it can also be configured with styles and fonts that fit with your ecommerce website. These can be passed as optional parameters to the initClient function.

The styles parameter should be sent as a json object of CSS selectors and properties. See the CSS Styling section for a list of supported properties and DOM element IDs that can be used in selectors.

The fontUrls parameter should be an array of urls that point to an embeddable Google Fonts link.

<script>
    var styles = {
        html: {
            "font-family": "DotGothic16",
        },
        input: {
            "font-size": "14pt",
            "color": "#3A3A3A",
        },
        select: {
            "font-size": "14pt",
            "color": "#3A3A3A",
        }
    };

    var fontUrls = ['https://fonts.googleapis.com/css2?family=DotGothic16&display=swap']

    var client = versapay.initClient(clientSession, styles, fontUrls)
</script>

Create DOM elements

The hosted iframe requires two DOM elements, a form and an empty DOM element within the form to act as a container for the iframe. You will likely also want to include a way to submit the form, like a Submit or Pay button, and a way to display submission errors.

<form id='form'>
    <div id='container'></div>
    <div>
        <button id='submit'>Pay</button>
        <span id='submitError'></span>
    </div>
</form>
<script>
    const form = document.querySelector('#form')
    const submit = document.querySelector('#submit')
    const submitError = document.querySelector('#submitError')
</script>

Initialize the iframe and create a frame promise

Initialize the iframe using the client.initFrame async function, passing the empty DOM element and the desired iframe width and height as parameters. Since the iframe will resize its internal elements responsively to fit the width and height specified here, these parameters can be assigned programmatically to ensure that the checkout page displays correctly on all devices. The return value of this function is a promise object that is resolved when the iframe and fields are ready.

<script>
    const form = document.querySelector('#form')
    const submit = document.querySelector('#submit')

    var containerWidth = document.documentElement.clientWidth > 500 ? '500px' : '400px'

    versapay.initClient(clientSession).then(function(client) {
        frameReadyPromise = client.initFrame(document.querySelector('#container'), '500px', containerWidth)
    }
</script>

Listen for payment method approval events

When the selected payment method is approved or rejected by the hosted iframe, an approval promise is fulfilled or rejected in the instance of the client class. Use the client.onApproval(onResolve, onReject) function to return the results of the approval promise, where the parameters are callback functions to execute when the promise is fullfilled or rejected.

<script>
    client.onApproval(
        onResolve = result => {
            // this is the callback function to use when the payment method is approved
            console.log(result)
        }, 
        onReject = error => {
            // this is the callback function to use when the payment method is rejected
            console.log(error)
        }
    )
</script>

Create the submit event handler

Add an event handler for the form submit event that calls the client.submitEvents() function. The submitEvents() function triggers a submission on the form in the hosted iFrame, which returns the results of that submission to the approval event in the client instance.. Note that the form.then() function is also useful for handling any other code that should be executed once the frame and fields are ready for input, like setting a form submit button to enabled.

<script>
    const form = document.querySelector('#form')
    const submit = document.querySelector('#submit')

    versapay.initClient(clientSession).then(function(client) {
        frameReadyPromise = client.initFrame(document.querySelector('#container'), '500px', '250px')

        frameReadyPromise.then(function() {
            submit.removeAttribute('disabled')

            form.addEventListener('submit', function(event) {
                event.preventDefault()
                var tokenPromise = client.submitEvents()
            })
        })
    }
</script>

Receive the payment method submission results from the iframe

After the form is submitted, the results of the payment method submission are passed back to the iframe. The submission results are returned to the client library using the approval promise on the client instance. When the approval promise is fulfilled, the results will return a json object containing the payment type and a token that can be passed back up to the server side code to perform a charge, authorization, etc. If the approval promise is rejected, the error can be used in the callback function.

<script>
    client.onApproval(
        onResolve = result => {
            // this is the callback function to use when the payment method is approved
            // the result.paymentType value can be used to conditionally handle different payment types (creditCard, ach, giftCard)
            // the result.token value can be passed up to the server-side code to use for other operations
            console.log(`Payment Type: ${result.paymentType}, Token: ${result.token}`)
        }, 
        onReject = error => {
            // this is the callback function to use when the payment method is rejected
            // the error.paymentType value can be used to conditionally handle different payment types (creditCard, ach, giftCard)
            // the error.error value will contain more information about the payment method error
            console.log(`Payment Type: ${error.paymentType}, Error: ${error.error}`)
            submitError.textContent = error.error
        }
    )
</script>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Versapay JS Ecomm Library Demo</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Yantramanav&display=swap');
        </style>
    </head>
    <body>
        <form id='form'>
            <div id='container' style="height:358px; width:500px"></div>
            <div style="position: relative">
                <button id='submit' style=
                    "width:420px; 
                    height:50px; 
                    color:#FFFFFF; 
                    font-size: 18px; 
                    line-height: 20px;
                    background-color:#002233; 
                    margin: 16px 40px;
                    font-family: Yantramanav;
                    padding-left: 20px;
                    border: 0;
                    border-radius: 3px;"
                >Pay</button>
                <span id='submitError' style=
                    "line-height: 14px;
                    color: red;
                    font-size: 12px;
                    font-family: Yantramanav;
                    position: absolute;
                    bottom: -5px;
                    left: 42px;"
                ></span>
            </div>
        </form>
        <script src="https://ecommerce-api-uat.versapay.com/client.js"></script>
        <script>
            const form = document.querySelector('#form')
            const submit = document.querySelector('#submit')
            const submitError = document.querySelector('#submitError')

            // Get the Session ID from the server side API.
            var clientSession = '24653110-410a-49f2-9ee3-477f6bfe06b3'

            // Set any custom styles to pass to the iFrame.
            var styles = {
                // html: {
                //     "font-family": "DotGothic16",
                // },
                // input: {
                //     "font-size": "14pt",
                //     "color": "#3A3A3A",
                // },
                // select: {
                //     "font-size": "14pt",
                //     "color": "#3A3A3A",
                // }
            };

            // Set custom google font families to display in the iFrame.
            var fontUrls = ['https://fonts.googleapis.com/css2?family=DotGothic16&display=swap']

            // Initialize the client with the Session ID and any custom styles or fonts.
            var client = versapay.initClient(clientSession, styles, fontUrls)

            // Instantiate the iFrame from client object using the target dom and set the frame height and width.
            var frameReadyPromise = client.initFrame(document.querySelector('#container'), '358px', '500px')

            // Initialize approval callbacks to handle success/failure of tokenization or payment in the iframe
            client.onApproval(
                onResolve = result => {
                    // this is the callback function to use when the payment method is approved
                    // the result.paymentType value can be used to conditionally handle different payment types (creditCard, ach, giftCard)
                    // the result.token value can be passed up to the server-side code to use for other operations
                    console.log(result)
                }, 
                onReject = error => {
                    // this is the callback function to use when the payment method is rejected
                    // the error.paymentType value can be used to conditionally handle different payment types (creditCard, ach, giftCard)
                    // the error.error value will contain more information about the payment method error
                    console.log(error)
                }
            )

            // The client.initFrame function returns a promise that resolves when the iFrame is ready to be used
            frameReadyPromise.then(function() {       
                // Code that is placed here will run after the iFrame is ready.
                // For instance, you can disable your form submit button and 
                // only allow clicks after the iFrame is ready.
                submit.removeAttribute('disabled')

                // Add an event listener for your form submission.
                form.addEventListener('submit', function(event) {
                    event.preventDefault()

                    // Use submit to trigger the submit event on the form in the iframe
                    client.submitEvents()
                })
            })
        </script>
    </body>
</html>

DOM Element IDs

The following IDs can be used as CSS selectors in the style json that can be passed as a parameter to initClient.

#accountNoDiv
#accountNo
#cardholderNameDiv
#cardholderName
#expDateDiv
#expDate
#expMonth
#expYear
#cvvDiv
#cvv

Supported CSS properties

'-moz-appearance',
'-moz-osx-font-smoothing',
'-moz-tap-highlight-color',
'-moz-transition',
'-webkit-appearance',
'-webkit-font-smoothing',
'-webkit-tap-highlight-color',
'-webkit-transition',
'appearance',
'background-color',
'border',
'border-radius',
'color',
'direction',
'font',
'font-family',
'font-size',
'font-size-adjust',
'font-stretch',
'font-style',
'font-variant',
'font-variant-alternates',
'font-variant-caps',
'font-variant-east-asian',
'font-variant-ligatures',
'font-variant-numeric',
'font-weight',
'letter-spacing',
'line-height',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'opacity',
'outline',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'text-align',
'text-shadow',
'transition',
'flex-direction',
'flex-flow',
'flex-basis',
'flex-shrink',
'flex-grow',
'flex-wrap',
'justify-content',
'flex',
'align-self',
'align-items',
'align-content'

Once your client-side script has received the payment token from the Versapay Client SDK and passed it to your server-side application, you need to use the API to create and order and process a payment. Depending on your checkout scenario, this can be done in a single step, or it can be split into multiple steps to support more complex flows.

When an order is created, it has a status of either Finalized or Not Finalized. Only Finalized orders will be brought into your ERP or order fulfillment system. If you are attempting to use a single payment method for the order, you can use the one-step process. The one-step process will automatically Finalize the order if the payment is approved. Other scenarios, which may include zero payments (e.g., the order is being paid via a Purchase Order) or multiple payments (e.g., the order payment is being split between two credit cards), require that you:

1. Create the order without any payments
2. Request zero or more payments necessary for order completion
3. If all payments are successful, Finalize the order to signal that it is ready to be retrieved by the ERP or order fulfillment system

When you POST to /sessions/{sessionId}/sales, the Versapay system will create an order based on the data that you supply in your request. Your POST can include a payment element if the intent is to take exactly one payment for the order.

If successful, the API will return an Order ID, the Finalization status, and, if a payment was requested, the payment response information.

Always check the Finalization status of the order. If the payment was approved, but the order was not automatically finalized, you should send a PATCH request to finalize the order yourself.

If your intent is to process multiple payments against an order, and you have already create the order and have an Order ID, you can POST to the /sessions/{sessionId}/sales/{saleId}/payments endpoint to request a payment against the order.

Once all payments are successful, you must finalize the order.

When you are finished with an order and are ready for the ERP or order fulfillment system to retrieve it, you can finalize the order by sending a PATCH request to the /sessions/{sessionId}/sales/{saleId} endpoint. If finalization is successful, the API will return a response indicating that the order has been finalized.

Operations available to developers

Operations intended only to the iframe front end

EcommerceV1