Inline customization
Styling
Inline creates a payment form for you on your page in one of our standard layouts. You are able to configure the look and feel of this form using css.
Field State Styling
We add classes that represent the form state to .yc-field-group
and this allows you to have styles
based on the state of the various fields. The following classes are available:
State | Class | Description |
---|---|---|
Empty | .yc-field-group--placeholder | The field contained in the field group is empty. |
Invalid | .yc-field-group--invalid | The field contained in the field group is invalid. |
Focused | .yc-field-group--focused | The field contained in the field group is focused. |
CSS Reference
When you invoke the mount function we drop a payment form onto your page that has the following component layout and styling.
Layouts
Inline allows you to choose from a number of basic layouts. The layouts allow you to start with some of the basic building blocks depending on the nature of the form you creating and can be set when the inline object is created.
Each layout is designed to be a simple base case to help you build a form that meets your needs.
Layout | Description |
---|---|
Plain | Fields are place on the page with the css classes but no attached styles, this allows you to drive all customization. |
Basic | A basic structure is created where the fields are organized in two rows with the expiry date and cvv sharing a row. |
Field | A single field is created on the page that is able to do the entire card input process for you. |