Payment Element のよくあるご質問

Payment Element は、世界中の各地域に特有の支払い方法を受け付けられるようにする安全で埋め込み可能な UI コンポーネントです。

1 回限りの支払いと継続支払いの両方でユーザーがさまざまな決済手段を受け付けられるように、Payment Element は次の 3 つの主要な組み込みパスに対応しています。

よくあるご質問

Payment Element の主な機能を教えてください。

Stripe は、Payment Element をはじめとする新世代の Elements の提供を開始します (https://stripe.com/payments/elements を参照)。Payment Element が登場する以前は、加盟店は決済手段ごとに応じた新しい組み込みを構築して維持する必要がありました。このような手間が不要になったため、Payment Element を利用すれば、時間とリソースを大幅に節約することができます。

Payment Element の主な機能は以下のとおりです。

- 単一の Elements 組み込みで複数の決済手段に対応可能
- 購入者の所在国の位置 (IP アドレスから取得) と優先言語 (ブラウザのロケールから取得) に基づくソートロジックによって、買い手ごとに適切な支払いオプションを表示
- 42 カ所のロケールに適応: https://stripe.com/docs/js/appendix/supported_locales
- 加盟店のブランドに合わせてスタイルを設定可能 (フォント、カラー、配置など)
- モバイルに対応
- 入力検証を内蔵
- PCI-DSS に準拠
- PaymentIntents / SetupIntents との連携

Payment Element は Stripe Elements とどのような関係にありますか？また、双方にはどのような違いがあります？

Stripe Elements は、決済フローの作成に利用できる事前構築済みの UI コンポーネント (入力やボタンなど) のセットです。決済手段 (クレジットカード、デビットカードなど) ごとに対応する Element が用意されています。Payment Element は個々の決済手段の Element を 1 つの Element にまとめた新しいコンポーネントです。

Stripe Element と Payment Element の違いを以下で説明します。

これまで加盟店は Elements を使用する際に、通貨 / 国 / 決済手段のマッピングや、バックエンドで Stripe API を呼び出すタイミングとユーザーインターフェイス (UI) 上での Elements の表示 / 非表示を決めるための関連するロジックを構築して維持する必要がありました。そのためには、それぞれの Element を 1 つずつ組み込むことが必要です。

Payment Element を使用すると、加盟店がこれらを構築して維持する必要がなくなります。組み込み作業は単一の Element の組み込みと同じように行うことができ、マッピングやロジック、表示、動作などは Stripe によってあらかじめ構築されています。トレードオフとしては、UI レイヤー内でのカスタマイズ性が現在の Stripe Elements よりわずかに低くなっていることが挙げられます。しかし、Stripe Checkout よりも細かい制御を行うことが可能です。

具体的に言うと、主な違いは次のとおりです。

- Payment Element では、他の Element (Card Element など) を導入する場合とほぼ同じ量の作業が必要ですが、決済手段を追加してもその都度別の Element を組み込む必要がないため、メンテナンスに必要な労力ははるかに少なくなります。
- スタイルをカスタマイズする機能は、現時点では Elements と比べると限定的であり、JavaScript のスタイリング API のみに対応しています (CSS には未対応)。ただし、スタイルをカスタマイズする機能の大半が引き続きサポートされています。
- サーバー側の確定には対応していないため、クレジットカードで Webhook を使用する必要があります (現在の Elements には非該当)。ただし、カードでこれを回避できるようになる予定です。
- Payment Element で受け付ける決済手段のほとんどで、注文確認ページへのリダイレクトが必要です。そのため、単一ページのウェブアプリでは、注文確認用のページを別途追加する必要があります。しかし、チェックアウト機能の操作は、(Stripe Checkout とは異なり) 加盟店のサイト内に完全に埋め込まれています。

Payment Element は Checkout とどのように関連しているのですか？

Payment Element は、加盟店のウェブサイト内に配置できる新しい UI コンポーネントで、加盟店のエクスペリエンスに合わせてスタイルやブランドの設定を行うことができます。Payment Element では、消費者から必要な情報 (配送先住所を除く) が自動で収集されるため、はるかに少ない労力で複数の決済手段 (現在 18 種類以上で、さらに増加中) に対応できます。Payment Element は、Stripe の支払い用の API (PaymentIntents / SetupIntents) を使用して機能し、Stripe の SDK である Stripe.js を基盤として構築されています。この製品は、提供する支払い体験を制御したいと考えている加盟店向けに設計されています。より具体的には、ウェブアプリケーション内に決済機能を完全に組み込みたい場合 (複数のステップのフロー、ブランドへのこだわり、高い制御の必要性、チェックアウト時の特別条件の提示などがある場合) に、Payment Element は最適な製品です。Payment Element を使用すると、必要なあらゆる情報をチェックアウト時に収集して、望ましいエクスペリエンスを設計できます。

一方、Stripe Checkout は Stripe が完全にホスティングする支払いページであり、サイトのリダイレクト先となる LPM (25 種類以上) を簡単に提供できますが、スタイル設定のオプション (色 / ロゴ) が限られています。Stripe Checkout では、Checkout セッションを使用して操作を行い、PaymentIntent / SetupIntent を使用しません。これは、より単純なユースケース (制御 / カスタマイズ / ブランディングの必要性が少ない単一ステップのフロー) 向けに設計されています。Stripe Checkout では、配送先住所の収集など、より多くの情報が提供および収集されるため、Payment Element では表示されない商品リストや注文総額、送信ボタンを表示できます。

Payment Element の導入にはどの程度の作業が必要になりますか？

Payment Element の導入には、1 つの Element (Card Element など) を導入する場合とほぼ同じ量の作業が必要ですが、メンテナンスの負担は少なくなります。他の支払い方法を提供する場合も、オプションごとに Element を導入する必要はありません。

Payment Element の使用料金について教えてください。

Payment Element は、追加費用なしでご利用いただけます。付随する費用は、受け付ける各決済手段に関する費用のみです (https://stripe.com/pricing/local-payment-methods を参照)。

Payment Element ではどの API がサポートされていますか？

Payment Element では、PaymentIntents と SetupIntents がサポートされています。Charges や Sources などの他のレガシー API はサポートされていません。

Webhook を使用する必要はありますか？

はい。サーバー側の確定はサポートされていないため、Payment Element では Webhook を使用する必要があります。

ただし、カードなどのリダイレクトが不要な決済手段では、これを回避できるようになっています。このために使用するコードは https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect でご確認ください。

Stripe がサポートするすべての決済手段を提供するためには、Payment Element をどのように使用すればよいですか？

Payment Element を使用して Stripe がサポートするすべての決済手段を提供するには、PaymentIntent を作成するときに、決済手段の配列を payment_method_types に渡します。ただし、決済手段によって対応可能な通貨が異なるため、サポート対象のすべての決済手段を同時に渡せるとは限りません。PaymentIntent は、同一の通貨に対応した決済手段でのみ、作成することができます。決済手段と製品サポートについては、こちらの表をご覧ください。https://stripe.com/docs/payments/payment-methods/integration-options

モバイル Payment Element とは何ですか？Payment Element とはどう違いますか？

モバイル Payment Element またはコード内の Payment Sheet クラスは、世界中からの複数の決済手段 (カード、ウォレット、口座引き落とし、銀行へのリダイレクト、後払いなど) を表示できる、安全性の高い事前構築済みの UI コンポーネントです。これはウェブ上で使用する Payment Element に類似していますが、モバイルアプリ内で使用するものです。支払いインターフェイスは、(Apple / Google Pay と同様に)「ボトムシート」として表示され、Stripe の Mobile SDK に組み込まれています。この製品は、Stripe 加盟店のコンバージョン率向上と、支払いコストの削減に寄与すると同時に、カード以外の決済手段の導入に関する Stripe の企業目標を推進するものです。詳細については、次の URL をご覧ください。https://stripe.com/docs/payments/accept-a-payment?platform=ios