Payment Services styles

Customize the Payment Services drop-in using CSS classes and design tokens. This page covers the Payment Services-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 1.0.2

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Payment Services drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.credit-card-error {
2
  color: var(--color-alert-800);
3
  border: var(--shape-border-width-1) solid var(--color-alert-800);
4
  padding: var(--spacing-small);
5
  color: var(--color-alert-800);
6
  border: var(--shape-border-width-1) solid var(--color-alert-800);
7
  padding: var(--spacing-medium);
8
}

Container classes

The Payment Services drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* CheckoutPaymentMethods */
2
.payment-services-checkout-payment-methods {}
3

4
/* CreditCardForm */
5
.credit-card-error {}
6
.credit-card-error__icon {}
7

8
/* CreditCardForm */
9
.credit-card-field {}
10
.credit-card-field__container {}
11
.credit-card-field__container--error {}
12
.credit-card-field__error {}
13
.credit-card-field__label {}
14

15
/* CreditCardForm */
16
.hidden {}
17
.payment-services-credit-card-form {}
18
.payment-services-credit-card-form__card-number {}
19
.payment-services-credit-card-form__eligible-cards {}
20
.payment-services-credit-card-form__eligible-cards-icon {}
21
.payment-services-credit-card-form__eligible-cards-selected {}
22
.payment-services-credit-card-form__eligible-cards-unselected {}
23
.payment-services-credit-card-form__loading {}