On This Page

UI/UX Customization Look and Feel

Click to Pay Drop-In UI supports appearance customization using the

appearance

field object. You can customize the theme, button configuration, color styling, input states, and typography. All customization fields are optional and can be configured in the API in the

appearance.variables

field object. For a complete list of customizable fields, see Customization Matrix.

This is an example JSON configuration:

{ 
  "appearance": { 
    "theme": "LIGHT", 
    "buttonType": "CHECKOUT", 
    "variables": { 
      "backgroundColor": "#FFFFFF", 
      "textColor": "#000000", 
      "headerBackground": "#1A237E", 
      "headerForeground": "#FFFFFF", 
      "inputBackground": "#FAFAFA", 
      "buttonBackground": "#E0E0E0", 
      "buttonForeground": "#333333", 
      "fontFamily": "Roboto Slab, serif" 
    } 
  } 
}

This is an example sessions capture context request with UI/UX customization:

{
  "targetOrigins": [
    "https://yourCheckoutPage.com"
  ],
  "allowedCardNetworks": [
    "VISA",
    "MASTERCARD",
    "AMEX"
  ],
  "allowedPaymentTypes": [
    "CLICKTOPAY"
  ],
  "appearance": {
    "variables": {
      "backgroundColor": "#FFFFFF",
      "textColor": "#1A1A1A",
      "headerBackground": "#0A3450",
      "headerForeground": "#FFFFFF",
      "headerAvatarBackgroundColor": "#E6EEF8",
      "headerAvatarForegroundColor": "#0A2540",
      "inputBackground": "#FFFFFF",
      "inputColor": "#1A1A1A",
      "inputPlaceholderColor": "#6B7280",
      "inputBorderColor": "#D1D5DB",
      "inputBorderStyle": "solid",
      "inputBorderRadius": "6px",
      "inputHoverBackground": "#FFFFFF",
      "inputHoverColor": "#111827",
      "inputHoverPlaceholderColor": "#6B7280",
      "inputHoverBorderColor": "#9CA3AF",
      "inputHoverBorderStyle": "solid",
      "inputFocusedBackground": "#FFFFFF",
      "inputFocusedColor": "#111827",
      "inputFocusedPlaceholderColor": "#6B7280",
      "inputFocusedBorderColor": "#2563EB",
      "inputFocusedBorderStyle": "solid",
      "inputActiveBackground": "#FFFFFF",
      "inputActiveColor": "#111827",
      "inputActivePlaceholderColor": "#6B7280",
      "inputActiveBorderColor": "#2563EB",
      "inputActiveBorderStyle": "solid",
      "inputPressedBackground": "#F9FAFB",
      "inputPressedColor": "#111827",
      "inputPressedPlaceholderColor": "#9CA3AF",
      "inputPressedBorderColor": "#2563EB",
      "inputPressedBorderStyle": "solid",
      "inputErrorBackground": "#FEF2F2",
      "inputErrorColor": "#991B1B",
      "inputErrorPlaceholderColor": "#B91C1C",
      "inputErrorBorderColor": "#DC2626",
      "inputErrorBorderStyle": "solid",
      "inputValidBackground": "#F0FDF4",
      "inputValidColor": "#065F46",
      "inputValidPlaceholderColor": "#047857",
      "inputValidBorderColor": "#16A34A",
      "inputValidBorderStyle": "solid",
      "buttonBackground": "#2563EB",
      "buttonForeground": "#FFFFFF",
      "buttonShape": "rect",
      "buttonBorderColor": "#2563EB",
      "buttonBorderStyle": "solid",
      "buttonBorderRadius": "8px",
      "buttonHoverBackground": "#1D4ED8",
      "buttonHoverForeground": "#FFFFFF",
      "buttonHoverBorderColor": "#1D4ED8",
      "buttonHoverBorderStyle": "solid",
      "buttonFocusBackground": "#1E40AF",
      "buttonFocusForeground": "#FFFFFF",
      "buttonFocusBorderColor": "#1E40AF",
      "buttonActiveBackground": "#1E3A8A",
      "buttonActiveForeground": "#FFFFFF",
      "buttonActiveBorderColor": "#1E3A8A",
      "buttonActiveBorderStyle": "solid",
      "buttonDisabledBackground": "#E5E7EB",
      "buttonDisabledForeground": "#9CA3AF",
      "buttonDisabledBorderColor": "#E5E7EB",
      "fontFamily": "Inter, Arial, sans-serif",
      "borderRadius": "8px",
      "paymentSelectionBackground": "#F9FAFB"
    }
  },
  "country": "US",
  "locale": "en_US",
  "captureMandate": {
    "billingType": "FULL",
    "requestEmail": true,
    "requestPhone": true,
    "requestShipping": true,
    "shipToCountries": [
      "US",
      "GB"
    ],
    "showAcceptedNetworkIcons": true
  },
  "data": {
    "orderInformation": {
      "amountDetails": {
        "totalAmount": "21.00",
        "currency": "USD"
      }
    }
  }
}