Have you configured Cybersource in Liliac?

I am using liliac and trying to setup Cybersource, and am getting the same issue as

and

which is that the Card Details section is greyed out. I explored that those are the dummy fields in the payment mfe that are meant to be replaced by cybersource javascript to allow cybersource to get the card details without us ever getting the burden of securly handling card details. But those fields never get replaced… also, it looks like the the cybersource configuration details for payment_processors in the readme of GitHub - overhangio/tutor-ecommerce: Ecommerce plugin for Tutor are redundant since this commit

Consolidate the Cybersource and CybersourceREST payment processors · edx/ecommerce@b69e7e3 · GitHub (as it looks like only some of them are necessary).

So I defined the config values as described fields lines 141-143

Is there something I might be missing here? But am still getting the card details section greyed out.
What I suspect is that the error is coming from is the lines 154-156

Who is supposed to set up those flex_shared_secret_key_id and other flex related variables… if I am supposed to set them up and not the Cybersource, where do I get those from Cybersource?

The specifc error that I am getting, as capture from the tutor logs is as follows:

core 0)
ecommerce_1         | 2021-11-23 17:50:25,456 ERROR 11 [ecommerce.extensions.basket.views] /openedx/ecommerce/./ecommerce/extensions/basket/views.py:637 - Error generating capture_context
ecommerce_1         | Traceback (most recent call last):
ecommerce_1         |   File "/openedx/ecommerce/./ecommerce/extensions/basket/views.py", line 635, in _add_capture_context
ecommerce_1         |     response['capture_context'] = payment_processor.get_capture_context(self.request.session)
ecommerce_1         |   File "/openedx/ecommerce/./ecommerce/extensions/payment/processors/cybersource.py", line 188, in get_capture_context
ecommerce_1         |     api_instance = KeyGenerationApi(self.cybersource_api_config)
ecommerce_1         |   File "/openedx/venv/lib/python3.8/site-packages/CyberSource/apis/key_generation_api.py", line 42, in __init__
ecommerce_1         |     self.api_client.set_configuration(merchant_config)
ecommerce_1         |   File "/openedx/venv/lib/python3.8/site-packages/CyberSource/api_client.py", line 150, in set_configuration
ecommerce_1         |     mconfig.validate_merchant_details(config, mconfig)
ecommerce_1         |   File "/openedx/venv/lib/python3.8/site-packages/authenticationsdk/core/MerchantConfiguration.py", line 220, in validate_merchant_details
ecommerce_1         |     authenticationsdk.util.ExceptionAuth.validate_merchant_details_log(logger,
ecommerce_1         |   File "/openedx/venv/lib/python3.8/site-packages/authenticationsdk/util/ExceptionAuth.py", line 19, in validate_merchant_details_log
ecommerce_1         |     sys.exit(1)Preformatted text

The payment processor variables I am setting are

access_key: HIDDEN 
cancel_checkout_path: /checkout/cancel-checkout/
merchant_id: HIDDEN
payment_page_url: https://testsecureacceptance.cybersource.com/pay
profile_id: HIDDEN
receipt_page_url: /checkout/receipt/
secret_key: HIDDEN

Thanks for the detailed report @sumanchapai. I did not reply earlier, but I did not remain idle. I tried to raise awareness about this issue both in the build/test/release and the core contributor working groups. This issue is now tracked here: In the payment MFE, the Cybersource payment processor does not work · Issue #121 · openedx/build-test-release-wg · GitHub

Here is what I have found so far regarding the issue that the card details fields are blurred.

First, there is no card details field in the payment mfe, they’re supposed to be replaced by the cybesource flex form until we setup the required fields, they’re going to be blurred.

What are the config parameters to set?

cybersource:
    flex_shared_secret_key: examplevalue1
    flex_shared_secret_key_id: examplevalue2
    merchant_id: examplevalue3
    soap_api_url: https://ics2wstest.ic3.com/commerce/1.x/transactionProcessor/CyberSourceTransaction_1.140.wsdl
    transaction_key: examplevalue4

Where to get flex_shared_secret_key and flex_shared_secret_key_id?

As mentioned in https://stackoverflow.com/questions/66435946/how-where-do-i-get-the-merchantkeyid-and-merchantsecretkey-from-cybersource-busi, ‘The MerchantKeyId is the “Key” and the MerchantSecretKey is the “Shared Secret Key”’.

Follow the link https://developer.cybersource.com/api/developer-guides/dita-gettingstarted/authentication/createSharedKey.html and based on https://github.com/edx/ecommerce/blob/master/ecommerce/extensions/payment/processors/cybersource.py#L165-L172 flex_shared_secret_key is merchant_secret_key and flex_shared_secret_key_id is merchant_keyid

From https://edx-ecommerce.readthedocs.io/en/latest/additional_features/payment_processors.html

This is the merchant ID assigned by CyberSource
merchant_id: ‘’,
Generate this at EBC: Account Management > Transaction Security Keys > SOAP Toolkit API
transaction_key: ‘’,
soap_api_url: https://ics2wstest.ic3.com/commerce/1.x/transactionProcessor/CyberSourceTransaction_1.166.wsdl,

That method to generate didn’t exactly work for me to generate soap_api_url. Here is what worked.

So what transaction_key means here is SOAP API key and can be generated by
going to Key Management under Payment Configuration and then selecting
generate key and then soap api toolkit.

At this point, I had hoped that the payment in cybersource would be working, but isn’t because of other reasons. I will try to keep this updated though.

1 Like

So, I was able to find the error and fix.

https://github.com/edx/ecommerce/pull/3586

In addition to the PR above, there are few things that have be kept in mind…

The cybersource config values have to be set as follows:

cybersource:
    flex_shared_secret_key: examplevalue1
    flex_shared_secret_key_id: examplevalue2
    merchant_id: examplevalue3
    soap_api_url: https://ics2wstest.ic3.com/commerce/1.x/transactionProcessor/CyberSourceTransaction_1.140.wsdl
    transaction_key: examplevalue4
    payment_mfe_host: https://apps.yourdomain.com

Please look at the reply above this one to know where to find the values of example1-4.
One thing to be careful for payment_mfe_host is that you must not have trailing slash, or the pathname.
So, if you payment page is accessed at htts://apps.domain.com/payment you need to say only https://apps.domain.com without path and without trailing slash.

It must also be noted that adding payment_mfe_host is a new suggestion I made in the PR above and how I was able to fix the issue of credit cards being blurred, but the openedx community might have better ways to do it and the PR might not be accepted and a different solution implemented. Whatever is the case, I hope that the documentation will be updated accordingly.

One more thing that we need to do to enable mfe payments is go to your equivalent of http://local.overhang.io:8000/admin/commerce/commerceconfiguration page and tick the “Enabled” & “Checkout on ecommerce service” checkbox. This info is provided here (Fixing the cybersource issue in the Lilac release of Ecommerce - #8 by pshiu - Development - Open edX discussions)

Please let me know if you have any question.