Elements Appearance API

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

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

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

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

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

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

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

テーマ

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

• stripe
• night
• flat

const appearance = {
  theme: 'night'
};

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

変数

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 to the Elements instance
const elements = stripe.elements({clientSecret, 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 to the Elements instance
const elements = stripe.elements({clientSecret, 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'
    }
  }
};

その他の設定オプション

themes、variables、rules 以外にも Elements のスタイルを設定するデザイン設定オプションが用意されています。

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

const appearance = {
  labels: 'floating',

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

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