Elements Appearance API

Stripe Elements はデザインのカスタマイズに対応しており、appearance オプションでサイトのデザインと親和性を持たせることができます。各要素のレイアウトに一貫性をもたせながら、色、フォント、ボーダー、パディングなどを変更することができます。

1. まず、テーマを選択します。

事前に構築されたテーマの中から、実際のウェブサイトに最も近いものを選ぶことで、すぐに利用を開始できます。

1. variables を使用してテーマをカスタマイズします。

fontFamily や colorPrimary などの変数を設定して、各要素全体に表示されるコンポーネントを広範囲にわたってカスタマイズします。

1. 必要に応じて、rules を使用して個々のコンポーネントと状態を微調整します。

きめ細かく制御するには、Element に表示される個々のコンポーネントにカスタム CSS プロパティを指定します。

テーマ

Start customizing Elements by picking from one of the following themes:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

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

変数

Set variables to affect the appearance of many components appearing throughout each Element.

The variables option works like CSS variables. You can specify CSS values for each variable and reference other variables with the var(--myVariable) syntax. You can even inspect the resulting DOM using the DOM explorer in your browser.

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});

Commonly used variables

ルール

The rules option is a map of CSS-like selectors to CSS properties, allowing granular customization of individual components. After defining your theme and variables, use rules to seamlessly integrate Elements to match the design of your site.

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});

All rules

The selector for a rule can target any of the public class names in the Element, as well as the supported states, pseudo-classes, and pseudo-elements for each class. For example, the following are valid selectors:

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

The following are not valid selectors:

• .p-SomePrivateClass, img, only public class names can be targeted
• .Tab .TabLabel, ancestor-descendant relationships in selectors are unsupported
• .Tab--invalid, the .Tab class does not support the --invalid state

Each class name used in a selector supports an allowlist of CSS properties, that you specify using camel case (for example, boxShadow for the box-shadow property).

The following is the complete list of supported class names and corresponding states, pseudo-classes, and pseudo-elements.

Tabs

Form Inputs - Labels Above

Make sure that you choose a font size of at least 16px for input fields on mobile.

Form Inputs - Floating Labels

Block

Code Input

Checkbox

Dropdown

Switch

Picker

Make sure your .PickerItem active state stands out amongst the other states.

DO Use a noticeable, high-contrast primary color, weight, and/or outline to distinguish the active state your customer has already selected.	DON’T Don’t use two equally weighted options or low-contrast colors for your .PickerItem states because it makes distinguishing which one is active more difficult.

Menu

Accordion

Payment Method Messaging Element

Radio Icon

You can control the overall size of the icon with the width property on .RadioIcon. You can control the relative size of .RadioIconInner with the r (radius) property. .RadioIconOuter and .RadioIconInner are SVG elements and can be styled with stroke and fill properties. See the full list of supported CSS properties below.

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

その他の設定オプション

In addition to themes, variables and rules, we have provided additional appearance configuration options to style Elements.

You can customize these by adding them to the appearance object:

const appearance = {
  labels: 'floating',

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

We currently support the below options: