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.