The Braintree V3 Drop-in UI allows more customization over how the Braintree payment method appears in the payment method step in Commerce versus the included V2 drop-in UI. See Braintree’s documentation for more details: https://developers.braintreepayments.com/guides/drop-in/overview/javascript/v3
To use the new V3 Drop-In API, replace your Commerce theme’s frontend/gateways/braintree/form.twig template.
<div class="c-braintree-gateway">
<span class="c-braintree-payment-errors"></span>
<!-- Must be empty to correctly load Braintree -->
<div id="c-braintree-payment-form-{{ method }}"></div>
</div>
<!-- Retreived nonce -->
<input id="braintree{{ method }}-nonce" type="hidden">
<script type="text/javascript">
var braintree{{ method }}Loaded = false,
teardownBraintree{{ method }} = false,
braintree{{ method }} = null,
braintree{{ method }}Form = document.querySelector("#c-choose-payment-form"),
braintree{{ method}}Nonce = document.querySelector("#braintree{{ method }}-nonce");
CommercePayments.onReady(function() {
// Automatically setup and teardown the integration when choosing the braintree gateway
var radios = document.querySelectorAll('input[name=choose_payment_method]');
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
CommercePayments.addEventListener(radio, 'change', function(e) {
if (e.target.checked) {
if (e.target.value == {{ method }}) {
// New drop in UI creation method
braintree.dropin.create({
authorization: "{{ token }}",
container: "#c-braintree-payment-form-{{ method }}"
}, function(err, instance) {
braintree{{ method }} = instance;
teardownBraintree{{ method }} = !err;
braintree{{ method }}Form.addEventListener('submit', function(e) {
e.preventDefault();
instance.requestPaymentMethod(function(err, payload) {
braintree{{ method }}Nonce.setAttribute("name", "payment_method_nonce");
braintree{{ method }}Nonce.value = payload.nonce;
braintree{{ method }}Form.submit();
});
});
});
}
else if (teardownBraintree{{ method }}) {
braintree{{ method }}.teardown(function() {
braintree{{ method }}Nonce.removeAttribute("name");
teardownBraintree{{ method }} = false;
});
}
}
});
}
// Load new drop in UI
CommercePayments.loadAsynchronously('https://js.braintreegateway.com/web/dropin/1.11.0/js/dropin.min.js', function() {
braintree{{ method }}Loaded = true;
});
});
</script>
This should work upgrading an existing website (tested using the default template), but be sure to test on your website first, especially if you’ve done any extensive theming to the payment method templates.
