Payment Capture Page Styling
The Hosted Payment Capture Page now supports full styling customization—even though it's hosted by us. This allows you to tailor the look and feel of the page to match your brand or your merchants' preferences.
How It Works
- Preview and Configure
Use our 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, export the configuration as a JSON payload. - Submit to Styling API
Send the JSON to our Styling API, replacing any placeholders with your desired values (e.g., brand colors, font choices). - Receive Styling ID
The API will return a Styling ID, which you can reuse across multiple merchants who require the same visual theme. - Apply Styling to Payment Capture Page
Include the Styling ID in the Payment Capture Page parameters to apply the custom styling.
Example Use Case
You can create both light and dark themes and dynamically switch between them based on your customer's system preferences. This ensures a seamless experience—no more blinding white popups in dark mode!
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 [Google Fonts CSSgleapis.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. Due to security reasons, some CSS classes and functions are blocked. Kindly refer to blocked CSS classes and functions for the full list.
-
Form Elements
Class Description Pseudo-classes Pseudo-elements States .InputLabelInput field container :hover,:focus::placeholder,::prefix--invalid,--withPrefix.InputLabelInput field labels :hover,:focus--invalid.InputErrorError message styling :hover,:focus.SubmitButtonSubmit button :hover,:focus,:disabled.RadioButtonRadio button container :hover,:focus.RadioButtonInnerInner circle of radio button --selected,--disabled.CheckboxContainerCheckbox container :hover.CheckboxInputCheckbox input element :hover,:focus--checked,--disabled.CheckboxLabelCheckbox label :hover,:focus -
Accordion Components
Class Description Pseudo-classes Pseudo-elements States .AccordionItemIndividual accodion item :hover,:focus.AccordionContentAccordion content area :hover,:focus.AccordionTriggerAccordion trigger button :hover,:focus.AccordionTriggerLabelAccordion trigger label -
Payment Method Accordion Components
Class Description Pseudo-classes Pseudo-elements States .MethodAccordionItemPayment method accordion item :hover,:focus.MethodAccordionTriggerpayment method accordion trigger :hover,:focus.MethodAccordionTriggerLabelPayment method accordion trigger label .MethodAccordionTriggerDescriptionPayment method accordion description .MethodAccordionContentPayment method accordion content area :hover,:focus.InformationAccordionItemInformation accordion item :hover,:focus.InformationAccordionTriggerInformation accordion trigger :hover,:focus.InformationAccordionTriggerLabelInformation accordion trigger label .InformationAccordionContentInformation accordion content -
Information Accordion Components
Class Description Pseudo-classes Pseudo-elements States .InformationAccordionItemInformation accordion item :hover,:focus.InformationAccordionTriggerInformation accordion trigger :hover,:focus.InformationAccordionTriggerLabelInformation accordion trigger label .InformationAccordionContentInformation accordion content -
Ezypay Contact Details Components
Class Description Pseudo-classes Pseudo-elements States .EzypayDetailsLabelEzypay details label .EzypayDetailsContentEzypay details content .EzypayEmailEzypay email link :hover -
Terms & conditions Components
Class Description Pseudo-classes Pseudo-elements States .TermsLabelTerms and conditions label .TermsLinkTerms and conditions link :hover -
Submit Results Components
Class Description Pseudo-classes Pseudo-elements States .SubmitResultsIconIcon in submit results .SubmitResultsIconBackgroundBackground for submit results icon .SubmitResultsTitleTitle in submit results .SubmitResultsContentContent in submit results
Blocked CSS Classes and Functions
Blocked CSS Classes
background, background-image, border-image, border-image-source, list-style-image, mask, mask-image, mask-border, mask-border-source, content, clip-path, shape-outside, filter, -ms-filter, icon, @import, @font-face
Blocked CSS Functions
url(), expression(), image(), image-set(), cross-fade(), element(), attr()
Updated about 8 hours ago