Elements Appearance API

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

1. お客様のウェブサイトに最も近い事前構築された テーマ を選択します。
2. 入力とラベル を使用してテーマをカスタマイズします。fontFamily や colorPrimary などの 変数 を設定して、各 Element 全体に表示されるコンポーネントを幅広くカスタマイズすることもできます。
3. 必要に応じて、ルール を使用して個々のコンポーネントと状態を微調整します。

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

テーマ

以下のいずれかのテーマを選択して Elements のカスタマイズを開始します:

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

// Pass the appearance object when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {appearance}});

入力とラベル

入力フィールドとそれに関連付けられたラベルのデザインをカスタマイズします。

const appearance = {
  inputs: 'spaced',
  labels: 'auto'
}

入力

デザインに合わせて入力フィールドのスタイルを選択します。

ラベル

入力フィールドに関連付けられたラベルの位置と可視性を制御します。

変数

Elements の多くのコンポーネントのデザインに影響を与える変数を設定します。

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 when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {appearance}});

使用頻度の高い変数

ルール

rules オプションは、CSS に類似するセレクターを CSS プロパティにマッピングしたものであり、各コンポーネントを詳細にカスタマイズすることを可能にします。theme と variables を定義した後 rules を使用することで、Elements をサイトのデザインに合わせて簡単に実装できます。

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 when initializing checkout
const checkout = stripe.initCheckout({clientSecret, elementsOptions: {appearance}});

すべてのルール

ルールのセレクターは、Elements 内の公開クラス名と、対応するステータス、疑似クラス、疑似要素を対象にすることができます。有効なセレクターの例として、以下が挙げられます。

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

以下は有効なセレクターではありません。

• .p-SomePrivateClass, img: 公開クラス名のみターゲットにすることができます
• .Tab .TabLabel: セレクター内での先祖子孫関係はサポートされていません
• .Tab--invalid: .Tab クラスは、--invalid 状態をサポートしていません

セレクターに表示される各クラス名は、CSS プロパティの許可リストに対応しています。これは、キャメルケース (box-shadow プロパティの boxShadow など) を使用して指定します。

以下は、サポートされているクラス名と、対応するステータス、疑似クラス、疑似要素の一覧です。

タブ

入力 (ラベル)

モバイルの入力フィールドには、少なくとも 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'
    }
  }
};

その他の設定オプション

テーマ、ラベル、入力、変数、規則に加えて、Elements のスタイルは、その他の外観設定オプションを使用して設定できます。

これらは、Appearance オブジェクトに追加することでカスタマイズ可能です。

const appearance = {
  disableAnimations: true,

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

現在、使用可能なオプションは以下のとおりです。