Getting Creative with Hosted Fields: Introducing our Themed Examples

Last year, Braintree introduced Hosted Fields: a fully customizable, PCI compliant method of accepting credit cards online. While the technical details of Hosted Fields are deserving of their own blog post, what you need to know is that we use iframes to keep sensitive data in Braintree's hands and ease the burden of PCI compliance for you. This crafty solution comes with a caveat: styling your fields is different. Because our form fields are iframes cleverly disguised as inputs, any styling applied to the inside of fields must be done through Braintree's API. Fortunately, you can style Hosted Fields just like you would a traditional form!

To prove it, some folks from the developer experience team got together to create some examples of just how creative you can get with Hosted Fields. To kick things off, we took some cues from the popular Bootstrap and Material design frameworks. As we suspected, Hosted Fields easily blends in with these established styles.

As exciting as pre-existing frameworks are, our designers wanted to get a little more creative. This example updates the form UI based on the card type entered by the customer. To test this one out, try a couple of different cards such as Visa (4111111111111111) or American Express (378282246310005).

Our last example is a minimal take on a card form. This shows off that developers still have total control over the look and feel of their fields, even though they're secretly our iframes.

One thing all these examples have in common is that they use the latest version of our JavaScript SDK. When it comes to styling your form, here are the newest features to look out for:

  • Input formatting - By default, Hosted Fields applies formatting to your inputs. This means credit card numbers have gaps according to card type, expiration dates will automatically format with a slash, and all fields will only accept applicable input types.

  • New event API - The new event API allows you to update your UI based on the state of the form as well as customer input. Events range from those emitted by traditional inputs such as focus and blur to more advanced functionality such as the cardTypeChange and validityChange events that keep you in the know about the state of your fields.

  • Updating placeholders - Using a simple API call, you can update the placeholder value of your fields. This is great for updating the placeholder of your security code field based on card type, as seen in the animated card form example above.

To see all that the beta of our JS SDK has to offer, check out the Client SDK setup guide or the migration guide if you're looking to upgrade from v2. Happy styling!

Lila Conlee Lila is part of the Developer Experience team in Chicago. When not writing JavaScript, she likes cats and movie talking. More posts by this author

You Might Also Like