# Appearance customization

> If you have integrated Antom Payment Element, use the appearance parameter to customize the visual and layout of the payment page.

 Use the     *appearance*     parameter to customize the visual and layout of the payment page, including theme selection, layout configuration, and CSS style customization.

  

<!-- ToggleTab query="platform" -->

**Tab: Web/WAP**

1. **Start by picking a**    [**theme**](#JSPxe)   **.**  
   Get started with pre-built themes; choose the one that best matches your website or application.
2. **Choose your preferred**    [**layout**](#X0UBw)    **mode.**  
   Choose between two layout modes: Accordion and Tab.

 3. **Use**    [**CSS variables**](#hPdWp)    **to fine-tune components.**  
   If needed, you can specify custom CSS properties for individual component within Payment Element.

 4. [**Customize card brand style**](#tb6Cp)  .  
   If needed, you can configure whether to display card brand icons using the     *card*     parameter.

 The following is a sample code for configuring the appearance of Payment Element using the     *appearance*     parameter:

 ```javascript
// For npm users (TypeScript), import enums. Omit this import for CDN or JS only usage.
import { AMSElement, ThemeType, PaymentElementLayout } from '@alipay/ams-checkout';

// Option 1: Use string values (CDN, npm/JavaScript, or npm/TypeScript)
elementPayment.mount({
  type: 'payment',
  appearance: {
    theme: 'night', // String value
    layout: { type: 'accordion' }, // String value
    variables: { ... },
    card: {
			showBrandIcon: false
		}
  }
}, '#payment-element');

/*
  Option 2: Use enums（Only applicable to npm + TypeScript）
*/
// elementPayment.mount({
//   type: 'payment',
//   appearance: {
//     theme: ThemeType.Night, // TypeScript enum
//     layout: { type: PaymentElementLayout.Accordion }, // TypeScript enum
//     variables: { ... },
//		 card: {
//  			showBrandIcon: false
//			}
//   }
// }, '#payment-element');
```

# Theme {#JSPxe}

 Payment Element provides six preset themes. You can use JavaScript (for CDN or npm) or a TypeScript enum (npm only) to configure the theme property in the     *appearance*     parameter to        select a theme. Valid values are:

 - `default`  : Default theme (light)
- `night`  : Night
- `nostalgicGray`  : Nostalgic gray
- `agateGreen`  : Agate green
- `cherryBlossomPink`  : Cherry blossom pink
- `gamingPurple`  : Gaming purple

 The following are the visualization and sample codes for each theme:

<!-- TabGroup -->

**Tab: Default theme (light)**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/66f4beb5-c1d4-47c9-9d8d-9882d05155ea.png)  The following is a sample code for setting the default theme (light) :  ```javascript
appearance: { theme: 'default' }
// TypeScript enum: theme: ThemeType.Default
```

**Tab: Night**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/5e49ccb7-5a58-43c4-861c-5e1c3b0de42a.png)  The following is a sample code for setting the night theme:  ```javascript
appearance: { theme: 'night' }
// TypeScript enum: theme: ThemeType.Night
```

**Tab: Nostalgic gray**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fab29370-6f8b-4e4f-b7ff-44a452eb431e.png)  The following is a sample code for setting the nostalgic gray theme:  ```javascript
appearance: { theme: 'nostalgicGray' }
// TypeScript enum: theme: ThemeType.NostalgicGray
```

**Tab: Agate green**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/0e87e43b-93f2-4c76-853f-8da70c5340ce.png)  The following is a sample code for setting the agate green theme:  ```javascript
appearance: { theme: 'agateGreen' }
// TypeScript enum: theme: ThemeType.AgateGreen
```

**Tab: Cherry blossom pink**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/55727ace-bcf6-40ed-b7e1-7597ab2c64ce.png)  The following is a sample code for setting the cherry blossom pink theme:  ```javascript
appearance: { theme: 'cherryBlossomPink' }
// TypeScript enum: theme: ThemeType.CherryBlossomPink
```

**Tab: Gaming purple**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9fe83b9a-9d2d-418e-8ebb-aa5bced04b65.png)  The following is a sample code for setting the gaming purple theme:  ```javascript
appearance: { theme: 'gamingPurple' }
// TypeScript enum: theme: ThemeType.GamingPurple
```

