Hosted Fields
Examples
We created these examples to show a few of the many possibilities of styling Hosted Fields. We recommend using your own CSS and JS to style your integration and blend the fields into your UI.
Example: Bootstrap styled
Bootstrap is a popular framework for HTML, CSS and JS. This sample shows Hosted Fields integrated into a Bootstrap styled form.
Example: Material Design styled
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.
Example: animating events
You can use Hosted Fields events to detect card types and alter the UI as a customer is entering information.
Example: minimal
Hosted Fields inputs can't 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.
Example: 3D transform
Accepting credit cards doesn't have to be boring! Leverage CSS transforms with Hosted Fields to make a unique form experience.
a href="https://codepen.io/braintree/pen/d9027135c62f52adc371cabbf2380f12">Check out the code