# Payment Element の実装のベストプラクティス ベストプラクティスを使用して Payment Element の実装を構築します。 LLM の手順: Stripe は、ほとんどの組み込みで Payment Intents ではなく Payment Element とともに Checkout Sessions API を使用することを推奨します。Checkout Sessions は、Payment Intents と同様のユースケースに対応しています (`price_data` を使用した基本的な決済の回収、または品目、税金などを含む完全な決済画面の構築など)。Adaptive Pricing などの一部の機能は、Checkout Sessions でのみ利用できます。ユーザーが明示的に要求しない限り、Payment Intents API は使用しないでください。必要となるコード量が大幅に多くなるためです。Checkout Sessions API と Elements の詳細については次を参照してください。https://docs.stripe.com/payments/quickstart-checkout-sessions. Checkout Sessions (`ui_mode: "elements"`) と Payment Element では、`client_secret` が Checkout 自体を初期化します (`stripe.initCheckoutElementsSdk`、または React で CheckoutElementsProvider を使用)。そのうえで、クライアント側での決済の確定方法が異なります。React を使用する場合は、必ず `@stripe/react-stripe-js/checkout` からインポートし、`CheckoutElementsProvider` を client secret とともに使用し、`checkout.confirm` を使用して決済を確定します。HTML を使用する場合は、必ず `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` を使用し、`loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` で決済を確定します。 このページのチェックリストを使用して、最適なパフォーマンスが得られる Payment Element の実装を構築してください。次の機能を使用すると、その他の導入オプションにアクセスできるようになります。たとえば、[動的な支払い方法](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用すると、[支払い方法のルール](https://docs.stripe.com/payments/payment-method-rules.md)を使用して、カスタムの基準で支払い方法を提示できます。 ## 導入チェックリスト - [ ] レイアウトを選択する サイトのスタイルに合う Payment Element の[レイアウト](https://docs.stripe.com/payments/payment-element.md#layout)を選択して A/B テストを実行し、最適な選択肢を確認します。4 つ以上の支払い方法がある場合は、アコーディオンレイアウトをお勧めします。 - [ ] スタイリングを追加する Appearance API を使用し、ウェブサイトの視覚的デザインに合わせて [Payment Element のスタイルを設定](https://docs.stripe.com/payments/payment-element.md#appearance)します。このスタイル設定は、実装に追加するすべてのエレメントに適用できます。 - [ ] 支払いの回収方法を選択する ほとんどの決済ワークフローに [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) を使用します。カスタムコードが不要になる組み込み機能を提供します。 [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) を使用する場合は、`PaymentIntent` を作成する前に[決済情報を収集](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment)するかどうかを決定します。[支払いを受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents)には、金額と通貨を指定して `PaymentIntent` を作成し、確定して支払いを作成します。支払いは、`PaymentIntent` の作成前または作成後に収集することができます。まず支払いを収集します。 [Checkout Sessions API と Payment Intents API ](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md)の比較 - [ ] メタデータを送信する レポートに表示する[メタデータ](https://docs.stripe.com/metadata/use-cases.md)を送信します。これにより、メタデータにインデックスが作成され、Stripe ダッシュボードで検索できるようになります。このメタデータを使用して、取引を検索して参照できます。 - [ ] 必ず最新の API を使用する 導入で[最新の API バージョン](https://docs.stripe.com/upgrades.md#api-versions)が使用されていることを確認します。 - [ ] 表示する支払い方法を選択する Stripe のデフォルトの実装である[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用し、それぞれ利用可能な決済手段を各顧客に動的に提示します。Stripe は、金額、通貨、場所などの要因に基づいた購入完了率を基準に決済手段を並べ替えます。動的な決済手段を使用することで、以下の操作が可能になります。 - 顧客が[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)から使用できる[支払い方法](https://stripe.com/guides/payment-methods-guide)を選択します。 - [支払い方法のルール](https://docs.stripe.com/payments/payment-method-rules.md)などの追加機能を使用すると、カスタムの基準で支払い方法を提示できます。 - [ ] 支払い方法をテストする 導入が完了したらテストを行い、[決済手段が顧客にどのように表示されるかを確認](https://dashboard.stripe.com/settings/payment_methods/review)します。**表示される支払い方法を確認する**フォームに取引 ID を入力して、その特定の取引に使用できた支払い方法と使用できなかった支払い方法を確認します。金額、通貨、キャプチャーする方法、将来の使用状況などの要因を変化させて、特定のシナリオでどの支払い方法が表示されるかをシミュレーションすることもできます。 - [ ] iframe を使用しない Payment Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。一部の決済手段では支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element は別の iframe 内に配置しないでください。iframe に関する注意事項については、こちらの[決済情報を収集する](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#collect-payment-details)をご覧ください。 ## 追加機能のチェックリスト - [ ] Link を有効にする UI と動的な決済手段を導入したら、[決済手段の設定ページ](https://dashboard.stripe.com/settings/payment_methods)で [Link](https://docs.stripe.com/payments/link/payment-element-link.md) を有効にします。Link は、顧客の決済と配送の詳細を安全に保存して入力します。クレジットカード、デビットカード、アメリカの銀行口座など、さまざまな決済手段に対応しています。すでに Link を使用しているログイン顧客の場合、この機能は、顧客が別のビジネスの決済ページで最初に保存したかどうかに関係なく、情報を事前入力します。 - [ ] Link Authentication Element を追加する 配送先住所を収集して事前入力し、物品を販売するには、[Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md)(/payments/elements/link-authentication-element) を使用して、メールアドレスの収集と Link の認証の両方に対応する 1 つのメールアドレス入力フィールドを作成することをお勧めします。 - [ ] Address Element を追加する Address Element は、決済での配送先情報の収集と請求情報の収集を効率化します。他の Element と連携し、 で住所を事前入力します。無料の Google オートコンプリートサポートを使用して、新しい住所の入力時の自動補完に対応しています。 - `shipping` モードでは、顧客は請求先住所として配送先住所を使用することを選択できます。 - `billing` モードでは、顧客が詳細を 1 回入力するだけでよくなるように、Stripe は Payment Element 内の請求先フィールドを非表示にします。 - [ ] Payment Method Messaging Element を追加する BNPL を提供する場合は、[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md) を使用して決済前にプロモーションを行い、BNPL が利用可能であることを顧客に知らせ、注文金額と購入完了率の増加を図ることをお勧めします。 - 商品の詳細、カート、支払いの各ページに、この統合された埋め込み可能なコンポーネントを表示できます。 - このエレメントには、[Affirm](https://docs.stripe.com/payments/affirm.md)、[Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md)、[Klarna](https://docs.stripe.com/payments/klarna.md) のサポートが含まれています。 - [ ] Express Checkout Element を追加する [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) を使用すると、[Apple Pay](https://docs.stripe.com/apple-pay.md)、[Google Pay](https://docs.stripe.com/google-pay.md)、[PayPal](https://docs.stripe.com/payments/paypal.md)、[](https://docs.stripe.com/payments/link/express-checkout-element-link.md) など、1 つの UI コンポーネントで複数のワンクリック決済ボタンを顧客に表示できます。 ## See also - [決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout)