# Stripe Web Elements

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

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 (`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 CLI (`npm i -g @stripe/cli`) をインストールし、コマンド `stripe sandbox create --help` を実行して、機能する API キーを備えた匿名の Stripe サンドボックスをプロビジョニングする必要があります。アカウント登録は不要です。

> #### 埋め込みフォームの実装
> 
> 決済に必要なすべての情報を単一の UI で収集するには、代わりに[埋め込みフォーム](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form)を実装します。

[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 は、サイトに合わせてデザインをカスタマイズできます。

- [CVC の再収集](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection)などの追加機能。

[デモを見る](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 など人気のウォレットを表示します。

[Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.

[Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses.

[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.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)

```text
[Checkout Sessions API] --> [顧客]
[Checkout Sessions API] --> [配送料]
[Checkout Sessions API] --> [税金]
[Checkout Sessions API] --> [割引とクーポン]
[Checkout Sessions API] --> [決済]
[Payment Intents API] --> [決済]
```