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 use these values for every transaction. These values can be unique for each transaction.
    IMPORTANT
    Do not hard code these values, because doing so can result in client-side
    Microform Integration
     errors. If you do not hard code these values for all transactions, you can 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.
    Microform Integration
     attaches the microform fields to containers within your HTML. Within your HTML checkout, replace the payment card and CVN 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 PAN and CVN fields within the payment acceptance page:
    <div id="number-container" class="form-control"></div>
    .
    Example: Accept Card 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 for="cardholderName">Name</label>
        <input id="cardholderName" class="form-control" name="cardholderName" placeholder="Name on the card">
        <label id="cardNumber-label">Card Number</label>
        <div id="number-container" class="form-control"></div>
        <label for="securityCode-container">Security Code</label>
        <div id="securityCode-container" class="form-control"></div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="expMonth">Expiry month</label>
            <select id="expMonth" class="form-control">
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <label for="expYear">Expiry year</label>
            <select id="expYear" class="form-control">
                <option>2021</option>
                <option>2022</option>
                <option>2023</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 set up, and ensure that these additional requirements are met:
  • The card information acceptance fields of PAN and CVV 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 card entry form web page in a web view.

AFTER COMPLETING THE TASK

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