How do i customize payment page?

Hello there. I wanted to add the custom payment processor in my openedx tutor app. I was unable to do so if anybody know how to add custom payment processor help me. Also, i wanted to customize the payment page, how can i do it using tutor-ecommerce. Your helps are highly appreciated. Thank You. i am using tutor version 17.0.0.


this is the payment page i want to customize it.

did you mounted tutor-ecommerce , if not , mount it and customize it

If you’ve package for custom payment processor, then install it and add it its config settings through tutor-ecommerce plugin. Other option is to clone openedx/ecommerce repo and add your payment processor into it.

For customizing payment page, you have to make changes in GitHub - openedx/frontend-app-payment in this repo and have to use that repo. If you only need to change the style, then openedx/brand-openedx will help you out.

yes i mounted the tutor-eCommerce also added my config file for my custom payment processor in plugin.py module in payment processor field. Then i build the eCommerce running tutor local build eCommerce. But after that i didn’t any idea on checking the custom payment processor is working or not. So i wanted to modify the payment page but i have no idea on customizing it. How can i do it?. Did i miss something to add something in tutor-eCommerce plugin as per my explanation?

will you please explain me how to customize and use frontend-app-payment repo for tutor? i only saw the documentation to run it in devstack by cloning but i didnot find for tutor. How can i do it please me more specific. Your helps are highly appreciated.

There are two customizations you must need. First, you must have backend code of payment processor and its urls (which are required). Second, In payment MFE code, you have to add code for your payment processor button like other exists. Link to Frontend-app-payment. You can take idea from paypal.

Then for tutor:

  1. Enable ecommerce plugin
  2. Set your payment processor config using tutor config save --set "ECOMMERCE_PAYMENT_PROCESSORS=....
  3. Then add below settings through tutor
ECOMMERCE_ENABLED_PAYMENT_PROCESSORS:
- cybersource
- paypal
- mycustom
ECOMMERCE_ENABLE_IDENTITY_VERIFICATION: true
ECOMMERCE_EXTRA_PAYMENT_PROCESSOR_CLASSES:
- ecommerce.extensions.payment.processors.mycustom.MyCustomPayPaymentProcessor
ECOMMERCE_EXTRA_PAYMENT_PROCESSOR_URLS:
  mycustom: ecommerce.extensions.payment.processors.mycustom.urls
ECOMMERCE_EXTRA_PIP_REQUIREMENTS:
- mycustom-payment-package
  1. Add customPayment in payment_processors in Site Configuration of ecommerce

  2. Tick the Enable Microfrontend for Basket Page and add Payment Microfrontend URL in ecommerce django-admin dashboard.

  3. Enable payment_processor_active_custompayment switch in ecommerce django

  4. Testing with another https url
    Make sure to add url in ecommerce > development.py in ALLOWED_HOSTS

Some settings has to be done through Payment Provider Website like adding callback url.

@hinakhadim should i make the plugin for the custom payment processor and Then add the plugin to tutor- ecommerce? if yes then how can i build the plugin for the custom payment processor?

You need to build separate package for custom payment processor OR you can directly add custom payment processor code to ecommerce repository.

how can i build a separate package for custom payment processor and then how can i add it to tutor eCommerce?