1

What is the correct way to customize Braintree payment options - add image for payments card ? How to override module-braintree HTML within my custom theme?

I tried to copy form.html from

vendor/magento/module-braintree/view/frontend/web/template/payment/form.html

and customize it and paste to:

app/design/frontend/MJ/theme/Magento_Braintree/web/template/

Also tried here:

app/design/frontend/MJ/theme/Magento_Braintree/templates/html/

but the native one shows instead (I used different classes names to disgusting files). So I assume I have the wrong structure.

My goal was to add payment method images like Visa and PayPal to appear under Credit Card options. I managed to do so by editing this file:

vendor/magento/module-braintree/view/frontend/web/template/payment/form.html

Adding this code:

    <span class="field type">
        <span class="control">
            <ul class="credit-card-types amir-credit-card-types">
                <!-- ko foreach: {data: getCcAvailableTypes(), as: 'item'} -->
                <li class="item  item._active _active"  >
                    <!--ko if: $parent.getIcons(item) -->
                    <img class="" data-bind="attr: {
                            'src': $parent.getIcons(item).url,
                            'width': $parent.getIcons(item).width,
                            'height': $parent.getIcons(item).height
                        }">
                    <!--/ko-->
                </li>
                <!--/ko-->
            </ul>
        </span>
    </span>

And my objective was achieved:

enter image description here

Now my question is, how to override module-braintree within my custom theme?

I was not sure how to structure folders or where to place form.htmlThis is what I tried:

enter image description here

1 Answer 1

2

The correct path is:

app/design/frontend/MJ/theme/Magento_Braintree/web/template/form.html

Delete all the other files and make sure you’ve deployed static content. Depending on the version of Magento 2 and your deployment mode, that might be what’s causing the issue.

Go to pub/static/{your file path} and check if the file exists. It will only work when the file exists at the above mentioned path.

Update

Copy

vendor/magento/module-braintree/view/frontend/web/template/payment/form.html

To

app/design/frontend/MJ/theme/Magento_Braintree/web/template/payment/form.html
3
  • Thank you for your answer. Your answer inspired me dig further in pub/static/{theme} (as obvious as that step is, it never occurred to me) and by examining how Luma and Blank arranged their structure for the form of Braintree Module. It seems I was supposed to keep the original module structure and use it in my custom theme having form.html place in a dir called payment. The original form.html in module-braintree has the following path: public_html/vendor/magento/module-braintree/view/frontend/web/template/payment/form.html Commented Mar 25, 2018 at 19:47
  • Keyword in /web/template/payment/form.html Full path should look like this: /app/design/frontend/MJ/theme/Magento_Braintree/web/template/payment/form.html Commented Mar 25, 2018 at 19:47
  • Since you already posted your answer, you could kindly edit it so I can select it as the answer of this question. Commented Mar 25, 2018 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.