On This Page

Client-Side Setup

You can integrate
Microform Integration
 with your native payment acceptance web page or mobile application.

Web Page

Initiate and embed
Microform Integration
 into your payment acceptance web page.
  1. Decode the JWT from the
    /microform/v2/sessions
     response to get the capture context.
  2. Use the
    clientLibrary
     and
    clientLibraryIntegrity
     values that are returned in the JWT from
    /microform/v2/sessions
     response to obtain the
    Microform Integration
     JavaScript library URL and integrity value that you use to create your script tags.
    IMPORTANT
    You must do this for every transaction as these values can be unique for each transaction. Do not hard code these values, as this can result in client-side
    Microform Integration
     errors. If you do not do this for every transaction, you may load a JavaScript library that is incompatible with the version you requested in the
    /sessions
     request.
    Example
    /sessions
     Response:
    "data":{ "clientLibrary":"[EXTRACT clientLibrary VALUE from here]", "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]" }
    Example Script Tags
    <script src="[INSERT clientLibrary VALUE HERE]" integrity=”[INSERT clientLibraryIntegrity VALUE HERE]” crossorigin=”anonymous”> </script>
    Example Code for Loading the Script Dynamically Following JWT Extraction Tags
    // values read from capture context
const clientLibrary = " ";
const clientLibraryIntegrity = " ";
// create script tag
const script = document.createElement("script");
script.src = clientLibrary;
script.type = "text/javascript";
script.async = true;
script.integrity = clientLibraryIntegrity;
script.crossOrigin = "anonymous";
// run setup code after script has loaded successfully
script.onload = function () {
  // SETUP
};
// insert to document
document.head.appendChild(script);
  3. Create the HTML placeholder objects to attach to the microforms.
    Within your HTML checkout, replace the routing number, account number, and confirm account number tag with a simple container.
    Microform Integration
     uses the container to render an iframe for secured credit card input. This example contains simple
    div
     tags to define where to place the routing number, account number, and confirm account number fields within the payment acceptance page:
    <div id="number-container" class="form-control"></div>
    .
    Example: Accept
    eCheck
     Information Checkout Form
    <h1>Checkout Page</h1>
<div id="errors-output" role="alert"></div>
<form action="/token" id="my-sample-form" method="post">
    <div class="form-group">
        <label id="routingNumber-label">Routing Number</label>
        <div id="routingNumber-container" class="form-control"></div>
        <label for="accountNumber-label">Account Number</label>
        <div id="accountNumber-container" class="form-control"></div>
        <label for="accountNumberConfirm-label">Account Number Confirm</label>
        <div id="accountNumberConfirm-container" class="form-control"></div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="accountType">Account Type</label>
            <select id="accountType" name="accountType" class="form-control">
                <option value="C">Checking</option>
                <option value="S">Savings</option>
                <option value="X">Corporate checking</option>
            </select>
        </div>
    </div>

    <button type="button" id="pay-button" class="btn btn-primary">Pay</button>
    <input type="hidden" id="flexresponse" name="flexresponse">
</form>
  4. Invoke the Flex SDK by passing the capture context that was generated in the previous step to the microform object.
    const flex = new Flex(captureContext);
  5. Initiate the microform object with styling to match your web page.
    After you create a new Flex object, you can begin creating your Microform. You will pass your baseline styles and ensure that the button matches your merchant page:
    const microform = flex.microform("card", { styles: myStyles });
  6. Create and attach the microform fields to the HTML objects through the Microform Integration JavaScript library.
    const number = microform.createField('number', { placeholder: 'Enter card number' });
            const securityCode = microform.createField('securityCode', { placeholder: '•••' });
            number.load('#number-container');
            securityCode.load('#securityCode-container');
  7. Create a function for the customer to submit their payment information, and invoke the tokenization request to
    Microform Integration
     for the transient token.

Mobile Application

To initiate and embed
Microform Integration
 into a native payment acceptance mobile application, follow the steps for web page setup, and ensure that these additional requirements are met:
  • The card information acceptance fields of routing number, account number, and confirm account number must be hosted on a web page.
  • The
    eCheck
     information acceptance fields of routing number, account number, and confirmed account number must be hosted on a web page.
  • The native application must load the hosted
    eCheck
     entry form web page in a web view.

AFTER COMPLETING THE TASK

As an alternative, you can use the Mobile SDKs hosted on GitHub: