# Web SDK customisation

An interactive theme editor that customises the Peach Orchestration web checkout and previews the real SDK live inside a faux browser frame. This page is highly interactive — use the interactive version to experiment with themes and see rendered results.

## What this page covers
- Theming the web Payment Element and seeing the change render live in the embedded SDK
- Three appearance modes: Presets, Visual (colour pickers + theme/label selects), and JSON editor
- A Methods tab to choose which payment methods show and in what order
- A Request tab to edit the payment intent JSON that drives the preview
- A live preview vs "Show code" toggle, and a copy-appearance action

## How it works

The preview embeds the real Hyperswitch web SDK (`CheckoutDemo` inside `SDKProvider`). On mount the page auto-creates a payment via `createPayment()` so the preview is never empty, then feeds the returned `client_secret` to the checkout demo.

The appearance object follows the web SDK schema (`HyperAppearance`):
- `theme`: `"default" | "midnight" | "charcoal" | "soft" | "none"`
- `labels`: `"above" | "floating" | "never"`
- `variables`: colour/typography/spacing string map (for example `colorPrimary`, `colorBackground`, `colorText`, `borderColor`, `fontFamily`, `borderRadius`)
- `rules`: CSS-like selector map (for example `.Input`)

Built-in web presets (from `webPresets`): Default, Midnight, Charcoal, Soft, Peach orange, Branded blue, Minimal, Rounded.

Payment methods: the shown list is passed to the SDK as `paymentMethodOrder`, while hidden methods are suppressed via `paymentMethodsConfig` with `displayMode: "hidden"`. Available methods come from the shared payment-method catalogue (cards, Apple Pay, Google Pay, PayJustNow, and many South-African/regional methods).

The default payment request targets `ZAR`, amount `6500`, with sandbox billing/shipping details and `authentication_type: "no_three_ds"`.

## Related
- [Web SDK](/sdk-web.md): the full appearance/`variables`/`rules` API this editor produces
- [iOS SDK customisation](/sdk-customization-ios.md): the mobile equivalent (Appetize simulator)
- [Android SDK customisation](/sdk-customization-android.md): the mobile equivalent (Appetize simulator)
- [API Playground](/playground.md): create and inspect the payment intents behind the preview
- [Simple purchase](/flows/simple-purchase.md): the checkout flow being themed

---

Interactive version: https://playground.peachpayments.com/sdk-customization