Faster Hosted Fields

There’s a new way to integrate Hosted Fields to speed up the performance of your checkout.

What is Hosted Fields?

Hosted Fields, included in the Braintree JavaScript SDK, is a product made for merchants who want complete design control of their checkout form. It allows merchants to style the inputs to match the merchant’s site, providing a seamless experience with the rest of the checkout page. It also eases the burden of PCI compliance by capturing all of a customer’s credit card information inside of iframes on a Braintree-owned domain.

Problem: Waiting to render the card form

The most common way to integrate with Hosted Fields is to include script tags for both the Braintree client and Hosted Fields. To set up the client, an authorization is passed into a braintree.client.create method. The resulting client instance is then passed into the braintree.hostedFields.create method:

When a client instance is created, the script requests a merchant configuration object from the Braintree API. Typically, this object is used to properly configure the component’s subsequent API interactions. Because a successful client instance needs to be created before the Hosted Fields instance, the rendering process for the Hosted Fields inputs cannot start until after the client instance is fully configured and ready to be used.

On a standard desktop browser, with a reasonable internet connection, this process takes very little time. However, on a mobile device with potentially limited RAM and a poor data connection, this process could result in a substantial delay — to the point where the customer may abandon the checkout process entirely.

Solution: Don’t wait to render the card form

We came to a realization that could alleviate this particular issue: although the Hosted Fields component requires a client instance to interact with the Braintree API, the client isn’t necessary until all the credit card details are entered and ready to be sent to the API for tokenization.

The process of setting up the client can run in the background and allow the rest of the credit card form to initialize without it. Now the customer can enter their credit card details while the underlying client is still being configured.

You can try this out in Hosted Fields with the latest version (3.55.0 at the time of this writing) of the JavaScript SDK by skipping the client setup entirely, and passing the authorization parameter directly to the braintree.hostedFields.create method:

Now Hosted Fields can create the inputs immediately. In the background, the script for the client will be loaded onto the page and a client instance will be created with the authorization that was passed to the Hosted Fields component. When your customer finishes entering their card details and submits them, the Hosted Fields component will use a Promise to wait until the client is finished setting up. Once the client is ready, the card details are sent to the Braintree API. In most cases, the client will already be available by this time, and the request will be made immediately. If the client is not yet available, the customer will experience a slight delay after submitting their card details as the client concludes the set-up process. Previously, the customer would experience a much longer delay before the inputs would even load.

We tested this on a slow 3g connection using Android Chrome. The process for setting up the client and then Hosted Fields took about 12 seconds. On that same connection, it took only about 0.4 seconds to set up Hosted Fields by deferring the creation of the client. That’s about 30 times faster!

Future improvements

We’re looking ahead to the next major version, where we’ll be able to implement these improvements across all of the components. Doing that will not only speed up performance for each component, but it will also allow us to incorporate these performance improvements into the Drop-in UI, which is built upon the Braintree JavaScript SDK.