Payment Element の実装のベストプラクティス
ベストプラクティスを使用して Payment Element の実装を構築します。
このページのチェックリストを使用して、最適なパフォーマンスが得られる Payment Element の実装を構築してください。次の機能を使用すると、その他の導入オプションにアクセスできるようになります。たとえば、動的な支払い方法を使用すると、支払い方法のルールを使用して、カスタムの基準で支払い方法を提示できます。
導入チェックリスト
サイトのスタイルに合う Payment Element のレイアウトを選択して A/B テストを実行し、最適な選択肢を確認します。4 つ以上の支払い方法がある場合は、アコーディオンレイアウトをお勧めします。
Appearance API を使用し、ウェブサイトの視覚的デザインに合わせて Payment Element のスタイルを設定します。このスタイル設定は、実装に追加するすべてのエレメントに適用できます。
PaymentIntent API コールを作成する前に支払いの回収を行う必要があるかどうかを検討します。決済を受け入れるには、金額と通貨を含む PaymentIntent を作成し、その支払いを確定して Stripe による支払いを実行する必要があります。ただし、支払いの回収と PaymentIntent の作成の順序を変更できます。最初に支払いを回収することをお勧めします。
レポートにメタデータを表示できるようにするには、PaymentIntent で metadata (メタデータ) を送信します。これにより、Stripe ダッシュボードで検索可能になるようにメタデータにインデックスが付けられます。このメタデータを使用して、取引を検索して参照できます。
PaymentIntent が最新の API バージョンを使用していることを確認します。
Stripe のデフォルトの実装である動的な決済手段を使用し、それぞれ利用可能な決済手段を各顧客に動的に提示します。Stripe は、金額、通貨、場所などの要因に基づいた購入完了率を基準に決済手段を並べ替えます。動的な決済手段を使用することで、以下の操作が可能になります。
導入が完了したらテストを行い、支払い方法が顧客にどのように表示されるかを確認します。表示される支払い方法を確認するフォームに PaymentIntent ID を入力して、その特定の取引に使用できた支払い方法と使用できなかった支払い方法を確認します。金額、通貨、キャプチャー方法、将来の使用などの要因を変化させて、特定のシナリオでどの支払い方法が表示されるかをシミュレーションすることもできます。
Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。iframe に関する考慮事項については、支払いの詳細を収集するをご覧ください。
追加機能のチェックリスト
UI と動的な支払い方法を導入したら、支払い方法の設定ページで Link を有効にします。Link は顧客の支払いと配送の詳細を安全に保存して入力します。クレジットカード、デビットカード、アメリカの銀行口座など、さまざまな支払い方法に対応しています。ログインした顧客がすでに Link を使用している場合、顧客が別のビジネスの決済ページで最初に保存したかに関係なく、情報が自動入力されます。
配送先住所を収集して事前入力し、物品を販売するには、Link Authentication Element を使用して、メールアドレスの収集と Link の認証の両方に対応する 1 つのメールアドレス入力フィールドを作成することをお勧めします。
Address Element は、決済フローでの配送先情報の収集と請求先情報の収集を効率化します。他の Element と連携し、Link で住所を事前入力します。無料の Google オートコンプリート機能を使用して、新しい住所の入力時の自動補完に対応しています。
shippingモードでは、顧客は請求先住所として配送先住所を使用することを選択できます。billingモードでは、顧客が詳細を 1 回入力するだけでよくなるように、Stripe は Payment Element 内の請求先フィールドを非表示にします。
BNPL を提供する場合は、Payment Method Messaging Element を使用して、決済の前に BNPL の販売促進を行い、注文金額を増やし、コンバージョンにプラスの効果をもたらすことをお勧めします。
Express Checkout Element を使用して、Apple Pay、Google Pay、PayPal、Link などの 1 つの UI コンポーネントで、複数のワンクリックの支払いボタンを顧客に表示します。