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

checkout_01

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.
Share this Post: Facebook Twitter Pinterest Google Plus StumbleUpon Reddit RSS Email

Related Posts

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>