Payment MFE configuration

I am still trying to configure Lilac with a test account from Cybersource in order to make sure that I can make it work with a payment processor that requires tokenization before trying to adapt it for a different payment processor (Paysafe) which is not a supported by the current Payment MFE.

Thus far, I have been able to make the Payment MFE work with a PayPal test account but I still can’t make it work with Cybersource. All I have is the Credit Card Information section loading and not allowing me to enter any information in the fields available. No errors in the logs for ecommerce or the LMS. No errors in the Javascript console. Nothing.

I tried GitHub - CyberSource/cybersource-flex-samples-node: Simple examples of how to use the Flex API and microform in order to make sure that I did not have any issue contacting the Flex Microform SDK / API. Turns out, it works well with the keys provided a part of the Github repositories and the keys I have created in Cybersource’s test environment.

Since I am now out of ideas, I am beginning to wonder if anyone has been able to use the Payment MFE with Cybersource outside of

I am also wondering if I might not be putting my keys at the right place… I knew where to place them for Paysafe with ecommerce but that was before the introduction of the Payment MFE…

Should I put them in /edx/etc/ecommerce.lms ?
Should I put them in /edx/app/ecommerce/ecommerce/ecommerce/settings ?
Should I put them in /edx/app/payment/frontend-app-payment/.env, .env.development or .env.test ?

Where should I see if there are any error messages from Cybersource ?

Thanks for any information or any hints you could provide.

Have a nice day.


A suggestion from Ben Holt from edX:

There are a number of steps that the MFE goes through before fully realizing the payment fields; if you run it from the development server (stop the frontend-app-payment Docker container and run npm start in the MFE repo workarea) you should see some logging from the dev server in terminal and much more logging in the JS console

(especially in Chrome with the React dev tools installed)

I would have preferred a solution that would allow me to do this from a native installation but I will give it a try.

1 Like

A little update.

I was able to install Devstack and I was able to see the Payment MFE working with Cybersource and with the credentials / keys provided in for the ecommerce application. I am able to input values in the Card Number and Security code fields. I am able to select values in the pull down menus for the Expiration Month and the Expiration Year. I can see and click the Order button. None of this was possible when using the Native or Tutor installations.

Lots of actions logged through @@redux-form and redux-logger.js in the Javascript Console in Chrome. All of this is clearly not visible when running it in the Native or Tutor installations.

I also stopped the container for frontend-app-payment in order to start the MFE from the repo workarea. It still works but it doesn’t give me much more information that would help me pinpoint what could be wrong when I try using it in the Native or Tutor installations.

My goal here was to understand how the Cybersource implementation was working so that I could proceed with maybe adapting it for our own payment processor (Paysafe). Not being able to use Cybersource, even with test credentials from Devstack or ours, does not give me a lot of confidence in my ability to proceed with adapting it for our own payment processor (Paysafe).

I am back at square one. So, can anyone confirm they were able to use the Payment MFE with Cybersource to process a credit card transaction wither in a production Cybersource environment or a test Cybersource environment?

Any help would be greatly appreciated. Thank you.

1 Like

One more update.

I was able to go into Devstack and replace the keys in by mine for both PayPal and Cybersource.

It worked… I have transactions in my Cybersource test console. Therefore, the problem definitely isn’t with my keys.

I am fairly convinced now that there might be a problem with the build, the installation and the configuration of the Payment MFE in both Native and Tutor.

1 Like

i am facing same problem @sambapete billing details are greyed out, can i know how did you fixed it?

here is link for my issues if any suggestions

@tabrezgoilkar I am still waiting for a solution for both the Native installation and the Tutor installation.

It works in Devstack, but Devstack is not recommended for a Production installation.

Nobody thus far has been able to confirm if it works for them in the Native installation or the Tutor installation. I am sorry, but I am as stuck as you are.

1 Like