We 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.

Blending with existing frameworks

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.

Example: Bootstrap styled

Bootstrap is a popular framework for HTML, CSS and JS. This sample shows Hosted Fields integrated into a Bootstrap styled form.

Check out the 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.

Check out the code

Going further

Combining custom CSS, JS, and a bit of creativity, you can create SAQ A compliant card forms that go beyond rendering static inputs.

Example: animating events

You can use Hosted Fields events to detect card types and alter the UI as a customer is entering information.

Check out the 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.

Check out the code

Example: 3D transform

Accepting credit cards doesn't have to be boring! Leverage CSS transforms with Hosted Fields to make a unique form experience.

Check out the code

Still have questions?

If you can’t find an answer, contact us