Elements Appearance API

Stripe Elements supports visual customization, which allows you to match the design of your site with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.

1. Start by picking a theme.

Get up and running right away by picking the prebuilt theme that most closely resembles your website.

1. Customize the theme using variables .

Set variables like fontFamily and colorPrimary to broadly customize components appearing throughout each Element.

1. If needed, fine-tune individual components and states using rules .

For complete control, specify custom CSS properties for individual components appearing in the Element.

主题

请从以下主题开始自定义 Element：

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

变量

设置变量可影响 Element 中众多组件的外观。

variables 选项功能类似 CSS 变量。您可为每个变量指定 CSS 值，并使用 var(--myVariable) 语法引用其他变量。您甚至可以使用浏览器 DOM 检查器查看最终生成的 DOM。

const appearance = {
  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

常用变量

规则

rules 选项是类 CSS 选择器到 CSS 属性的映射，允许对单个组件进行精细自定义。定义好您的 theme 和 variables 后，用 rules 无缝集成 Element，使其匹配您的网站设计。

const appearance = {
    rules: {
      '.Tab': {
        border: '1px solid #E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)',
      },

      '.Tab:hover': {
        color: 'var(--colorText)',
      },

      '.Tab--selected': {
        borderColor: '#E0E6EB',
        boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
      },

      '.Input--invalid': {
        boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)',
      },

      // See all supported class names and selector syntax below
    }
  };

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

所有规则

规则的选择器可以指向 Element 中的任何 Public 类名称，以及每个类中支持的状态、伪类 (pseudo-class) 和伪元素 (pseudo-element)。例如，以下是有效的选择器：

• .Tab, .Label, .Input
• .Tab:focus
• .Input--invalid, .Label--invalid
• .Input::placeholder

以下是无效的选择器：

• .p-SomePrivateClass, img，只能指向 Public 类名称
• .Tab .TabLabel，不支持选择器中的祖先后代关系。
• .Tab--invalid，其中 .Tab 类不支持 --invalid 状态

在选择器中使用的每个类名仅支持特定 CSS 属性允许列表，这些属性需使用驼峰命名法指定（例如，box-shadow 属性应写作 boxShadow）。

以下是支持的类名及其相应的状态、伪类 (pseudo-classes) 和伪元素 (pseudo-element) 的完整列表。

标签

表单输入 - 上方标签

请确保为移动设备上的输入字段选择的字体大小至少为 16px。

表单输入 - 浮动标签

阻止

代码输入

复选框

下拉列表

开关

选择器

确保您的 .PickerItem 的活动状态在其他状态中脱颖而出。

一定要 使用明显的、高对比度的原色、粗细和/或轮廓来区分客户已经选择的活动状态。	一定不要 不要为您的 .PickerItem 状态使用两个权重相等的选项或低对比度的颜色，因为它使区分哪个是活动的变得更加困难。

菜单

手风琴

Payment Method Messaging Element

单选图标

您可以通过 .RadioIcon 中的 width 属性控制图标的整体大小。您可以用 r（半径）属性控制 .RadioIconInner 的相对大小。.RadioIconOuter 和 .RadioIconInner 是 SVG 元素，可以使用 stroke 和 fill 属性设置样式。请参见下方支持的 CSS 属性的完整列表。

const appearance = {
  rules: {
    '.RadioIcon': {
      width: '24px'
    },
    '.RadioIconOuter': {
      stroke: '#E0E6EB'
    },
    '.RadioIconInner': {
      r: '16'
    }
  }
};

其他配置选项

除了 themes、variables 和 rules 之外，我们还提供了额外的外观配置选项来设置 Element 的样式。

您可以通过将它们添加到外观对象来自定义它们：

const appearance = {
  labels: 'floating',

  // other configurations such as `theme`, `variables` and `rules`...
}

我们目前支持以下选项：