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 Barclays. You should do this dynamically per environment by using the asset path returned in the JWT from

/microform/v2/sessions

. For example:

ctx": [
    {
      "data": {
        "clientLibrary": https://testflex.example.com/microform/bundle/v2/flex-microform.min.js,
      ...

Test
:

Production
:

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:

. 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.

var flex = new Flex(captureContext);

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.

var microform = flex.microform({ styles: myStyles });

Create and attach the microform fields to the HTML objects through the Microform Integration JavaScript library.

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/

Android sample: https://github.com/

Transient Token Time Limit

Transient Token Time Limit

The sensitive data associated with the transient token is available for use only for 15 minutes or until one successful authorization occurs. Before the transient token expires, its data is still usable in other non-authorization services. After 15 minutes, you must prompt the customer to restart the checkout flow.

See Example: Creating the Pay Button with Event Listener.

When the customer submits the form, Microform Integration securely collects and tokenizes the data in the loaded fields as well as the options supplied to the

createToken()

function. The month and year are included in the request. If tokenization succeeds, your callback receives the token as its second parameter. Send the token to your server, and use it in place of the PAN when you use supported payment services.

See Example: Customer-Submitted Form.

Setting Up the Client Side

Transient Token Response Format

The transient token is issued as a JSON Web Token (RFC 7519). A JWT is a string consisting of three parts that are separated by dots:

Header

Payload

Signature

JWT example:

xxxxx.yyyyy.zzzzz

The payload portion of the token is an encoded Base64url JSON string and contains various claims.

IMPORTANT

The internal data structure of the JWT can expand to contain additional data elements. Ensure that your integration and validation rules do not limit the data elements contained in responses.

See Example: Token Payload.

Setting Up the Client Side

Validating the Transient Token

After receiving the transient token, validate its integrity using the public key embedded within the capture context created at the beginning of this flow. This verifies that Barclays issued the token and that no data tampering occurred during transit. See Example: Capture Context Public Key.

Use the capture context public key to cryptographically validate the JWT provided from a successful

microform.createToken

call. You might have to convert the JSON Web Key (JWK) to privacy-enhanced mail (PEM) format for compatibility with some JWT validation software libraries.

The Barclays SDK has functions that verify the token response. You must verify the response to ensure that no tampering occurs as it passes through the cardholder device. Do so by using the public key generated at the start of the process.

See Example: Validating the Transient Token.

Setting Up the Client Side

Using the Transient Token

After you validate the transient token, you can use it in place of the PAN with payment services for 15 minutes. See Transient Token Time Limit.

When the consuming service receives a request containing a transient token, it retrieves the tokenized data and injects the values into your request before processing, and none of the sensitive data is stored on your systems. In some scenarios, the

jti

value contained in the JWT transient token response must be extracted and used instead of the entire JWT.

Connection Method	Field
Simple Order API	tokenSource_transientToken
SCMP API	transient_token
REST API with Transient Token JSON Web Token	"tokenInformation": { "transientTokenJwt": "eyJraWQiOiIwNzRsM3p5M2xCRWN5d1gxcnhXNFFoUmJFNXJLN1NmQiIsImFsZyI6IlJTMjU2In0.eyJkYXRhIjp7ImV4cGlyYXRpb25ZZWFyIjoiMjAyMSIsIm51bWJlciI6IjQxMTExMVhYWFhYWDExMTEiLCJleHBpcmF0aW9uTW9udGgiOiIwNSIsInR5cGUiOiIwMDEifSwiaXNzIjoiRmxleC8wOCIsImV4cCI6MTU4ODcwMjkxNSwidHlwZSI6Im1mLTAuMTEuMCIsImlhdCI6MTU4ODcwMjAxNSwianRpIjoiMUU0Q0NMSUw4NFFXM1RPSTFBM0pUU1RGMTZGQUNVNkUwNU9VRVNGWlRQNUhIVkJDWTQwUTVFQjFBRUMzNDZBMCJ9.FB3b2r8mjtvqo3_k05sRIPGmCZ_5dRSZp8AIJ4u7NKb8E0-6ZOHDwEpxtOMFzfozwXMTJ3C6yBK9vFIPTIG6kydcrWNheE2Pfort8KbxyUxG-PYONY-xFnRDF841EFhCMC4nRFvXEIvlcLnSK6opUUe7myKPjpZI1ijWpF0N-DzZiVT8JX-9ZIarJq2OI0S61Y3912xLJUKi5c2VpRPQOS54hRr5GHdGJ2fV8JZ1gTuup_qLyyK7uE1VxI0aucsyH7yeF5vTdjgSd76ZJ1OUFi-3Ij5kSLsiX4j-D0T8ENT1DbB_hPTaK9o6qqtGJs7QEeW8abtnKFsTwVGrT32G2w" }
REST API with JSON Web Token ID	"tokenInformation": { "jti": "1E3GQY1RNKBG6IBD2EP93C43PIZ2NQ6SQLUIM3S16BGLHTY4IIEK5EB1AE5D73A4", }

See Example: Authorization with a Transient Token Using the REST API.

Setting Up the Client Side