Braintree created these examples to show a few of the many possibilities of styling Hosted Fields. We recommend you use your own CSS and JS on your integration for complete control.
Hosted Fields containers can be styled using regular CSS. That means you can add grid classes, helper classes, and additional styling necessary to get your fields to blend with their surroundings.
Bootstrap is a popular framework for HTML, CSS and JS. This sample shows Hosted Fields integrated into a Bootstrap styled form.
Google's Material Design has become very popular as a visual framework for building UI components. This example shows Hosted Fields as Material Design inputs.
Combining custom CSS, JS, and a bit of creativity, you can create SAQ A compliant card forms that go beyond rendering static inputs.
You can use Hosted Fields events to detect card types and alter the UI as a customer is entering information.
Hosted Fields inputs cannot support custom webfonts (this is due to specific SAQ A regulations regarding server assets). However, you can still specify potential system fonts that your customer might have, and provide fallbacks.
Accepting credit cards doesn't have to be boring! Leverage CSS transforms with Hosted Fields to make a unique form experience.