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) {

            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.

Leave a Comment