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 (
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.
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
blurto more advanced functionality such as the
validityChangeevents 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.