Stripe Payment Element

Payment Element は、40 以上の支払い方法を受け付け、入力内容を検証し、エラーに対処する、ウェブのための UI コンポーネントです。単独で使用するか、ウェブアプリのフロントエンドの他の Element とともに使用します。

ご自身で Payment Element を試してみるには、以下のいずれかのサンプルで開始します。

Payment Element を作成する

このコードは、Payment Element を作成して、DOM にマウントします。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({ 
clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Payment Element による決済の受け付けには、追加のバックエンドコードが必要です。この機能を確認するには、クイックスタートまたはサンプルアプリをご覧ください。

Elements を組み合わせる

Payment Element はその他の Element と連携します。たとえば、このフォームは支払い情報の自動入力に 1 つの追加エレメント、配送先住所の収集にもう 1 つの追加エレメントを使用しています。

この例の全体のコードについては、Elementsの組み込みに Link を追加する をご覧ください。

Payment Element を Express Checkout Element と組み合わせることもできます。この場合、Apple Pay や Google Pay などのウォレットの支払い方法は、重複を避けるために Express Checkout Element でのみ表示されます。

支払い方法

Stripe は、特定の支払い方法をデフォルトで有効にします。また、通知後に追加の支払い方法を有効にする場合があります。ダッシュボードを使用すると、いつでも支払い方法を有効または無効にできます。Payment Elemen では、動的な支払い方法を使用して以下を行うことができます。

• ダッシュボードを使用してノーコードで支払い方法を管理する
• 所在地、通貨、取引金額などの要素に基づいて、最も関連性の高い支払いオプションを動的に表示する

たとえば、ドイツの顧客が EUR で支払う場合、EUR を受け付ける有効なすべての支払い方法が、ドイツで広く普及しているものから順に表示されます。

顧客への関連性の高い順に支払い方法を表示する

対応しないカードブランドを絞り込むなど、支払い方法の提示方法をさらにカスタマイズするには、支払い方法をカスタマイズするをご覧ください。Stripe の外部で実装された支払い方法を追加するには、外部の支払い方法をご覧ください。

貴社で構築済みの Stripe システムで支払い方法を手動で一覧表示する必要がある場合は、支払い方法を手動でリストアップするをご覧ください。

レイアウト

決済フローに合わせて Payment Element のレイアウトをカスタマイズできます。以下の画像は、同じ Payment Element を異なるレイアウト設定を使用して描写した場合を示しています。

さまざまなレイアウトの Payment Element。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

デザイン

Appearance API を使用して、すべての Elements のスタイルを管理します。テーマを選択するか、特定の詳細を更新します。

たとえば、「flat」のテーマを選択して、主要なテキストの色を上書きします。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

テーマと変数の一覧については、Appearance API のドキュメントをご覧ください。

オプション

Stripe Elements はこれより多くのオプションをサポートします。たとえば、business オプションを使用して、ビジネス名を表示します。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

Payment Element は以下のオプションをサポートします。詳細については、各オプションのリファレンス項目をご覧ください。