UI Styling

You can store hard-coded, tenant-specific CSS that will be injected in our UI for both embedded and hosted views. You can edit this CSS directly from your dashboard.

BEM-Style Component Classes

.navbarHosted Only

The main header that includes the logo and the cancel button.

.card__titleHosted Only

The title above the cards

.card--embeddedEmbedded Only

The parent selector for the main view when using the UI Embedding. This selector lets you change the color of the child elements differently whether you are using our hoted or embedded approach.

.button--primaryHosted & Embedded

The main action button present on virtually all the screens (don't forget :disabled and :hover)

.button--cancelHosted & Embedded

The cancel button present in the navbar that lets users return to the checkout page.

.form__inputHosted & Embedded

single line text input (don't forget :focus)

.form__textareaHosted & Embedded

.form__labelHosted & Embedded

.form__hintHosted & Embedded

.form__errorHosted & Embedded

.form__loadingHosted & Embedded

.form__textHosted & Embedded

.payment-listHosted & Embedded

the wrapper on lists, typically used for tenure selection

.payment-list__itemHosted & Embedded

the single item on the list

.payment-list__item--activeHosted & Embedded

the selected single item on the list