Flex Microform v2 - Capture Context and JS Libraries

mr_al — Sat, 14 Dec 2024 12:02:23 GMT

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 [

https://testflex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js ] somehow works.

So - unsure as to what the 'new' Javascript microform v2 is failing on the new capture context generation... but the old one isn't.

Any thoughts or experience to contribute to this one will be greatly appreciated!

thanks and cheers,

Re: Flex Microform v2 - Capture Context and JS Libraries

mr_al — Mon, 16 Dec 2024 11:47:37 GMT

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.

topic Re: Flex Microform v2 - Capture Context and JS Libraries in cybersource APIs

Flex Microform v2 - Capture Context and JS Libraries

Re: Flex Microform v2 - Capture Context and JS Libraries