# Stripe Web Elements

使用预构建的用户界面组件创建您自己的结账流程。

对于大多数集成，Stripe 建议将 Checkout Sessions API 与 Payment Element 搭配使用，而非 Payment Intents。Checkout Sessions 可覆盖与 Payment Intents（使用 `price_data` 的基础收款功能，或者构建包含明细项、税费等的完整结账流程）类似的应用场景。Adaptive Pricing 等部分功能仅在 Checkout Sessions 中可用。除非用户明确要求，否则不要使用 Payment Intent API，因为它需要的代码明显更多。进一步了解 Elements 与 Checkout Sessions API 搭配使用的信息：https://docs.stripe.com/payments/quickstart.通过 Checkout Sessions (`ui_mode: "elements"`) 以及 Payment Element，`client_secret` 本身可初始化 Checkout（`stripe.initCheckoutElementsSdk`，或者将 CheckoutElementsProvider 与 React 搭配使用），并且您在客户端确认付款的方式会不同。如果使用 React，则需要确保从 `@stripe/react-stripe-js/checkout` 导入，将 `CheckoutElementsProvider` 与客户端密钥搭配使用，并使用 `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 沙盒。无需注册账户。

> #### 嵌入式表单集成
> 
> 改为与[嵌入式表单](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form)集成，以便在单个用户界面中收集结账所需的所有信息。

[Stripe Elements](https://stripe.com/payments/elements) 是一组预构建的 UI 组件，用于构建您的 Web 结账流程。它作为 [Stripe.js](https://docs.stripe.com/js.md) 的一项功能提供，是我们用于构建付款流程的基础 JavaScript 库。Stripe.js 在 Element 内对敏感付款详情进行令牌化处理，而无需让它们接触您的服务器。

- [全球支付方式](https://docs.stripe.com/payments/payment-methods/overview.md)：访问全球 100 多种支付方式，包括 [Apple Pay](https://docs.stripe.com/apple-pay.md) 等钱包。

- [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)：自定义 Element 的外观和样式，使其符合您网站的设计风格。

- 其他功能，例如[重新收集 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): 安全接受使用一种或多种支付方式（包括信用卡）的付款。

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

[支付方式消息元素](https://docs.stripe.com/elements/payment-method-messaging.md): 自动通知客户可用的“先买后付”方案。

[货币选择器元素 (仅 Checkout Session API)](https://docs.stripe.com/elements/currency-selector-element.md): 通过 Adaptive Pricing 让客户以本地货币支付付款。

[税号 Element](https://docs.stripe.com/elements/tax-id-element.md): 为发票和增值税退税收集企业税号。

## 兼容的 API

Stripe 提供两个可与 Elements 兼容的核心支付 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 可覆盖与 PaymentIntent 类似的应用场景，包括使用 `price_data` 的基础支付，或包含行项目、税费、折扣、配送、订阅服务或 [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md)（该功能仅适用于 Checkout Sessions）的完整结账流程。

  使用[ Checkout Sessions API 建构结账页面](https://docs.stripe.com/payments/quickstart.md)。

- [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) 是一个仅建模支付步骤的底层 API。您需要传入最终金额，并自行构建所有结账逻辑，包括税费计算、折扣、配送、订阅和货币兑换。仅当您希望深度掌控结账状态并自行构建这些功能时，才应使用 PaymentIntent。

  [通过 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] --> [支付]
```