Having troubles while doing Payment Integration

[dangtrinhtran]

Hello,

Preconditions (*)

1. Magento 2.4.5-p1
2. hyva-themes/magento2-default-theme -> 1.2
3. hyva-themes/magento2-react-checkout -> 1.1.2 (installed via Composer)
4. hyva-themes/magento2-checkout-example -> the latest version
5. node v16.15.1 and npm v8.11.0
6. hyva-themes/magento2-hyva-checkout-braintree -> latest (main branch)

Steps to reproduce (*)

1. Install hyva-themes/magento2-react-checkout via Composer
2. Clone magento2-checkout-example to app/code/Hyva/CheckoutExample
3. cd app/code/Hyva/CheckoutExample/reactapp
4. npm install braintree-web
5. Add below code in app/code/Hyva/CheckoutExample/reactapp/package.json

"config": {
    "paymentMethodsRepo": {
      "braintree": "[email protected]:hyva-themes/magento2-hyva-checkout-braintree.git"
    }
}

6. npm install
7. npm run build

Actual result (*)

npm run build

> build
> react-app-rewired build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '../../../../../components/common/Form/RadioInput' in '/app/code/Hyva/CheckoutExample/reactapp/src/paymentMethods/braintree/src/components/BraintreeApplePay'

Following this guide https://github.com/hyva-themes/magento2-checkout-example#payment-integrations, I have changed ../../../../.. to @hyva/react-checkout in app/code/Hyva/CheckoutExample/reactapp/src/paymentMethods/braintree folder, and then it worked.

hyva-themes/magento2-hyva-checkout-braintree/blob/main/src/components/BraintreeApplePay/ApplePay.jsx

However, changing the code in paymentMethods/braintree is not a good solution because it will be overridden when I run npm install.

Do we have any solution to solve that?

Thank you.

[rajeev-k-tomy]

@dangtrinhtran Thank you for asking this question. I am answering your questions below:

However, changing the code in paymentMethods/braintree is not a good solution because it will be overridden when I run npm install.

You are wrong here. Once you have paymentMethods/braintree present in your reactapp, any further npm install do not overwrite your modifications. This is how you are supposed to modify the braintree payment method as well. It is totally fine and intended to modify in this way.

If you have time, can you please create a PR to braintree repository with the changes you mentioned above. This will help others to have a smooth payment integration in the future.

Thank you.