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.
View the Bootstrap example code
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.
View the Material Design example code
Example: animating events
You can use Hosted Fields events to detect card types and alter the UI as a customer is entering information.
View the animating events example code
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.