Stripe Payment Element

安全で埋め込み可能な UI コンポーネントで、世界中の支払い方法を受け付けます。

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

Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。

互換性のある API

Stripe は Elements と互換性のある 2 つの主要な決済 API を提供しており、顧客からさまざまなタイプの決済を柔軟に受け付けることができます。これらの API を、Stripe の構築済みの決済インターフェイスに実装できます。ほとんどのユーザーに Checkout Session (セッション) の使用をお勧めしていますが、API は決済フローの構築方法の選択と必要な制御の程度に応じて、わずかに異なるユースケースに対応します。Checkout Session API を使用して決済ページを構築するか、Payment Intents API を使用して高度なシステムを構築できます。

Checkout Sessions API では、顧客の決済フローをモデル化できます。これには、購入に含まれる項目、請求先住所と配送先住所、適用される税率、クーポンや割引が含まれます。Checkout セッションでは、サブスクリプションを作成して、Stripe Tax で税率を計算し、支払いを開始できます。
Payment Intents API では、支払いステップをモデル化できます。項目の詳細が必要な Checkout Sessions API とは異なり、請求する最終金額のみを渡します。これは、オフセッションの支払いなどの決済フローに適しています。Stripe を使用して、該当する税金の計算やサブスクリプションの作成を行う場合は、Stripe Tax API または Subscriptions API をそれぞれ実装する必要があります。

Checkout セッションには顧客情報、配送、税金、割引、クーポン、決済の実装が含まれますが、Payment Intents は決済の実装のみを処理します。

Payment Element で決済ページを構築する

Checkout Sessions API を使用して、Payment Element との導入を構築します。

Payment Element との高度な導入を構築する

Payment Intents API を使用して、 Payment Element との導入を構築します。

GitHub のサンプルアプリを複製する

HTML · React · Vue

Stripe.js リファレンスを表示する

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: { name: "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

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