cancel
Showing results for 
Search instead for 
Did you mean: 

Flex Microform v2 - Capture Context and JS Libraries

Evening all,

The scenario is that we are migration from using the 0.11 Microform to the 2.0 Microform.

Build environment is PHP backend, JS front end.   The 0.11 solution is working successfully.

The latest PHP Rest Client PHP libraries have been installed and code has been tweaked to cater for changes in payload requirements. Rather than a direct CURL call to the endpoints as described HERE we are using the provided Classes from the Github repository recently updated HERE.  

There are two different Classes that are presented in these libraries:

1. Cybersource\Api\MicroformIntegrationApi  with the method generateCaptureContext

2. Cybersource\Api\FlexAPIApi with the method generateFlexAPIcaptureContext 

Both do the job and produce a Capture Context.  We are using #1.  It produces a Capture Context jwt string successfully.

In our dev/test environment, we have been trying to use the provided JS library 

https://testflex.cybersource.com/microform/bundle/v2/flex-microform.min.js
as per the instructions at THIS PAGE .  

However... when calling the     var flex=new Flex(captureContext);    it fails with an INVALID CAPTURE CONTEXT message.
 
We've tried all various combinations of variable elements and different API calls and classes, but to no avail.
 
Ironically -- keeping the v2 token generation on the PHP side but passing it through the new Flex instantiation on the v0.11 javascript library 
mr_al
Member
1 ACCEPTED SOLUTION

Accepted Solutions

Evening all. Thanks to the awsm gent Martin @ Visa, got some pointers that I'd been missing. Here's a summary for those of you playing along at home:

1. Calling Cybersource\Api\MicroformIntegrationApi  with the method generateCaptureContext works, and results in an Object that for this purpose I'll call $keyResponse.

2. Field [0] of $keyResponse is the full blown JWT. 

3. Decoding this key, using the following snippet:

   $decodedContext=json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $keyResponse[0])[1]))));
   ...gives you a new object.
 
4. There are three bits of data that you need:
    a) $keyResponse[0] is the full capture context -- this is what is passed to the JS call later [ see #6 below ]

    b) $decodedContext->ctx[0]->data->clientLibrary  -- this is the full URL and path for the JS library that is used to validate the capture context and encrypt the token payload.

   c)   $decodedContext->ctx[0]->data->clientLibraryIntegrity -- this is the sha-256 integrity check string for the clientLibrary
 
5) Passing control of this over to the client side in JS, you then need to load the script of JS library returned in 4b) 

6) The captureContext is used in instantiating a Flex object that is described by this code library: 
     i.e.  new flexbit = new Flex(captureContext);

...and away you go with the rest of the implementation.    
 




View solution in original post

mr_al
Member
1 REPLY 1

Evening all. Thanks to the awsm gent Martin @ Visa, got some pointers that I'd been missing. Here's a summary for those of you playing along at home:

1. Calling Cybersource\Api\MicroformIntegrationApi  with the method generateCaptureContext works, and results in an Object that for this purpose I'll call $keyResponse.

2. Field [0] of $keyResponse is the full blown JWT. 

3. Decoding this key, using the following snippet:

   $decodedContext=json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $keyResponse[0])[1]))));
   ...gives you a new object.
 
4. There are three bits of data that you need:
    a) $keyResponse[0] is the full capture context -- this is what is passed to the JS call later [ see #6 below ]

    b) $decodedContext->ctx[0]->data->clientLibrary  -- this is the full URL and path for the JS library that is used to validate the capture context and encrypt the token payload.

   c)   $decodedContext->ctx[0]->data->clientLibraryIntegrity -- this is the sha-256 integrity check string for the clientLibrary
 
5) Passing control of this over to the client side in JS, you then need to load the script of JS library returned in 4b) 

6) The captureContext is used in instantiating a Flex object that is described by this code library: 
     i.e.  new flexbit = new Flex(captureContext);

...and away you go with the rest of the implementation.    
 




mr_al
Member