You can customize the payment form's styling in two ways:
Most of the elements on the Checkout form are represented using basic HTML and CSS. To modify their appearance, overwrite the corresponding styles in a 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:
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.checkoutcall when initializing the payment form:
In this case, the
sfStylesvalue can be as follows:
Accepted base values and the CSS selectors they translate to: