You can customize the payment form's styling in two ways:
Styling the checkout form
Most of the elements on the Checkout form are represented using basic HTML and CSS. To modify their appearance, overwrite the corresponding styles in CSS.
For your convenience, we use the BEM methodology for naming the HTML and CSS structures. All checkout elements are prepended with "chckt-", for example: .chckt-pm__header
Styling the card fields
All card payment method input fields on the Checkout form are represented as iframe elements, which securely capture payment data from your shoppers.
To change their appearance, pass a styling object to the
chckt.checkout call when initializing the payment form:
In this case, the
sfStyles value can be as follows:
Accepted base values and the CSS selectors they translate to: