Payment capture page supports styling customization. This allows you to tailor the look and feel of the page to match your brand or your merchants' preferences.

Get Started

Preview and Configure
Use the demo page to experiment with different styling configurations. This interactive tool lets you see how various settings affect the appearance of the Payment Capture Page.
Generate Styling JSON
Once you're satisfied with the design, generate the styling JSON and use it in next step to obtain the stylingId.

Submit to Styling API
Create a styling with the API and use the generated JSON in the payload. Store the id returned in the response. This is the stylingId that you would append to the Payment capture page link.

{
  "name": "Dark_Theme",
  "memo": "Dark Theme",
  "cssVariables": {
    "--fontFamily": "Inter",
    "--fontSizeBase": "16px",
    "--fontSizeHeading1": "1.25rem",
    "--fontSizeHeading2": "1rem",
    "--fontSizeHeading3": "0.875rem",
    "--fontSizeHeading4": "0.75rem",
    "--spacingUnit": "0.25rem",
    "--borderRadius": "0.5rem",
    "--borderWidth": "1px",
    "--borderColor": "#424242",
    "--colorPrimary": "#F97316",
    "--colorTextTitle": "#fafafa",
    "--colorTextGeneral": "#a1a1a1",
    "--colorTextSubtitle": "#a1a1a1",
    "--colorPlaceholder": "#a1a1a1",
    "--colorInputValue": "#fafafa",
    "--colorInputBorder": "#424242",
    "--colorTextHeading1": "#fafafa",
    "--colorTextHeading2": "#fafafa",
    "--colorBackgroundPage": "#0a0a0a",
    "--colorBackgroundContainerPrimary": "#17171717",
    "--colorBackgroundContainerSecondary": "#212121",
    "--colorBackgroundContainerHover": "#656565",
    "--colorDanger": "#DC2626"
  },
  "cssClasses": {}
}

{
  "data": {
    "id": "7a9020cb-c8eb-4d70-980f-6df7d0aae9f1",
    "name": "Dark Theme",
    "createdByUser": "[email protected]",
    "memo": "Dark Theme",
    "cssClasses": {},
    "cssVariables": "{\"--fontFamily\":\"Inter\",\"--fontSizeBase\":\"16px\",\"--fontSizeHeading1\":\"1.25rem\",\"--fontSizeHeading2\":\"1rem\",\"--fontSizeHeading3\":\"0.875rem\",\"--fontSizeHeading4\":\"0.75rem\",\"--spacingUnit\":\"0.25rem\",\"--borderRadius\":\"0.5rem\",\"--borderWidth\":\"1px\",\"--borderColor\":\"#424242\",\"--colorPrimary\":\"#F97316\",\"--colorTextTitle\":\"#fafafa\",\"--colorTextGeneral\":\"#a1a1a1\",\"--colorTextSubtitle\":\"#a1a1a1\",\"--colorPlaceholder\":\"#a1a1a1\",\"--colorInputValue\":\"#fafafa\",\"--colorInputBorder\":\"#424242\",\"--colorTextHeading1\":\"#fafafa\",\"--colorTextHeading2\":\"#fafafa\",\"--colorBackgroundPage\":\"#0a0a0a\",\"--colorBackgroundContainerPrimary\":\"#17171717\",\"--colorBackgroundContainerSecondary\":\"#212121\",\"--colorBackgroundContainerHover\":\"#656565\",\"--colorDanger\":\"#DC2626\"}",
    "lastUpdatedByUser": null,
    "createdAt": "2026-07-21T08:20:51.484Z",
    "updatedAt": "2026-07-21T08:20:51.484Z"
  },
  "status": 200
}

Apply Styling to Payment Capture Page
Include the stylingId in the Payment Capture Page parameters to apply the custom styling.

https://hosted-global-sandbox.ezypay.com/paymentmethod/embed?token={{jwt_token}}&stylingId={{styleId}}

Working with Styling IDs

Ezypay supports multiple Styling IDs, allow you to manage different visual configurations and apply them Same Styling ID can be reused across multiple merchant accounts, giving you flexibility without duplication.

This approach helps Payment capture pages maintain visual consistency with your platform's design system.

Common scenarios:

Dark and light theme variations
Brand-specific styling
Responsive designs for mobile and desktop

You can retrieve the actual cssVariables or cssClasses for any Styling ID using the retrieve styling API. This means you only need to store the Styling ID itself and fetch the underlying CSS on demand through the API. Include a meaningful description when creating the style. This will make it much easier to identify its purpose when retrieving it.

Customisable Styling Variables

The table below lists all the styling variables (cssVariables) you can configure via the Styling API:

Variable	Type	Example	Description
`--fontFamily`	string	`Inter`	Base font family. Only fonts retrievable from fonts.googleapis.com/css2 are allowed.
`--fontSizeBase`	string (CSS size)	`16px`	Base font size. Change this value to scale all text sizes.
`--fontSizeHeading1` – `--fontSizeHeading4`	string (CSS size)	`1.25rem`	Heading sizes.
`--spacingUnit`	string (CSS size)	`0.25rem`	Base spacing multiplier.
`--borderRadius`	string (CSS size)	`0.5rem`	Corner rounding.
`--borderWidth`	string (CSS size)	`1px`	Border thickness.
`--borderColor`	string (hex)	`#E0E6EB`	Border color.
`--colorPrimary`	string (hex)	`#F97316`	Primary brand/accent color.
`--colorTextTitle` / `--colorTextGeneral` / `--colorTextSubtle`	string (hex)	`#111827`	Text color tiers.
`--colorTextHeading1` / `--colorTextHeading2`	string (hex)	`#111827`	Heading text colors.
`--colorBackgroundPage` / `--colorBackgroundContainerPrimary` / `--colorBackgroundContainerSecondary` / `--colorBackgroundContainerHover	string (hex)	`#FFFFFF`	Background layers

**Even you only need to customise a single variables, you will need to provide all the variables with their default value to the styling API.

Customisable CSS Class

If you are not satisfied with the variables above, you could customised the CSS based on the relevant cssClasses. Add this in when you are requesting for a styling ID. Note that we have block some CSS property, they will not take effect even if you pass them in.

Form Elements

Class	Description	Pseudo-classes	Pseudo-elements	States
`.InputLabel`	Input field container	`:hover`, `:focus`	`::placeholder`, `::prefix`	`--invalid` ,`--withPrefix`
`.InputLabel`	Input field labels	`:hover`, `:focus`		`--invalid`
`.InputError`	Error message styling	`:hover`, `:focus`
`.SubmitButton`	Submit button	`:hover`, `:focus`, `:disabled`
`.RadioButton`	Radio button container	`:hover`, `:focus`
`.RadioButtonInner`	Inner circle of radio button			`--selected`, `--disabled`
`.CheckboxContainer`	Checkbox container	`:hover`
`.CheckboxInput`	Checkbox input element	`:hover`, `:focus`		`--checked`, `--disabled`
`.CheckboxLabel`	Checkbox label	`:hover`, `:focus`

Accordion Components

Class	Description	Pseudo-classes
`.AccordionItem`	Individual accodion item	`:hover`, `:focus`
`.AccordionContent`	Accordion content area	`:hover`, `:focus`
`.AccordionTrigger`	Accordion trigger button	`:hover`, `:focus`
`.AccordionTriggerLabel`	Accordion trigger label

Payment Method Accordion Components

Class	Description	Pseudo-classes
`.MethodAccordionItem`	Payment method accordion item	`:hover`, `:focus`
`.MethodAccordionTrigger`	payment method accordion trigger	`:hover`, `:focus`
`.MethodAccordionTriggerLabel`	Payment method accordion trigger label
`.MethodAccordionTriggerDescription`	Payment method accordion description
`.MethodAccordionContent`	Payment method accordion content area	`:hover`, `:focus`

Information Accordion Components

Class	Description	Pseudo-classes
`.InformationAccordionItem`	Information accordion item	`:hover`, `:focus`
`.InformationAccordionTrigger`	Information accordion trigger	`:hover`, `:focus`
`.InformationAccordionTriggerLabel`	Information accordion trigger label
`.InformationAccordionContent`	Information accordion content

Ezypay Contact Details Components

Class Description Pseudo-classes Pseudo-elements States
.EzypayDetailsLabel Ezypay details label
.EzypayDetailsContent Ezypay details content
.EzypayEmail Ezypay email link :hover
Terms & conditions Components

Class Description Pseudo-classes Pseudo-elements States
.TermsLabel Terms and conditions label
.TermsLink Terms and conditions link :hover

Class	Description	Pseudo-classes	Pseudo-elements	States
`.TermsLabel`	Terms and conditions label
`.TermsLink`	Terms and conditions link	`:hover`

Submit Results Components

Class	Description	Pseudo-classes	Pseudo-elements	States
`.SubmitResultsIcon`	Icon in submit results
`.SubmitResultsIconBackground`	Background for submit results icon
`.SubmitResultsTitle`	Title in submit results
`.SubmitResultsContent`	Content in submit results