Creating an echeck checkout page with the iframe

Background
Before starting this tutorial, make sure you understand the following topics from the Quick start section:

Create a checkout page for e-check (ACH) transactions, either by using the Nexio iframe or with your own form.

Please note that e-check transactions cannot be voided or refunded.

  1. Create an Iframe on Your Web Page

    <html>
    <iframe id="myIframe">
    </iframe>
</html>

  2. Create an Event Listener

    Create an event listener to monitor actions in the iframe. This listener keeps your code updated on what is happening inside the iframe. You handle the success, error, and loading states here.

    See the Iframe events table for a list of possible events.

    window.addEventListener('message', function messageListener(event) {
    if (event.origin === iframeUrl) {
        // switch on event.data properties
        // (e.g. loaded, formValidations, error)
    }
});

  3. Request a One-time-use Token

    Send a POST request to the ecommerce Create one-time-use token endpoint.

    curl -X POST https://api.nexiopaysandbox.com/pay/v3/token \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'Authorization: Basic [Base64_encoded_login]'
  -d '{
  "data": {
    "amount": 29.99,
    "currency": "USD"
  }
}'


    {
  "expiration": "2018-09-18T15:43:05.664Z",
  "fraudUrl": "https://api.nexiopaysandbox.com/pay/v3/fingerprint?token=01080f80-76b8-4363-845d-67e8623bf170",
  "token": "830d36f6-a5e3-4455-9600-3a55b63e2fc2"
}

  4. Copy or Store the Token From the Above Response

    This is your one-time-use token. It will be used in the next step.

    📘

    Notes

    • Each one-time-use token expires after one hour.
    • Each one-time-use token can only be used to submit a single form.
    • Any iframe uiOptions or processingOptions must be included in this step.

  5. Load the Iframe

    a. Append the one-time-use token to the iframe's URL a query parameter called token.

    b. Assign the result to your iframe's src tag.

    📘

    Notes

    • If an error occurs while loading an iframe, the endpoint will return a JSON object with the error message.
    • To receive an HTML response instead, include shouldReturnHtml=true as a query parameter, as in the example above.

    var iframeBaseUrl = "https://api.nexiopaysandbox.com/pay/v3/processECheck";
var oneTimeUseToken = "?token=ec53cd46-cee5-44db-a20f-f5c373a44fd2";
var returnHtml = "&shouldReturnHtml=true";
var url = iframeBaseUrl + oneTimeUseToken + returnHtml;
window.document.getElementById('myIframe').src = url;

  6. Create an Event Listener

    Add an event listener to your form's submit button that will trigger a POST request inside the iframe.
    Now when a user clicks submit on your outer form, the iframe will submit itself.
    Because of the event listener you created in step 2, your code is aware of iframe responses and errors.

    myForm.addEventListener('submit', function processPayment(event) {
    event.preventDefault();
    const url = 'https://api.nexiopaysandbox.com';
    myIframe.contentWindow.postMessage('posted', url);
    return false; // keeps the form from auto submitting
});

Updated 9 days ago