<!-- /TabGroup -->

# Layout {#X0UBw}

 Payment Element supports two layout modes: Accordion and Tabs. You can configure the     *appearance.layout*     object using JavaScript (for CDN or npm) or a TypeScript enum (npm only). Valid values are:

 - `accordion`  : Default value, Accordion mode. Payment options are stacked vertically into collapsible sections. Each section title is always visible, and clicking it expands the section to display its content.
- *showRadio*    : Boolean type. The default value is   `true`  . Used to control whether radio buttons are displayed in the payment list under the accordion layout.
- `tabs`  : Tabs mode. Payment options are arranged in horizontal tabs, and clicking the tab switches the content.

 The following are the visualization and sample codes for these two modes:

<!-- TabGroup -->

**Tab: Accordion**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/a15bba8a-63b1-4a88-bcd4-ba4e886e3d79.png)

 ```javascript
appearance: {
  layout: { type: 'accordion' } ,
  accordion: {
    showRadio: false  // Hide radio buttons, defaults to true
}
// TypeScript enum: layout: { type: PaymentElementLayout.Accordion }
```

**Tab: Tabs**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/256bff30-d5d2-4f1a-aa76-e2c0ebdb4d33.png)

 ```javascript
appearance: {
  layout: { type: 'tabs' }
}
// TypeScript enum: layout: { type: PaymentElementLayout.Tabs }
```

<!-- /TabGroup -->

# CSS variables {#hPdWp}

 Payment Element supports fine‑grained customization of visual components via CSS, including styles for borders, backgrounds, text, and icons. To customize styles, you need to pass CSS variables through the     *variables*     parameter.

 The following is a reference list of supported CSS variables and their default values. You can override these variables in your CSS code according to your branding requirements.

<!-- TabGroup -->

**Tab: Color variables**

Color variables are used to define the overall visual color scheme of payment elements, covering aspects such as content, background, borders, actions, and states.

<!-- TabGroup -->

**Tab: Content color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/a4f807f7-318e-4949-a569-c3bb1d6e5aa1.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *content-primary* | `#2a3a52` | Primary content color | Title and important content   ​ |
| *content-secondary* | `#7c8ca3` | Secondary content color   ​ | Description content and subtitle |
| *content-tertiary* | `#abb9cc` | Auxiliary content color | Hint text and placeholder |
| *content-quaternary* | `#ffffff` | Inverse content color | Content on dark backgrounds |

**Tab: Background color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/301d9d04-d139-49af-9d2d-de2eee3f6d66.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *background-primary* | `#ffffff` | Primary background color | Page primary background   ​ |
| *background-secondary* | `#f9fafb` | Secondary background color | Card or module background |
| *background-disable* | `#fcfcfc` | Disabled background color | Disabled state background |
| *background-transparency* | `#0000000a` | Transparent background color | Mask or overlay background |

**Tab: Border color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/cc11aa56-8339-43b2-9063-c7539760fa40.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *border-primary* | `#cfd8e5` | Primary border color | Primary border and divider line   ​ |
| *border-secondary* | `#ebebeb` | Secondary border color   ​ | Secondary border and internal divider line |
| *border-disable* | `#f5f5f5` | Disabled border color | Disabled state border |

**Tab: Action button color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/e3f0dd4a-92c8-4b01-8fe0-98ae51cb09c8.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *action-normal* | `#1650ff` | Button normal state   ​ | Primary action button   ​ |
| *action-hover* | `#5c85ff` | Button hover state | Hover effect |
| *action-disable* | `#a2b9ff` | Button disabled state | Non-clickable button |
| *action-secondary* | `#f3f6ff` | Secondary button background | Secondary action button |

**Tab: State color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/d11a1cfd-0e2d-417c-8e1a-9124e63bedcc.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *state-failure* | `#ff5b4d` | Error state | Error message or failure state |
| *state-warning* | `#ff9f1a` | Warning state | Warning message or caution information |
| *state-success* | `#00b277` | Success state | Success message or completion state |
| *state-info* | `#6092d8` | Information state | General information message |
| *state-marketing* | `#ff6060` | Marketing state | Promotion or campaign message |
| *state-conventional* | `#7c8ca3` | Conventional state | Normal or conventional message |

