React integration of sdk - Uncaught ReferenceError: forge is not defined

[TheoGautier]

Hi,

I have troubles importing the onlinepayments sdk in a react project, using webpack.

onlinepayments-sdk-client-js: 2.0.0

//Container.js
import * as onlinepaymentssdk from "onlinepayments-sdk-client-js";

Error is: Uncaught ReferenceError: forge is not defined

Note that I tried using different forms of import, or using require, but I end up with the same error, linked to the first use of forge in the onlinepaymentssdk.js file, line 2109. It seems like the minified and browserified forge source code at the top of the file is not read.

Could this kind of integration be documented? This blocks my integration of the sdk in a react project.

If needed, I can make a call with one of your developers to tackle this issue directly.

Thanks for your help,

Théo Gautier.

[worldline-direct-support-team]

Hi Théo, thanks for the information. We'll look into this and get back to you soon once we know more.

Kind regards, Worldline support team

[worldline-direct-support-team]

Hello Theo,

Thank you for reaching out. We’ve identified an issue which we will look into.

As a potential workaround, could you try to import our SDK like so: import * as onlinepaymentssdk from "onlinepayments-sdk-client-js/onlinepaymentsdk.js”;

Kind regards, Worldline Support

[TheoGautier]

Hi,

this workaround does not work, when installing with npm, files go to directory dist, so onlinepayments-sdk-client-js/onlinepaymentsdk.js does not exist, and even the right path, using import * as onlinepaymentssdk from "onlinepayments-sdk-client-js/dist/onlinepaymentssdk.js" unfortunately leads to the same issue.

Thanks for your quick reply. If needed, we could inspect it live with a developer, I'm available.

[TheoGautier]

Hi,

Is there any news on this subject? This blocks our integration of the SDK on our platform, which is mandatory for the 3DSV2 compliance, coming by the end of September. We want to finish the integration before the 5th of August, because of summer holidays.

Have a nice day.

[worldline-direct-support-team]

Hello Theo,

We are currently working to resolve the reported issue. A new release containing the fix will be made available as soon as possible.

Kind regards, Worldline Support

[worldline-direct-support-team]

Hello Theo,

We are working on a longtime solution. In the meantime we found a temporary workaround to circumvent these issues: Can you import a bundled version of node-forge before the application code is loaded?

https://www.npmjs.com/package/node-forge#jsdelivr-cdn

With this workaround, you can import with import * as onlinepaymentssdk from "onlinepayments-sdk-client-js"

Kind regards, Worldline Support

[TheoGautier]

Hi Worldline,

Thanks for the workaround, it did not work exactly as expected. I tried different things.

• Using import * as onlinepaymentssdk from "onlinepayments-sdk-client-js", I end up with a weird value for onlinepaymentssdk, some function c(e, c).
• Using import * as onlinepaymentssdk from "onlinepayments-sdk-client-js", I end up with a weird value for onlinepaymentssdk/dist/onlinepaymentssdk:

  function session(sessionDetails, paymentProduct)
  ​arguments: null
  ​caller: null
  ​length: 2
  ​name: "session"
  ​prototype: Object { … }
  ​<prototype>: function ()

• I decided to go with import "onlinepayments-sdk-client-js"; and window.onlinepaymentssdk, which is populated after the import of the library. It's not really React friendly, and I don't know if you'll maintain the code that assigns the library in the window object, but it works as a temporary workaround. But, could you look at why the import does not retrieve the sdk, but the session function instead? It is the last function defined in the package. I recognize in its properties the function c(e, c) as the session function previously mentioned.

Hope this will help you unravel this import issue.

[worldline-direct-support-team]

Hi Theo,

That the import of the SDK equals the session, is by design. For the SDK to work, it needs a valid session. From this instantiated SDK, we can then use other methods provided by the SDK.

An example for SDK instantiation can be found here: https://github.com/wl-online-payments-direct/sdk-client-js-example/blob/master/minimal-webpack/src/js/app.js An example for SDK usage can be found here: https://github.com/wl-online-payments-direct/sdk-client-js-example/blob/master/minimal-webpack/dist/js/create-payload.js

Kind regards, Worldline Support Team

[TheoGautier]

Hi Wordline,

Thanks for the example. That is right, all payment methods are used from the Session, but what about the MaskingUtil? It seems I cannot retrieve it from the Session. Though it seems I can retrieve a specific mask from a paymentProduct field displayHints.mask.

[worldline-direct-support-team]

Hello Theo,

You can apply masking to field values by using the paymentProductField's applyMask function.
An instance of MaskinUtil can be obtained with the following code: var maskingUtil = new onlinepaymentssdk.MaskingUtil();

Kind regards, Worldline Support