Web Customization

Customization

There are different customizations you can apply to make the Plexy checkout match your app's look and feel. The most common are: theming via CSS variables, configuring per-payment-method appearance, modifying the default flow with callbacks, layering additional CSS, and setting the shopper locale.

Theme

Override CSS variables on the .plexy-checkout root class to match your brand:

Scope the override to a parent selector if you render multiple checkouts with different themes on the same page.

Per-payment-method appearance

The same paymentMethodsConfiguration object that configures behavior in Configuring Drop-in also accepts appearance keys. Adjust labels and visual styling per payment method:

Keys are payment-method identifiers; values are the per-method config supported by each component.

Custom checkout callbacks

Use beforeSubmit and onSubmit on CoreConfiguration to modify the default flow. beforeSubmit runs before the SDK submits a payment — use it to inspect or augment the request. onSubmit (Advanced flow) hands the request to your own backend.

Additional CSS

Layer your own stylesheet on top of Plexy's defaults by importing it after the SDK CSS:

Import order matters — your stylesheet must come after Plexy's so its rules win specificity ties.

Localization

Pass locale on CoreConfiguration:

Shopper locale

locale is the checkout interface language and regional formatting, for example ru-KZ, en-US, or kk-KZ. Do not use it as a currency field. Currency belongs only in amount.currency, for example KZT.

The SDK falls back to English when the requested locale is not supported.

Web Customization

Customization#

Theme#

Per-payment-method appearance#

Custom checkout callbacks#

Additional CSS#

Localization#

Customization

Theme

Per-payment-method appearance

Custom checkout callbacks

Additional CSS

Localization