<!-- /TabGroup -->

**Tab: Size variables**

Size variables define the shape and spatial relationships of payment elements, including settings for border radius, wrapper, and stroke.

<!-- TabGroup -->

**Tab: Border radius settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *radius-backup* | `4px` | Backup border radius | ​   Small element border radius |
| *radius-module* | `12px` | Module border radius | Module container border radius |
| *radius-component* | `8px` | Component border radius | Component element border radius |
| *radius-button* | `12px` | Button border radius | Button border radius |

**Tab: Wrapper settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *wrapper-padding* | `24px` | Container inner padding | Main container inner padding |

**Tab: Stroke settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *stroke-default* | `0\.5px` | Container inactive stroke | Default border for the payment list |
| *stroke-active* | `1px` | Container active stroke | Stroke when the payment list item is selected |

<!-- /TabGroup -->

<!-- /TabGroup -->
 Below is a reference list of supported CSS variables and their default values. You can override the values of these variables in your CSS code according to your brand requirements.

 ```json
{
  "content-primary": "#2a3a52",
  "content-secondary": "#7c8ca3",
  "content-tertiary": "#abb9cc",
  "content-quaternary": "#ffffff",

  "background-primary": "#ffffff",
  "background-secondary": "#f9fafb",
  "background-disable": "#fcfcfc",
  "background-transparency": "#0000000a",

  "border-primary": "#cfd8e5",
  "border-secondary": "#ebebeb",
  "border-disable": "#f5f5f5",

  "action-normal": "#1650ff",
  "action-hover": "#5c85ff",
  "action-disable": "#a2b9ff",
  "action-secondary": "#f3f6ff",

  "state-failure": "#ff5b4d",
  "state-warning": "#ff9f1a",
  "state-success": "#00b277",
  "state-info": "#6092d8",
  "state-marketing": "#ff6060",
  "state-conventional": "#7c8ca3",

  "radius-backup": "4px",
  "radius-module": "12px",
  "radius-component": "8px",
  "radius-button": "12px",

  "wrapper-padding": "24px",
  
  "stroke-default": "0.5px",
  "stroke-active": "1px"
}
```

 The following illustrations show how to customize different interface styles using CSS variables:

<!-- TabGroup -->

**Tab: Accordion layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/c8a91ba1-d141-4556-a35d-6fb0d418f363.png)

**Tab: Tabs layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/64ce66ec-4e37-4eea-b6f6-e8c92e528586.png)

**Tab: Payment info collection page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/01102858-2644-4bd8-9b1c-9be9b458b909.png)

**Tab: Card payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fef62e9e-18d0-4a10-b21d-ec92e617546b.png)

**Tab: Digital wallet payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9184e477-dd24-48d3-95ca-965fefb9ecb1.png)

**Tab: Address module**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/b7fcad8c-1c85-4ec9-94e4-195457bf7486.png)

**Tab: Pop-up window**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/711e7a8a-287e-475c-a429-f031c0d5b0a7.png)

**Tab: Other (virtual account) page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/4cb0c545-a40f-4425-bf1e-ffb11569c46e.png)

<!-- /TabGroup -->

# Customize card brand style {#tb6Cp}

 In card payment scenarios, the display of card brand icons may affect the visual style and interactive experience of card information collection. Depending on your business scenario's UI guidelines or brand consistency requirements, you may need flexible control over whether to display these icons on the payment page. For example, if you want to simplify interface elements, avoid visual distractions, or have already integrated your own card brand recognition functionality, you can choose to hide the default icons. Conversely, if you need to clearly indicate supported card brands, you can maintain the default display to enhance buyer trust.

 Through the     *card.showBrandIcon*     parameter in     *appearance*    , you can quickly control the visibility of card brand icons. Valid values are:

 - `true`  : Default value. Card brand icons are displayed on the payment page.
- `false`  : The payment page only displays text input areas without any card brand icons.

 Below are visual demonstrations and sample codes for configuring card brand display using the        *card.showBrandIcon*        parameter:

<!-- TabGroup -->

**Tab: Display card brand icons**

Use the default value of the     *card.showBrandIcon*     parameter or set it to   `true`   to display card brand icons on the payment page.

 ![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/5809ae4a-e973-40b2-928a-2cbaf7b1c7e2.png)

 ```javascript
{
  appearance: {
    card: {
      showBrandIcon: true
    }
  }
}
```

