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.

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
:

Production
:

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:

. See Example: Checkout Payment Form.

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);

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 });

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');

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:

iOs sample: https://github.com/Cybersource/flex-v2-ios-sample

Android sample: https://github.com/CyberSource/flex-v2-android-sample