Modify Braintree Core Files

Question

I'm trying to make some minor tweaks to two files within the PayPal_Braintree module. I've added them to my custom theme, but they do not seem to take. I think my file path is correct ... but maybe not?

/app/design/frontend/VENDOR/default/PayPal_BraintreeCore/web/js/view/payment/adapter.js

The code that I want to modify:

    /**
     * Setup hosted fields instance
     */
    setupHostedFields: function () {
        var self = this;

        if (this.hostedFieldsInstance) {
            this.hostedFieldsInstance.teardown(function () {
                this.hostedFieldsInstance = null;
                this.setupHostedFields();
            }.bind(this));
            return;
        }

        hostedFields.create({
            client: this.clientInstance,
            fields: this.config.hostedFields,
            styles: {
                "input": {
                    "font-family": "Gotham",
                    "font-size": "15px",
                    "color": "#888888"
                },
                ":focus": {
                    "color": "#151515"
                },
                ".valid": {
                    "color": "green"
                },
                ".invalid": {
                    "color": "red"
                }
            }
        }, function (createErr, hostedFieldsInstance) {
            if (createErr) {
                self.showError($t("Braintree hosted fields could not be initialized. Please contact the store owner."));
                console.error('Braintree hosted fields error', createErr);
                return;
            }

            this.config.onInstanceReady(hostedFieldsInstance);
            this.hostedFieldsInstance = hostedFieldsInstance;
        }.bind(this));
    },

/app/design/frontend/VENDOR/default/PayPal_BraintreeCore/web/template/payment/form.html

In this file, I'm just updating a couple of the labels.

<div class="field number required">
     <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
         <span><!-- ko i18n: 'Card Number'--><!-- /ko --></span>
     </label>






<div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
    <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
         <span><!-- ko i18n: 'CVV/Security Code'--><!-- /ko --></span>
    </label>

Answer 1

In order to modify adapter.js, I had to create a custom module and include the two files below:

/src/app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = 
{
map: 
{
    '*': 
    {
        'PayPal_Braintree/js/view/payment/adapter':'Vendor_Module/js/view/payment/adapter'
    }
}
};

/src/app/code/Vendor/Module/view/frontend/web/js/view/payment/adapter.js

Modified section of code:

/**
 * Setup hosted fields instance
 */
setupHostedFields: function () {
    var self = this;

    if (this.hostedFieldsInstance) {
        this.hostedFieldsInstance.teardown(function () {
            this.hostedFieldsInstance = null;
            this.setupHostedFields();
        }.bind(this));
        return;
    }

    hostedFields.create({
        client: this.clientInstance,
        fields: this.config.hostedFields,
        styles: {
            "input": {
                "font-family": "Gotham",
                "font-size": "15px",
                "color": "#888888"
            },
            ":focus": {
                "color": "#151515"
            },
            ".valid": {
                "color": "green"
            },
            ".invalid": {
                "color": "red"
            }
        }
    }, function (createErr, hostedFieldsInstance) {
        if (createErr) {
            self.showError($t("Braintree hosted fields could not be initialized. Please contact the store owner."));
            console.error('Braintree hosted fields error', createErr);
            return;
        }

        this.config.onInstanceReady(hostedFieldsInstance);
        this.hostedFieldsInstance = hostedFieldsInstance;
    }.bind(this));
},

To change the labels in my theme's en_US.csv file, I had to add the desired copy.

/src/app/design/frontend/Vendor/theme/i18n/en_US.csv

"Card Verification Number","CVV/Security Code"
"Credit Card Number","Card Number"