**Tab: Hide card brand icons**

Set the     *card.showBrandIcon*     parameter to   `false`  . The payment page will only display plain text input areas without any card brand icons.

 ![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/ff4ad285-9ac9-4a67-ae0c-844df0d060c7.png)

 ```javascript
{
  appearance: {
    card: {
      showBrandIcon: false
    }
  }
}
```

<!-- /TabGroup -->

**Tab: iOS**

1. **Start by picking a**    [**theme**](#3JSPxe)   **.**  
   Get started with pre-built themes; choose the one that best matches your website or application.
2. **Choose your preferred**    [**layout**](#3X0UBw)   **mode.**  
   Choose between two layout modes: Accordion and Tab.

 3. **Use**    [**CSS variables**](#3hPdWp)    **to fine-tune components.**  
   If needed, you can specify custom CSS properties for individual component within Payment Element.

# Theme {#3JSPxe}

 Payment Element provides six preset themes. You can select a theme by passing a JSON string containing the     *theme*     property to the     *appearance*     configuration. Valid values are:

 - `"default"`  : Default theme (light)
- `"night"`  : Night
- `"nostalgicGray"`  : Nostalgic gray
- `"agateGreen"`  : Agate green
- `"cherryBlossomPink"`  : Cherry blossom pink
- `"gamingPurple"`  : Gaming purple

 The following are the visualization and sample codes for each theme:

<!-- TabGroup -->

**Tab: Default theme (light)**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/66f4beb5-c1d4-47c9-9d8d-9882d05155ea.png)  The following is a sample code for setting the default theme (light) :  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "default"
//    }
// == >
//    @"{\"theme\": \"default\"}"

NSString *appearance = @"{\"theme\": \"default\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Night**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/5e49ccb7-5a58-43c4-861c-5e1c3b0de42a.png)  The following is a sample code for setting the night theme:  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "night"
//    }
// == >
//    @"{\"theme\": \"night\"}"

NSString *appearance = @"{\"theme\": \"night\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Nostalgic gray**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fab29370-6f8b-4e4f-b7ff-44a452eb431e.png)  The following is a sample code for setting the nostalgic gray theme:  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "nostalgicGray"
//    }
// == >
//    @"{\"theme\": \"nostalgicGray\"}"

NSString *appearance = @"{\"theme\": \"nostalgicGray\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Agate green**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/0e87e43b-93f2-4c76-853f-8da70c5340ce.png)  The following is a sample code for setting the agate green theme:  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "agateGreen"
//    }
// == >
//    @"{\"theme\": \"agateGreen\"}"

NSString *appearance = @"{\"theme\": \"agateGreen\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Cherry blossom pink**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/55727ace-bcf6-40ed-b7e1-7597ab2c64ce.png)  The following is a sample code for setting the cherry blossom pink theme:  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "cherryBlossomPink"
//    }
// == >
//    @"{\"theme\": \"cherryBlossomPink\"}"

NSString *appearance = @"{\"theme\": \"cherryBlossomPink\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Gaming purple**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9fe83b9a-9d2d-418e-8ebb-aa5bced04b65.png)  The following is a sample code for setting the gaming purple theme:  ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "gamingPurple"
//    }
// == >
//    @"{\"theme\": \"gamingPurple\"}"

NSString *appearance = @"{\"theme\": \"gamingPurple\"}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

<!-- /TabGroup -->

# Layout {#3X0UBw}

 Payment Element supports two layout modes: Accordion and Tabs. You can set the layout mode by defining the     *type*     property of the     *layout*     object in the     *appearance*     configuration JSON string. Valid values are:

 - `"Accordion"`  : Default value, Accordion mode. Payment options are stacked vertically into collapsible sections. Each section title is always visible, and clicking it expands the section to display its content.
- `"Tabs"`  : Tabs mode. Payment options are arranged in horizontal tabs, and clicking the tab switches the content.

 The following are the visualization and sample codes for these two modes:

<!-- TabGroup -->

**Tab: Accordion**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/a15bba8a-63b1-4a88-bcd4-ba4e886e3d79.png)

 ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "default",
// 		  "layout": {
//            "type": "Accordion"
//        }
//    }
// == >
//    @"{\"theme\": \"default\",\"layout\": {\"type\": \"Accordion\"}}"

NSString *appearance = @"{\"them\": \"default\",\"layout\": {\"type\": \"Accordion\"}}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

**Tab: Tabs**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/256bff30-d5d2-4f1a-aa76-e2c0ebdb4d33.png)

 ```objectivec
AMSPaymentElementConfiguration *componentConfig = [AMSPaymentElementConfiguration new];
// Convert the JSON into a JSON string.
//    {
//        "theme": "default",
// 		  "layout": {
//            "type": "tabs"
//        }
//    }
// == >
//    @"{\"theme\": \"default\",\"layout\": {\"type\": \"tabs\"}}"

NSString *appearance = @"{\"theme\": \"default\",\"layout\": {\"type\": \"tabs\"}}";
NSDictionary *options = @{ @"appearance": appearance };
componentConfig.options = options;
```

