Skip to main content
Complete list of all appearance customization options.

​
Global Colors

KeyTypeDescription
primaryColorHexMain brand color for buttons and highlights
primaryHoverColorHexHover state for primary elements
secondaryColorHexSecondary accent color
backgroundColorHexMain page background
textColorHexDefault text color
borderColorHexGlobal border color for inputs and containers

​
Layout (Desktop)

KeyTypeDescription
leftSideBackgroundHexBackground of the left column (Order Summary)
rightSideBackgroundHexBackground of the right column (Payment Form)
formBackgroundHexBackground of the form container
dividerColorHexColor of divider lines between sections
showTopDividerBooleanShow a divider line at the top on mobile

​
Layout (Mobile)

KeyTypeDescription
mobileBackgroundHexOverall mobile background
mobileTopBackgroundHexBackground of the branding/amount section (top)
mobileBottomBackgroundHexBackground of the payment form section (bottom)
mobileFormBackgroundColorHexForm card background on mobile
mobileStickyTopBooleanIf true, header sticks to top on scroll

​
Typography

KeyTypeDescription
fontFamilyStringCSS font stack (e.g., "Inter, sans-serif")
fontSizeStringBase size: 'sm', 'base', 'lg', 'xl'
fontWeightStringText weight: 'normal', 'medium', 'semibold', 'bold'

​
Spacing & Borders

KeyTypeDescription
spacingStringLayout density: 'compact', 'normal', 'spacious'
borderRadiusStringCorner radius: 'none', 'sm', 'base', 'lg', 'xl', 'full'

​
Text Colors

KeyTypeDescription
headingTextColorHexTitles and headings
bodyTextColorHexStandard paragraph text
labelTextColorHexForm input labels
secondaryTextColorHexHelper text (e.g., “Secured by…”)
amountTextColorHexTotal Amount display

​
Input Fields

KeyTypeDescription
inputBackgroundColorHexBackground of text inputs
inputBorderColorHexDefault border color
inputFocusBorderColorHexBorder color when input is focused
inputErrorBorderColorHexBorder color when validation fails

​
Primary Button (Pay Now)

KeyTypeDescription
buttonBackgroundColorHexBackground color
buttonTextColorHexText color
buttonHoverColorHexHover background color
buttonBorderColorHexBorder color

​
Cancel Button

KeyTypeDescription
cancelButtonBackgroundColorHexBackground (default: transparent)
cancelButtonTextColorHexText color
cancelButtonHoverColorHexHover text color
cancelButtonTextStringCustom text (default: “Cancel and Return”)

​
Branding

KeyTypeDescription
logoUrlURLAbsolute URL to your logo image
logoPositionString'inline' (beside name) or 'top' (above name)
logoMaxHeightStringMaximum logo height (e.g., "50px")
showMerchantNameBooleanDisplay the merchant name text
hideBrandingBooleanHide Ozura branding footer

​
Cart Display (Itemized Checkout)

When using items array for itemized checkout:
KeyTypeDescription
cartProductNameColorHexProduct name text color
cartBrandColorHexBrand name text color
cartPriceColorHexPrice text color
cartOriginalPriceColorHexStrikethrough (original) price color
cartDiscountBadgeColorHexDiscount badge background color
cartDiscountBadgeTextColorHexDiscount badge text color

​
Pre-Made Themes

​
Minimal Light

{
  "appearance": {
    "primaryColor": "#6366F1",
    "primaryHoverColor": "#4F46E5",
    "backgroundColor": "#FAFAFA",
    "textColor": "#1F2937",
    "fontFamily": "Poppins, sans-serif",
    "borderRadius": "lg"
  }
}

​
Violet Dark Mode

{
  "appearance": {
    "primaryColor": "#8b5cf6",
    "buttonBackgroundColor": "#8b5cf6",
    "leftSideBackground": "#8b5cf6",
    "rightSideBackground": "#0f0a1a",
    "formBackground": "#1a0f2e",
    "headingTextColor": "#ffffff",
    "inputBackgroundColor": "#1a0f2e",
    "inputBorderColor": "#8b5cf6"
  }
}

​
Emerald Clean

{
  "appearance": {
    "primaryColor": "#10b981",
    "buttonBackgroundColor": "#10b981",
    "buttonHoverColor": "#059669",
    "inputFocusBorderColor": "#10b981",
    "borderRadius": "md"
  }
}

​
Custom CSS

For advanced customization, use the customCss property:
KeyTypeDescription
customCssStringRaw CSS to inject
cssVariablesObjectCSS custom properties

​
Security Restrictions

For security, these CSS patterns are blocked:
  • url() - Prevents external resource loading
  • @import - Prevents loading external stylesheets
  • javascript: - Prevents script injection

​
Available CSS Classes

ClassWhat It Styles
.checkout-containerRoot container
.checkout-form-containerPayment form wrapper
.checkout-inputAll text inputs
.checkout-submit-buttonThe “Pay Now” button
.checkout-errorError messages

​
Example: Gradient Button

{
  "appearance": {
    "primaryColor": "#10b981",
    "customCss": ".checkout-submit-button { background: linear-gradient(135deg, #10b981, #059669); }"
  }
}