# Payment Element

将支付方式直接嵌入到您的应用程序中。

Payment Element 是一个可自定义的嵌入式组件，能够在应用程序的任何屏幕上[嵌入支付方式列表](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md)。当客户从列表中选择支付方式时，其下方会弹出一个表单来收集支付详情。您可以自定义它以匹配您应用程序的外观和风格。应用程序内 Payment Element 可在我们的 [iOS](https://github.com/stripe/stripe-ios)、[Android](https://github.com/stripe/stripe-android) 和 [React Native](https://github.com/stripe/stripe-react-native) SDK 中使用。开始使用前，请参阅我们的[接受应用内支付](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md)指南。

> #### 美国销售数字商品的应用程序
> 
> Android apps in the US that sell digital goods can process payments in-app using the Payment Element. If you sell digital goods on iOS, see how to implement an app-to-web flow using Stripe Checkout in [Sell in-app digital goods and subscriptions](https://docs.stripe.com/mobile/digital-goods/checkout.md).
![Payment Element 集成示例](https://b.stripecdn.com/docs-statics-srv/assets/mobile-payment-element.de700c536720f40087a00fde4b958b9a.png)

Payment Element 集成示例

使用 Payment Element，您可以：

- [支持 100 多种全球支付方式](https://docs.stripe.com/payments/payment-methods/overview.md)：其中包括 Apple Pay、Link 和其他自动启用的流行支付方式。

- [动态支付方式](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)：动态排序、显示支付方式，并针对新支付方式[启动 A/B 测试](https://docs.stripe.com/payments/a-b-testing.md)。

- [用户界面定制，以匹配您的应用程序](https://docs.stripe.com/elements/appearance-api/mobile.md)：使用户界面与您的应用程序设计相匹配。布局保持一致，但可以修改颜色、字体等。

- [地址收集](https://docs.stripe.com/payments/mobile/save-during-payment.md?platform=ios&mobile-ui=payment-element#collect-payment-details)：使用任何支付方式收集全部或部分账单地址。

- [Saved payment methods](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios&type=payment#enable-saved-cards): Save, reuse, and manage cards and bank accounts. You can also [store a customer’s payment details without an initial payment](https://docs.stripe.com/payments/mobile/accept-payment.md?platform=ios&type=setup).

## Stripe App 内的 Elements 演示

扫描此二维码或使用此[链接](https://apps.apple.com/us/app/stripe-payments-showcase/id6450683352)下载互动演示应用，以演示 Stripe 应用内 Elements。在应用中，您可以生成不同的用户界面配置，以查看哪种最适合您的用例。
![Stripe 应用内支付展示 App Store 二维码](https://b.stripecdn.com/docs-statics-srv/assets/appstore_qr.ce33264690ffb3cebb2982458ccb496d.svg)

## 版面配置

在单选按钮、复选标记或浮动按钮间选择。
![Payment Element 布局选项](https://b.stripecdn.com/docs-statics-srv/assets/pe-layout.f6c429b6dfdf24d2fa144725d8435a22.png)

Payment Element 支持：单选按钮、复选标记和浮动按钮布局。

## 外观

使用 Appearance API 自定义 Payment Element 的外观和风格，与您的应用程序相匹配。Appearance API 可以调整字体、颜色、边框、阴影等。
![Payment Element 外观自定义](https://b.stripecdn.com/docs-statics-srv/assets/pe-appearance.0c2a1c5208103bcfb92b67b10dd9fb2f.png)

Payment Element 不同样式设置方式示例

## 支付方式

Payment Element 支持在 Stripe 覆盖的所有国家/地区使用 100 多种支付方式。您可以通过 Stripe 管理平台或[自定义支付方式](https://docs.stripe.com/payments/payment-methods/custom-payment-methods.md)启用支付方式。

支付方式提供商经常变更信息收集和显示要求。如果您使用 Payment Element 显示支付方式，Stripe 通过预构建的本地表单收集所有支付信息，并向各支付方式提供商更新表单的最新状态。
![Payment Element 支付方式](https://b.stripecdn.com/docs-statics-srv/assets/pe-payment-methods.91cb1be9cb8ef55b873074dd6f3a7c12.png)

Payment Element 中的 P24 和 SEPA 借记示例

## 钱包

Payment Element 支持各种常用钱包，包括 Apple Pay 和 Stripe 开发的钱包 Link。Payment Element 会以内联方式将钱包作为支付方式选项展示。
![Payment Element 钱包](https://b.stripecdn.com/docs-statics-srv/assets/pe-wallets.fed1c5ad5fbb89d74be25e02d291e25c.png)

Payment Element 中的 Link 示例

## 已保存的支付方式

Payment Element 能够保存、显示、管理已保存的支付方式，并会自动收集同意书，确保全球合规。

已保存的支付方式支持银行卡、美国银行账户和 SEPA 借记账户。

CustomerSessions API 可对以下内容提供额外控制：

- 何时显示或隐藏保存同意框
- 何时显示或隐藏已保存的支付方式
- 允许买家移除已保存的支付方式
- 阻止买家移除上次保存的支付方式
![Payment Element 保存的支付方式](https://b.stripecdn.com/docs-statics-srv/assets/pe-saved-payment-methods.6aef147c8b230f2cb50c115b2054f814.png)

客户如何在 Payment Element 中访问已保存支付方式的示例

## 收集地址详情

无论客户选择哪种支付方式，您都可以使用 Payment Element 收集更多支付信息，例如姓名、邮箱、电话号码、账单地址等。
![Payment Element 地址信息收集](https://b.stripecdn.com/docs-statics-srv/assets/pe-collecting-address-details.f806ddc435848cdf38470fb4e5adb15b.png)

显示收集的完整账单信息示例

## 其他功能

Payment Element 还包含以下功能：

- CVC 重新收集：当用户使用已保存的支付方式支付时，配置是否需要重新收集 CVC。
- [银行卡品牌筛选](https://docs.stripe.com/payments/mobile/filter-card-brands.md)：配置您接受的银行卡品牌。