<!-- /TabGroup -->

# CSS variables {#3hPdWp}

 Payment Element supports fine‑grained customization of visual components via CSS, including styles for borders, backgrounds, text, and icons. To customize styles, you need to pass CSS variables through the     *variables*     parameter.

 The following is a reference list of supported CSS variables and their default values. You can override these variables in your CSS code according to your branding requirements.

<!-- TabGroup -->

**Tab: Color variables**

Color variables are used to define the overall visual color scheme of payment elements, covering aspects such as content, background, borders, actions, and states.

<!-- TabGroup -->

**Tab: Content color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/a4f807f7-318e-4949-a569-c3bb1d6e5aa1.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *content-primary* | `#2a3a52` | Primary content color | Title and important content   ​ |
| *content-secondary* | `#7c8ca3` | Secondary content color   ​ | Description content and subtitle |
| *content-tertiary* | `#abb9cc` | Auxiliary content color | Hint text and placeholder |
| *content-quaternary* | `#ffffff` | Inverse content color | Content on dark backgrounds |

**Tab: Background color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/301d9d04-d139-49af-9d2d-de2eee3f6d66.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *background-primary* | `#ffffff` | Primary background color | Page primary background   ​ |
| *background-secondary* | `#f9fafb` | Secondary background color | Card or module background |
| *background-disable* | `#fcfcfc` | Disabled background color | Disabled state background |
| *background-transparency* | `#0000000a` | Transparent background color | Mask or overlay background |

**Tab: Border color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/cc11aa56-8339-43b2-9063-c7539760fa40.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *border-primary* | `#cfd8e5` | Primary border color | Primary border and divider line   ​ |
| *border-secondary* | `#ebebeb` | Secondary border color   ​ | Secondary border and internal divider line |
| *border-disable* | `#f5f5f5` | Disabled border color | Disabled state border |

**Tab: Action button color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/e3f0dd4a-92c8-4b01-8fe0-98ae51cb09c8.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *action-normal* | `#1650ff` | Button normal state   ​ | Primary action button   ​ |
| *action-hover* | `#5c85ff` | Button hover state | Hover effect |
| *action-disable* | `#a2b9ff` | Button disabled state | Non-clickable button |
| *action-secondary* | `#f3f6ff` | Secondary button background | Secondary action button |

**Tab: State color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/d11a1cfd-0e2d-417c-8e1a-9124e63bedcc.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *state-failure* | `#ff5b4d` | Error state | Error message or failure state |
| *state-warning* | `#ff9f1a` | Warning state | Warning message or caution information |
| *state-success* | `#00b277` | Success state | Success message or completion state |
| *state-info* | `#6092d8` | Information state | General information message |
| *state-marketing* | `#ff6060` | Marketing state | Promotion or campaign message |
| *state-conventional* | `#7c8ca3` | Conventional state | Normal or conventional message |

<!-- /TabGroup -->

**Tab: Size variables**

Size variables define the shape and spatial relationships of payment elements, including settings for border radius, wrapper, and stroke.

<!-- TabGroup -->

**Tab: Border radius settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *radius-backup* | `4px` | Backup border radius | ​   Small element border radius |
| *radius-module* | `12px` | Module border radius | Module container border radius |
| *radius-component* | `8px` | Component border radius | Component element border radius |
| *radius-button* | `12px` | Button border radius | Button border radius |

