Skip to main content
Brand the checkout page with your colors and logo.

​
Basic Customization

Add an appearance object when creating a session: 
{
  "merchantId": "your_merchant_id",
  "merchantName": "My Store",
  "amount": "25.00",
  "successUrl": "https://mystore.com/success",
  "cancelUrl": "https://mystore.com/cancel",
  "errorUrl": "https://mystore.com/error",
  "appearance": {
    "primaryColor": "#4F46E5",
    "backgroundColor": "#FFFFFF",
    "buttonTextColor": "#FFFFFF"
  }
}

​
Appearance Options

​
Colors

OptionDescriptionExample
primaryColorMain brand color (buttons, highlights)"#4F46E5"
primaryHoverColorButton hover color"#4338CA"
backgroundColorPage background"#FFFFFF"
textColorMain text color"#111827"
borderColorInput borders"#D1D5DB"
buttonTextColorText on buttons"#FFFFFF"
OptionDescriptionExample
logoUrlURL to your logo image"https://mystore.com/logo.png"
logoMaxHeightMaximum logo height in pixels"50px"

​
Layout

OptionDescriptionExample
leftSideBackgroundOrder summary background"#F9FAFB"
rightSideBackgroundPayment form background"#FFFFFF"
formBackgroundForm container background"#FFFFFF"
borderRadiusCorner roundness"lg"
Valid borderRadius values: 'none', 'sm', 'base', 'lg', 'xl', 'full'

​
Example: Dark Theme

{
  "appearance": {
    "primaryColor": "#8B5CF6",
    "backgroundColor": "#1F2937",
    "textColor": "#F9FAFB",
    "borderColor": "#374151",
    "leftSideBackground": "#111827",
    "rightSideBackground": "#1F2937",
    "formBackground": "#374151",
    "buttonTextColor": "#FFFFFF"
  }
}

​
Example: Brand Colors

{
  "appearance": {
    "primaryColor": "#FF6B00",
    "primaryHoverColor": "#E55D00",
    "logoUrl": "https://mystore.com/logo.png",
    "logoMaxHeight": "40px"
  }
}

​
Full Options Reference

For a complete list of all appearance options, see the Appearance Reference.