UI/UX Customization Look and Feel {#ctp-cc-ui-ux-look-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](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/Appendix/ctp-appendix-cust-matrix.md "").  
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" 
    } 
  } 
} 
```

{#ctp-cc-ui-ux-look-feel_codeblock_y5l_ndz_hjc}  
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"
      }
    }
  }
}
```

{#ctp-cc-ui-ux-look-feel_codeblock_hw4_q51_3jc}