Unable to figure out correct way to mixin or override payment js file for Magento_Braintree (Gene)

by Kyle Waid   Last Updated June 29, 2020 21:09 PM

I have the module Magento_Braintree, the gene version which comes with venmo, google pay, etc. My task is to remove the messaging in the initialize method to not show the error message "Browser is not supported". Venmo is not supported on desktop, but we also don't want the majority of our customers to see this message.

I am struggling to find a proper example of how to do and have tried 3 different ways. The file I want to override is vendor/gene/module-braintree/view/frontend/web/js/view/payment/method-renderer/venmo.js

  1. Copy the js file to my theme directory. in my theme app/design/frontend/Name/Name/childtheme I created the directories/files Magento_Braintree/view/frontend/web/js/view/payment/method-renderer/venmo.js

To test, I just changed the text. This does not work. The file is not recognized, nothing happens.

  1. Create an override using map requirejs var config = { "map": { "*": { "Magento_Braintree:/js/view/payment/method-renderer/venmo": "Company_Genebraintree:/js/view/payment/method-renderer/venmo", } } };

This also does not work. File is not recognized/no error, no change

  1. A mixin. This DOES work, however in the js file, I am unsure of the correct syntax to extend and only override the 1 function, an error is shown in javascript about Constr error and the page crashes, although I do see the new message.

There are lots of examples of using mixin/overrides, however it seems depending on what type of javascript/component/widget you are overriding the syntax is different. My struggles as a Magento developer are just finding the correct boilerplate syntax to use and not finding examples that work. When I do dev on Magento, I spend 3/4 time trying to find the correct procedure to do a task than I do actually writing the code.

The task at hand is very simple, but I do not know how to do it.

Related Questions

How we can use Js Mixins for order scripts.js

Updated August 12, 2019 18:09 PM