Accept Check Information

This section covers the implementation steps needed to complete the server-side and client-side setup for accepting check information with
Microform Integration
.s
Implementing
Microform Integration
 is a three-step process:
The figure below shows the flow for implementing
Microform Integration
:

Figure:

Microform Integration
 Implementation Workflow

Server-Side Setup

This section contains the information you need to set up your server. Initializing
Microform Integration
 within your webpage begins with a server‑to‑server call to the sessions API. This step authenticates your merchant credentials and establishes how the
Microform Integration
 frontend components will function. The sessions API request contains parameters that define how
Microform Integration
 performs.
The server-side component provides this information:
  • A transaction-specific public key is used by the customer's browser to protect the transaction.
  • An authenticated context description package that manages the payment experience on the client side. It includes available payment options such as card networks, payment interface styling, and payment methods.
The functions are compiled in a JSON Web Token (JWT) object referred to as the
capture context
. For information JSON Web Tokens, see JSON Web Tokens.
Accept Check Information

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. Add the
    Microform Integration
     JavaScript library to your page by loading it directly on the front end from
    Cybersource
    .
    Use the values from
    clientLibrary
     and
    clientLibraryIntegrity
     that are returned in the JWT from
    /microform/v2/sessions
     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.
    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>
    IMPORTANT
    Use the
    clientLibrary
     and
    clientLibraryIntegrity
     parameter values in the capture context response to obtain the
    Microform Integration
     JavaScript library URL and integrity value. This ensures that you are always using the most recent details. Do not hard-code the
    Microform Integration
     JavaScript library URL or integrity value.
  2. 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. The following 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 Check Information Checkout Form
    <h1>Checkout</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>
  3. 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);
  4. 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 });
  5. 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');
  6. 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 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 PAN and CVV must be hosted on a web page.
  • The check 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:
Accept Check Information

Transient Tokens for Accepting Check Information

The response to a successful customer interaction with
Microform Integration
 is a transient token. The transient token is a reference to the payment data that is collected on your behalf. Tokens allow secure card or check payments to occur without risk of exposure to sensitive payment information. The transient token is a short-term token that expires after 15 minutes. This reduces your PCI burden/responsibility and ensures that sensitive information is not exposed to your back-end systems.
Accept Check Information