This repository contains examples of stylish forms that use SmartFields. These examples illustrate how to handle errors in real-time and style focus states, error states, and placeholders.
Common code for handling errors and form submission lives here.
Example 1 is the simpliest example that shows a form that uses the card SmartField.
Example 2 shows a form that collects more data and sends it when it creates the token.
Example 3 shows a form that uses individual pan, expiration, and cvv SmartFields with a custom web font and custom placeholders.
The form also collects other data outside of the payment form.
Example 4 shows a form that displays the available installments for the example amount and uses the card SmartField. This example does not show the brand icon flag.
Example 5 shows a form that displays the available installments for the example amount and uses pan, expiration, and cvv SmartFields with floating labels and custom placeholders.
Example 6 shows a form that uses individual number, expiration, and cvv fields, styled with floating labels, and many other features thar show the power of Smart-Fields to be styled as you need in your site.
This example also uses floating-label.css and checkbox.css