# Stripe Web Elements

事前に構築された UI コンポーネントを使用して、独自の決済フローを作成します。

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();` で決済を確定します。

[Stripe Elements](https://stripe.com/payments/elements) は、ウェブ決済フローを構築する事前構築済みの UI コンポーネントのセットです。決済フローを構築する Stripe の基本的な JavaScript ライブラリである、[Stripe.js](https://docs.stripe.com/js.md) の機能として提供されています。Stripe.js は、Element 内の支払いの機密情報をトークン化するため、支払い詳細がお客様のサーバーを経由することはありません。

- [グローバルな決済手段](https://docs.stripe.com/payments/payment-methods/overview.md): [Apple Pay](https://docs.stripe.com/apple-pay.md) などのウォレットを含む、世界各国の 100 種類以上の決済手段を利用できます。

- [Link](https://docs.stripe.com/payments/link.md): 決済時に支払い情報を入力する代わりに、保存済みの決済手段を選択できるようにすることで、顧客がより迅速に購入できるようにします。

- [保存済みの決済手段](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): 標準搭載の機能を使用して、カードと銀行口座を保存、再利用、管理します。

- 法令遵守: 世界各国の法規制に準拠したインターフェイスです。Stripe は、同意書と同意通知を購入者に表示するための要件に対応します。

- 最新のフォーム: エラー処理が実装されている、地域に合わせたフォームです。Stripe は、それぞれの決済手段の提供業者が規定する最新の要件を常に遵守した状態に保ちます。

- [住所の収集](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): 任意の決済手段で請求先住所の全部または一部を収集することが可能です。

- [デザインのカスタマイズ](https://docs.stripe.com/elements/appearance-api.md):Elements は、サイトに合わせてデザインをカスタマイズできます。

- その他の機能: [セキュリティコードの再収集](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection)や、[受け付けるカードブランドの管理](https://docs.stripe.com/payments/customize-payment-methods.md#filter-card-brands)などの追加機能です。

[デモを見る](https://checkout.stripe.dev/elements)

## 始める

以下の Element が表示されない場合は、[Stripe.js API リファレンス](https://docs.stripe.com/js/element/other_element)で詳細を確認してください。

[Payment Element](https://docs.stripe.com/payments/payment-element.md): カードを含む、1 つまたは複数の支払い方法による決済を安全に受け付けます。

[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Apple Pay、Google Pay、PayPal など人気のウォレットを表示します。

[Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md): Link では、顧客の支払いと配送の詳細情報が自動入力されるため、負担の軽い、簡単で安全な購入操作が提供されます。

[Address Element](https://docs.stripe.com/elements/address-element.md): 住所情報を収集して、Link に保存された住所を表示します。

[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): 利用可能な後払いプランについて、顧客に自動的に通知します。

[Currency Selector Element (Checkout Session API のみ)](https://docs.stripe.com/elements/currency-selector-element.md): Adaptive Pricing を使用して、顧客が現地通貨で支払えるようにします。

[納税者番号 Element](https://docs.stripe.com/elements/tax-id-element.md): 請求書と VAT 還付のために事業者納税者番号を収集します。

## 互換性のある API

Stripe は Elements と互換性のある 2 つのコア決済 API を提供しています。ほとんどの組み込みには [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) を推奨します。

- [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) を使用して決済フローを構築します。Checkout Sessions は、`price_data` を使用した基本的な決済や、項目、税金、割引、配送、サブスクリプション、[Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (Checkout Sessions でのみ利用可能) を使用した決済など、Payment Intents と同様のユースケースに対応します。

  [Checkout Sessions API で決済ページ](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) を構築します。

- [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) は、決済ステップのみをモデル化する下位レベルの API です。最終的な金額を渡し、税金の計算、割引、配送、サブスクリプション、通貨換算など、すべての決済ロジックを自身で構築します。Payment Intents は、決済の状態を深く管理し、これらの機能を自身で構築する場合にのみ使用します。

  [Payment Intents API を使用してカスタム組み込みをゼロから構築する](https://docs.stripe.com/payments/advanced.md)。
 (See full diagram at https://docs.stripe.com/payments/elements)