index.js
サンプル全体を表示
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 つの追加エレメントを使用しています。

注

Link の法的合意書は、利用規約やプライバシーポリシーに対する適切なユーザー意識の遵守を保証するために必要なものであるため、削除することはできません。terms オブジェクトは、Link の法的合意書には適用されません。

連絡先情報、配送先住所、支払いフィールドを含むフォーム。連絡先情報には Link Authentication Element のラベル、配送先住所には Address Element のラベル、支払いフィールドには Payment Element のラベルが付けられます。

この例の全体のコードについては、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 を異なるレイアウト設定を使用して描写した場合を示しています。

3 つの決済フォームの例を示します。画像には、顧客がタブとして表示される支払い方法を選択するタブオプションや、支払い方法が縦にリストされる 2 つのアコーディオンオプションが表示されています。アコーディオンビューで、ラジオボタンを表示するかどうかを選択できます。

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

タブレイアウトは、タブを使用して支払い方法を横に配置します。このレイアウトを使用するには、layout.type の値を tabs に設定します。layout.defaultCollapsed など、その他のプロパティを指定することもできます。

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

デザイン

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

Payment Element の決済フォームのライトモードとダークモードの例。

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

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

オプション

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

index.js
サンプル全体を表示
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

layout	Payment Element のレイアウト。
defaultValues	Payment Element に表示する顧客の初期情報。
business	Payment Element に表示するビジネスに関する情報。
paymentMethodOrder	支払い方法が表示される順序。
fields	特定のフィールドを表示するかどうか。
readOnly	支払いの詳細を変更できるかどうか。
terms	同意書や法的な契約書を Payment Element に表示するかどうか。デフォルトの動作では、必要な場合にのみ表示します。
wallets	Apple Pay や Google Pay のようなウォレットを表示するかどうか。デフォルトでは、可能な場合には表示します。

エラー

Payment Element は、次のエラーコードについて、クライアント確認中にローカライズされた顧客向けのエラーメッセージを自動的に表示します。

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

他のタイプのエラーのメッセージを表示するには、エラーコードおよびエラー処理を参照してください。