On This Page
REST API

Setting Up the Client Side

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 from
    Cybersource
    . See Version Numbering. You should do this dynamically per environment by using the asset path returned in the JWT from
    /microform/v2/sessions
    . For example:

    ADDITIONAL INFORMATION

    ctx": [
    {
      "data": {
        "clientLibrary": https://testflex.
    cybersource
    .com/microform/bundle/v2/flex-microform.min.js,
      ...
    • Test
      :
      <script src="https://testflex.
      cybersource
      .com/microform/bundle/v2/flex-microform.min.js"></script>
    • Production
      :
      <script src="https://flex.
      cybersource
      .com/microform/bundle/v2/flex-microform.min.js"></script>
  2. Create the HTML placeholder objects to attach to the microforms.

    ADDITIONAL INFORMATION

    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>
    . See Example: Checkout Payment Form.
  3. Invoke the Flex SDK by passing the capture context that was generated in the previous step to the microform object.

    ADDITIONAL INFORMATION

    var flex = new Flex(captureContext);
  4. Initiate the microform object with styling to match your web page.

    ADDITIONAL INFORMATION

    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.
    var microform = flex.microform({ styles: myStyles });
  5. Create and attach the microform fields to the HTML objects through the Microform Integration JavaScript library.

    ADDITIONAL INFORMATION

    var number = microform.createField('number', { placeholder: 'Enter card number' });
            var 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 acceptance fields of PAN and CVV 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: