Payment Element の実装のベストプラクティス

このページのチェックリストを使用して、最適なパフォーマンスが得られる Payment Element の実装を構築してください。次の機能を使用すると、その他の導入オプションにアクセスできるようになります。たとえば、動的な支払い方法を使用すると、支払い方法のルールを使用して、カスタムの基準で支払い方法を提示できます。

導入チェックリスト

• レイアウトを選択する

  サイトのスタイルに合う Payment Element のレイアウトを選択して A/B テストを実行し、最適な選択肢を確認します。4 つ以上の支払い方法がある場合は、アコーディオンレイアウトをお勧めします。

• スタイリングを追加する

  Appearance API を使用し、ウェブサイトの視覚的デザインに合わせて Payment Element のスタイルを設定します。このスタイル設定は、実装に追加するすべてのエレメントに適用できます。

• 支払いの回収方法を選択する

  Use the Checkout Sessions API for most checkout workflows. It provides built-in features that remove custom code.

  If you use the Payment Intents API, decide whether to collect payment before you create the PaymentIntent. To accept a payment, create a PaymentIntent with an amount and currency, then confirm it to create a charge. You can collect payment before or after you create the PaymentIntent. Collect payment first.

  Compare the Checkout Sessions and Payment Intents API.

• メタデータを送信する

  Send metadata to show up in your reports. This indexes your metadata to make sure that it’s searchable in the Stripe Dashboard. You can use this metadata to find and reference transactions.

• 必ず最新の API を使用する

  Check to make sure your integration uses the latest API version.

• 表示する支払い方法を選択する

  Stripe のデフォルトの実装である動的な決済手段を使用し、それぞれ利用可能な決済手段を各顧客に動的に提示します。Stripe は、金額、通貨、場所などの要因に基づいた購入完了率を基準に決済手段を並べ替えます。動的な決済手段を使用することで、以下の操作が可能になります。

  • 顧客がダッシュボードから使用できる支払い方法を選択します。
  • 支払い方法のルールなどの追加機能を使用すると、カスタムの基準で支払い方法を提示できます。
• 支払い方法をテストする

  When your integration is complete, test and view how payment methods appear to customers. From the Review displayed payment methods form, enter a transaction ID to learn which payment methods were and weren’t available for that specific transaction. You can also simulate which payment methods display in a given scenario by changing factors such as the amount, currency, capture method, and future usage.

• iframe を使用しない

  Payment Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。一部の決済手段では支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element は別の iframe 内に配置しないでください。iframe に関する注意事項については、こちらの決済情報を収集するをご覧ください。

追加機能のチェックリスト

• Link を有効にする

  UI と動的な支払い方法を導入したら、支払い方法の設定ページで Link を有効にします。Link は顧客の支払いと配送の詳細を安全に保存して入力します。クレジットカード、デビットカード、アメリカの銀行口座など、さまざまな支払い方法に対応しています。ログインした顧客がすでに Link を使用している場合、顧客が別のビジネスの決済ページで最初に保存したかに関係なく、情報が自動入力されます。

• Link Authentication Element を追加する

  配送先住所を収集して事前入力し、物品を販売するには、Link Authentication Element を使用して、メールアドレスの収集と Link の認証の両方に対応する 1 つのメールアドレス入力フィールドを作成することをお勧めします。

• Address Element を追加する

  Address Element は、決済フローでの配送先情報の収集と請求先情報の収集を効率化します。他の Element と連携し、Link で住所を事前入力します。無料の Google オートコンプリート機能を使用して、新しい住所の入力時の自動補完に対応しています。

  • shipping モードでは、顧客は請求先住所として配送先住所を使用することを選択できます。
  • billing モードでは、顧客が詳細を 1 回入力するだけでよくなるように、Stripe は Payment Element 内の請求先フィールドを非表示にします。
• Payment Method Messaging Element を追加する

  BNPL を提供する場合は、Payment Method Messaging Element を使用して決済前にプロモーションを行い、BNPL が利用可能であることを顧客に知らせ、注文金額と購入完了率の増加を図ることをお勧めします。

  • 商品の詳細、カート、支払いの各ページに、この統合された埋め込み可能なコンポーネントを表示できます。
  • このエレメントには、Affirm、Afterpay、Klarna のサポートが含まれています。
• Express Checkout Element を追加する

  Express Checkout Element を使用して、Apple Pay、Google Pay、PayPal、Link などの 1 つの UI コンポーネントで、複数のワンクリックの支払いボタンを顧客に表示します。