**Tab: Wrapper settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *wrapper-padding* | `24px` | Container inner padding | Main container inner padding |

**Tab: Stroke settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *stroke-default* | `0\.5px` | Container inactive stroke | Default border for the payment list |
| *stroke-active* | `1px` | Container active stroke | Stroke when the payment list item is selected |

<!-- /TabGroup -->

<!-- /TabGroup -->
 Below is a reference list of supported CSS variables and their default values. You can override the values of these variables in your CSS code according to your brand requirements.

 ```json
{
  "content-primary": "#2a3a52",
  "content-secondary": "#7c8ca3",
  "content-tertiary": "#abb9cc",
  "content-quaternary": "#ffffff",

  "background-primary": "#ffffff",
  "background-secondary": "#f9fafb",
  "background-disable": "#fcfcfc",
  "background-transparency": "#0000000a",

  "border-primary": "#cfd8e5",
  "border-secondary": "#ebebeb",
  "border-disable": "#f5f5f5",

  "action-normal": "#1650ff",
  "action-hover": "#5c85ff",
  "action-disable": "#a2b9ff",
  "action-secondary": "#f3f6ff",

  "state-failure": "#ff5b4d",
  "state-warning": "#ff9f1a",
  "state-success": "#00b277",
  "state-info": "#6092d8",
  "state-marketing": "#ff6060",
  "state-conventional": "#7c8ca3",

  "radius-backup": "4px",
  "radius-module": "12px",
  "radius-component": "8px",
  "radius-button": "12px",

  "wrapper-padding": "24px",
  
  "stroke-default": "0.5px",
  "stroke-active": "1px"
}
```

 The following illustrations show how to customize different interface styles using CSS variables:

<!-- TabGroup -->

**Tab: Accordion layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/c8a91ba1-d141-4556-a35d-6fb0d418f363.png)

**Tab: Tabs layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/64ce66ec-4e37-4eea-b6f6-e8c92e528586.png)

**Tab: Payment info collection page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/01102858-2644-4bd8-9b1c-9be9b458b909.png)

**Tab: Card payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fef62e9e-18d0-4a10-b21d-ec92e617546b.png)

**Tab: Digital wallet payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9184e477-dd24-48d3-95ca-965fefb9ecb1.png)

**Tab: Address module**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/b7fcad8c-1c85-4ec9-94e4-195457bf7486.png)

**Tab: Pop-up window**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/711e7a8a-287e-475c-a429-f031c0d5b0a7.png)

**Tab: Other (virtual account) page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/4cb0c545-a40f-4425-bf1e-ffb11569c46e.png)

<!-- /TabGroup -->

**Tab: Android**

1. **Start by picking a**   [**theme**](#2JSPxe)   **.**  
   Get started with pre-built themes; choose the one that best matches your website or application.
2. **Choose your preferred**   [**layout**](#2X0UBw)    **mode.**  
   Choose between two layout modes: Accordion and Tab.

 3. **Use**    [**CSS variables**](#2hPdWp)    **to fine-tune components.**  
   If needed, you can specify custom CSS properties for individual component within Payment Element.

# Theme {#2JSPxe}

 Payment Element provides six preset themes. You can set the     *theme*     property of the     *appearance*     configuration object by constructing a JSON string to select a theme. Valid values are：

 - `"default"`  : Default theme (light)
- `"night"`  : Night
- `"nostalgicGray"`  : Nostalgic gray
- `"agateGreen"`  : Agate green
- `"cherryBlossomPink"`  : Cherry blossom pink
- `"gamingPurple"`  : Gaming purple

 The following are the visualization and sample codes for each theme:

<!-- TabGroup -->

**Tab: Default theme (light)**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/66f4beb5-c1d4-47c9-9d8d-9882d05155ea.png)  The following is a sample code for setting the default theme (light) :  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"default\"}";
configuration.setOption("appearance", appearance);
```

**Tab: Night**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/5e49ccb7-5a58-43c4-861c-5e1c3b0de42a.png)  The following is a sample code for setting the night theme:  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"night\"}";
configuration.setOption("appearance", appearance);
```

**Tab: Nostalgic gray**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fab29370-6f8b-4e4f-b7ff-44a452eb431e.png)  The following is a sample code for setting the nostalgic gray theme:  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"nostalgicGray\"}";
configuration.setOption("appearance", appearance);
```

**Tab: Agate green**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/0e87e43b-93f2-4c76-853f-8da70c5340ce.png)  The following is a sample code for setting the agate green theme:  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"agateGreen\"}";
configuration.setOption("appearance", appearance);
```

**Tab: Cherry blossom pink**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/55727ace-bcf6-40ed-b7e1-7597ab2c64ce.png)  The following is a sample code for setting the cherry blossom pink theme:  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"cherryBlossomPink\"}";
configuration.setOption("appearance", appearance);
```

**Tab: Gaming purple**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9fe83b9a-9d2d-418e-8ebb-aa5bced04b65.png)  The following is a sample code for setting the gaming purple theme:  ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"gamingPurple\"}";
configuration.setOption("appearance", appearance);
```

