ExtJS 5 checkout form using Braintree

Why Braintree Payments?

• Great support – My questions sent to support@braintreepayments.com were responded in an hour or two
• Look&Feel of Drop-In UI – The ZERO SDK from Braintree is state-of-the-art of embeddable credit card forms
• Supports merchant accounts in Slovakia – Since my business is based in Slovakia, this was a key feature

Exmerg checkout form

• ExtJS 5 – Exmerg is SPA created using ExtJS 5 framework, therefore everything you see on the picture (except red-marked credit card form) was designed using this framework.
• Braintree Drop-in UI iframe – Red-marked area is completely generated by braintree.js

ExtJS 5 checkout form using Braintree Drop-In Payment UI

In order to have the form successfully submitted to Braintree, you need to:

• Use standardSubmit: true so the form will not use the default AJAX submit
• Create custom submit button inside form – ExtJS buttons will not work since they are rendered as a tags instead of input type='submit' tags required by braintree.js
• Use autoEl: 'form', otherwise Braintree.js will throw Unable to find a valid FORM
• Define a container as one of the form’s items (it will wrap the generated Drop-In UI iframe)

{
    xtype : 'form',
    name: 'checkout',
    border : false,
    method : 'POST',
    standardSubmit : true,
    autoEl: 'form',
    items: [
    ...
    {
        xtype: 'container',
        id: 'braintreeContainer'
    }
    ...
    {
        xtype: 'component',
        html: ""
    }
    ]
}

Initialize the Drop-In UI

• Obtain client token from your backend (you also need to be integrated with Braintree on the backend)
• Setup braintree using the id of previously defined container
• Handle paymentMethodNonceReceived callback to submit the payment method nonce to your backend. This method will be called when customer successfully fills out and submits the form.

// obtain client token from backend
var clientToken = ...

// use client token to initialize Drop-In UI:
braintree.setup(clientToken, "dropin", {
    container: "braintreeContainer",
    paymentMethodNonceReceived: function (event, nonce) {

        Ext.Ajax.request({
            url : 'path/to/your/payment/endpoint',
            method: 'GET',
            params : {
                paymentMethodNonce: nonce
            },
            success : function(response) {
                // proceed to Thank You page
            },
            failure : function(response) {
                // handle error
            }
        });
    }
});

Finally, add Braintree badge to increase customer’s confidence in filling out the form.