Stripe Payment Element
Stripe Tax や、割引、配送、通貨換算の使用をご希望の場合
税金、割引、配送、通貨換算を管理する Payment Element のシステムを開発しています。詳細については、決済ページを構築する ガイドをご覧ください。
Payment Element は、40 以上の決済手段を受け付け、入力内容を検証し、エラーに対処する、ウェブのための UI コンポーネントです。単独で使用するか、ウェブアプリのフロントエンドの他の Element とともに使用します。
ご自身で Payment Element を試してみるには、以下のいずれかのサンプルで開始します。
Payment Element を作成する
このコードは、Payment Element を作成して、DOM にマウントします。
const stripe = Stripe(
); const appearance = { /* appearance */ }; const options = { /* options */ }; const elements = stripe.elements({'pk_test_TYooMQauvdEDq54NiTphI7jx', appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element');clientSecret
Payment Element による決済の受け付けには、追加のバックエンドコードが必要です。この機能を確認するには、クイックスタートまたはサンプルアプリをご覧ください。
Elements を組み合わせる
Payment Element はその他の Element と連携します。たとえば、このフォームは支払い情報の自動入力に 1 つの追加エレメント、配送先住所の収集にもう 1 つの追加エレメントを使用しています。
この Link の例のコード全体については、Link を Elements システムに追加するをご覧ください。
決済手段
Stripe enables certain payment methods for you by default. We might also enable additional payment methods after notifying you. Use the Dashboard to enable or disable payment methods at any time. With the Payment Element, you can use Dynamic payment methods to:
- ダッシュボードを使用してノーコードで決済手段を管理する
- 所在地、通貨、取引金額などの要素に基づいて、最も関連性の高い支払いオプションを動的に表示する
たとえば、ドイツの顧客が EUR で支払う場合、EUR を受け付ける有効なすべての決済手段が、ドイツで広く普及しているものから順に表示されます。
顧客への関連性の高い順に決済手段を表示する
対応しないカードブランドをフィルタリングするなど、決済手段の提示方法をさらにカスタマイズするには、決済手段をカスタマイズするをご覧ください。Stripe の外部で実装された決済手段を追加するには、外部の決済手段をご覧ください。
貴社で構築済みの Stripe システムで決済手段を手動で一覧表示する必要がある場合は、決済手段を手動でリストアップするをご覧ください。
レイアウト
決済フローに合わせて Payment Element のレイアウトをカスタマイズできます。以下の画像は、同じ Payment Element を異なるレイアウト設定を使用して描写した場合を示しています。
さまざまなレイアウトの Payment Element。
デザイン
Appearance API を使用して、すべての Elements のスタイルを管理します。テーマを選択するか、特定の詳細を更新します。
たとえば、「flat」のテーマを選択して、主要なテキストの色を上書きします。
const stripe = Stripe(
); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } };'pk_test_TYooMQauvdEDq54NiTphI7jx'
テーマと変数の一覧については、Appearance API のドキュメントをご覧ください。
オプション
Stripe Elements はこれより多くのオプションをサポートします。たとえば、business オプションを使用して、ビジネス名を表示します。
const stripe = Stripe(
); const appearance = { /* appearance */}; const options = { business: "RocketRides" };'pk_test_TYooMQauvdEDq54NiTphI7jx'
Payment Element は以下のオプションをサポートします。詳細については、各オプションのリファレンス項目をご覧ください。
layout | Payment Element のレイアウト。 |
defaultValues | Payment Element に表示する顧客の初期情報。 |
business | Payment Element に表示するビジネスに関する情報。 |
paymentMethodOrder | 決済手段が表示される順序。 |
fields | 特定のフィールドを表示するかどうか。 |
readOnly | 支払いの詳細を変更できるかどうか。 |
terms | 同意書や法的な契約書を Payment Element に表示するかどうか。デフォルトの動作では、必要な場合にのみ表示します。 |
wallets | Apple Pay や Google Pay のようなウォレットを表示するかどうか。デフォルトでは、可能な場合には表示します。 |