<!-- /TabGroup -->

# Layout {#2X0UBw}

 Payment Element supports two layout modes: Accordion and Tabs. Set the layout by constructing a JSON string and assigning a valid value to the     *type*     field in the     *layout*     object. Valid values are:

 - `"Accordion"`  : Default value, Accordion mode. Payment options are stacked vertically into collapsible sections. Each section title is always visible, and clicking it expands the section to display its content.
- `"Tabs"`  : Tabs mode. Payment options are arranged in horizontal tabs, and clicking the tab switches the content.

 The following are the visualization and sample codes for these two modes:

<!-- TabGroup -->

**Tab: Accordion**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/a15bba8a-63b1-4a88-bcd4-ba4e886e3d79.png)

 ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme\":\"night\",\"layout\":{\"type":\"Accordion\"}}";
configuration.setOption("appearance", appearance);
```

**Tab: Tabs**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/256bff30-d5d2-4f1a-aa76-e2c0ebdb4d33.png)

 ```java
AMSPaymentElementConfiguration configuration = new AMSPaymentElementConfiguration();
String appearance = "{\"theme":\"night\",\"layout\":{\"type\":\"Tabs\"}}";
configuration.setOption("appearance", appearance);
```

<!-- /TabGroup -->

# CSS variables {#2hPdWp}

 Payment Element supports fine‑grained customization of visual components via CSS, including styles for borders, backgrounds, text, and icons. To customize styles, you need to pass CSS variables through the     *variables*     parameter.

 The following is a reference list of supported CSS variables and their default values. You can override these variables in your CSS code according to your branding requirements.

<!-- TabGroup -->

**Tab: Color variables**

Color variables are used to define the overall visual color scheme of payment elements, covering aspects such as content, background, borders, actions, and states.

<!-- TabGroup -->

**Tab: Content color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/a4f807f7-318e-4949-a569-c3bb1d6e5aa1.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *content-primary* | `#2a3a52` | Primary content color | Title and important content   ​ |
| *content-secondary* | `#7c8ca3` | Secondary content color   ​ | Description content and subtitle |
| *content-tertiary* | `#abb9cc` | Auxiliary content color | Hint text and placeholder |
| *content-quaternary* | `#ffffff` | Inverse content color | Content on dark backgrounds |

**Tab: Background color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/301d9d04-d139-49af-9d2d-de2eee3f6d66.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *background-primary* | `#ffffff` | Primary background color | Page primary background   ​ |
| *background-secondary* | `#f9fafb` | Secondary background color | Card or module background |
| *background-disable* | `#fcfcfc` | Disabled background color | Disabled state background |
| *background-transparency* | `#0000000a` | Transparent background color | Mask or overlay background |

**Tab: Border color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/cc11aa56-8339-43b2-9063-c7539760fa40.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *border-primary* | `#cfd8e5` | Primary border color | Primary border and divider line   ​ |
| *border-secondary* | `#ebebeb` | Secondary border color   ​ | Secondary border and internal divider line |
| *border-disable* | `#f5f5f5` | Disabled border color | Disabled state border |

