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:

.plexy-checkout {
  --plexy-color-primary: #5b21b6;
  --plexy-color-text: #111827;
  --plexy-radius: 12px;
  --plexy-font-family: 'Inter', sans-serif;
}

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:

import type { DropinConfiguration } from '@plexy/plexy-web';

const config: DropinConfiguration = {
  paymentMethodsConfiguration: {
    card: {
      buttonText: 'Pay now',
    },
    googlepay: {
      buttonColor: 'white',
      buttonType: 'plain',
    },
  },
};

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.

import type { CoreConfiguration } from '@plexy/plexy-web';

const options: CoreConfiguration = {
  // …
  beforeSubmit(state, component, actions) {
    // Inspect or augment `state` before it's submitted.
    actions.resolve({ ...state, riskData: { /* … */ } });
  },
  onSubmit(state, component, actions) {
    // Forward to your own backend (Advanced flow).
  },
};

Additional CSS

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

import '@plexy/plexy-web/styles/plexy.css';
import './my-checkout-overrides.css'; // your overrides

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

Localization

Pass locale on CoreConfiguration:

const options: CoreConfiguration = {
  // …
  locale: 'ru-RU', // or 'kk-KZ', 'en-US', 'en-GB', …
};

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