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.

<!-- classes in square brackets will be allied based on field and form state -->

<div class="yc-card-form-container">

<div

class="yc-field-group--card-number yc-field-group yc-field-group--invalid"

>

<label>Card number</label>

<div class="yc-card-input-wrapper">

<!-- secure iframe inserted here, style the input at this level to set style the iframe contents -->

<input />

</div>

</div>

<div class="yc-expiry-cvv-holder">

<div class="yc-field-group--card-expiry yc-field-group">

<label>Expiry date</label>

<div class="yc-card-input-wrapper">

<!-- secure iframe inserted here, style the input at this level to set style the iframe contents -->

<input />

</div>

</div>

<div class="yc-field-group--card-cvv yc-field-group">

<label>CVV/CVC</label>

<div class="yc-card-input-wrapper">

<!-- secure iframe inserted here, style the input at this level to set style the iframe contents -->

<input />

</div>

</div>

</div>

</div>

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.

var inline = sdk.inline({ layout: 'plain|basic|field' });

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.