**Tab: Action button color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/e3f0dd4a-92c8-4b01-8fe0-98ae51cb09c8.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *action-normal* | `#1650ff` | Button normal state   ​ | Primary action button   ​ |
| *action-hover* | `#5c85ff` | Button hover state | Hover effect |
| *action-disable* | `#a2b9ff` | Button disabled state | Non-clickable button |
| *action-secondary* | `#f3f6ff` | Secondary button background | Secondary action button |

**Tab: State color**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/d11a1cfd-0e2d-417c-8e1a-9124e63bedcc.png)
 | **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *state-failure* | `#ff5b4d` | Error state | Error message or failure state |
| *state-warning* | `#ff9f1a` | Warning state | Warning message or caution information |
| *state-success* | `#00b277` | Success state | Success message or completion state |
| *state-info* | `#6092d8` | Information state | General information message |
| *state-marketing* | `#ff6060` | Marketing state | Promotion or campaign message |
| *state-conventional* | `#7c8ca3` | Conventional state | Normal or conventional message |

<!-- /TabGroup -->

**Tab: Size variables**

Size variables define the shape and spatial relationships of payment elements, including settings for border radius, wrapper, and stroke.

<!-- TabGroup -->

**Tab: Border radius settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *radius-backup* | `4px` | Backup border radius | ​   Small element border radius |
| *radius-module* | `12px` | Module border radius | Module container border radius |
| *radius-component* | `8px` | Component border radius | Component element border radius |
| *radius-button* | `12px` | Button border radius | Button border radius |

**Tab: Wrapper settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *wrapper-padding* | `24px` | Container inner padding | Main container inner padding |

**Tab: Stroke settings**

| **Variable** | **Default value** | **Description** | **Usage scenario** |
| --- | --- | --- | --- |
| *stroke-default* | `0\.5px` | Container inactive stroke | Default border for the payment list |
| *stroke-active* | `1px` | Container active stroke | Stroke when the payment list item is selected |

<!-- /TabGroup -->

<!-- /TabGroup -->
 Below is a reference list of supported CSS variables and their default values. You can override the values of these variables in your CSS code according to your brand requirements.

 ```json
{
  "content-primary": "#2a3a52",
  "content-secondary": "#7c8ca3",
  "content-tertiary": "#abb9cc",
  "content-quaternary": "#ffffff",

  "background-primary": "#ffffff",
  "background-secondary": "#f9fafb",
  "background-disable": "#fcfcfc",
  "background-transparency": "#0000000a",

  "border-primary": "#cfd8e5",
  "border-secondary": "#ebebeb",
  "border-disable": "#f5f5f5",

  "action-normal": "#1650ff",
  "action-hover": "#5c85ff",
  "action-disable": "#a2b9ff",
  "action-secondary": "#f3f6ff",

  "state-failure": "#ff5b4d",
  "state-warning": "#ff9f1a",
  "state-success": "#00b277",
  "state-info": "#6092d8",
  "state-marketing": "#ff6060",
  "state-conventional": "#7c8ca3",

  "radius-backup": "4px",
  "radius-module": "12px",
  "radius-component": "8px",
  "radius-button": "12px",

  "wrapper-padding": "24px",
  
  "stroke-default": "0.5px",
  "stroke-active": "1px"
}
```

 The following illustrations show how to customize different interface styles using CSS variables:

<!-- TabGroup -->

**Tab: Accordion layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/c8a91ba1-d141-4556-a35d-6fb0d418f363.png)

**Tab: Tabs layout mode**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/64ce66ec-4e37-4eea-b6f6-e8c92e528586.png)

**Tab: Payment info collection page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/01102858-2644-4bd8-9b1c-9be9b458b909.png)

**Tab: Card payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/fef62e9e-18d0-4a10-b21d-ec92e617546b.png)

**Tab: Digital wallet payment page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/9184e477-dd24-48d3-95ca-965fefb9ecb1.png)

**Tab: Address module**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/b7fcad8c-1c85-4ec9-94e4-195457bf7486.png)

**Tab: Pop-up window**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2025/png/711e7a8a-287e-475c-a429-f031c0d5b0a7.png)

**Tab: Other (virtual account) page**

![](https://idocs-assets.marmot-cloud.com/storage/idocs87c36dc8dac653c1/yuque/idocs/2026/png/4cb0c545-a40f-4425-bf1e-ffb11569c46e.png)

<!-- /TabGroup -->

<!-- /ToggleTab -->