Stripe Payment Element
Payment Element 是一个 Web UI 组件，接受 40 多种支付方式，可验证输入，并处理错误。可以单独使用它，也可以与 Web 应用前端的其他元素一起使用。
要亲自尝试 Payment Element，请从以下示例之一开始：
创建 Payment Element
该代码 创建 一个 Payment Element，并将它 挂载 到 DOM：
const stripe = Stripe(); const appearance = { /* appearance */ }; const options = { /* options */ }; const elements = stripe.elements({'pk_test_TYooMQauvdEDq54NiTphI7jx', appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element');clientSecret
用 Payment Element 收款时需要额外的后端代码。请参阅 快速指南 或 示例应用 ，了解其运作机制。
组合元素
Payment Element 与其他元素交互操作。例如，这个表单使用一个附加元素来 自动填充结账详情 ，使用另一个元素来 收集收货地址 。
有关此 Link 示例的完整代码，请查看 将 Link 添加到 Element 集成应用 。
支付方式
Payment Element 显示每一种已激活的可用支付方式。
- 某些支付方式 需要在管理平台中激活 。
- 支付方式不支持当前付款的货币或条款时不可用。
它根据与客户所在地和地区的相关性对这些支付方式进行排序。
例如，如果是德国客户，用欧元支付，他们会看到所有接受欧元的有效支付方式，最先列出的是德国广泛使用的支付方式。
按照与客户相关的顺序显示支付方式
您也可以覆盖其中的一些行为。要自行控制支付方式，查看 自定义支付方式
版面配置
您可以自定义 Payment Element 的布局来适应您的结账流程。下图是用不同的布局配置呈现的相同 Payment Element。
不同布局的 Payment Element。
外观
使用 Appearance API 控制所有元素的样式。选择主题或更新具体详情。
例如，选择“扁平”主题，并覆盖主文本颜色。
const stripe = Stripe(); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } };'pk_test_TYooMQauvdEDq54NiTphI7jx'
查看 Appearance API 文档，查看主题和变量的完整列表。
选项
Stripe Element 支持的选项不止这些。例如，用 business 选项显示您的商家名称。
const stripe = Stripe(); const appearance = { /* appearance */}; const options = { business: "RocketRides" };'pk_test_TYooMQauvdEDq54NiTphI7jx'
Payment Element 支持以下选项。查看每个选项的参考条目，以了解更多信息。
| layout | Payment Element 的布局。 |
| defaultValues | 在 Payment Element 中显示的初始客户信息。 |
| business | 在 Payment Element 中显示的有关您的业务的信息。 |
| paymentMethodOrder | 支付方式的列出顺序。 |
| fields | 是否显示特定字段。 |
| readOnly | 是否可修改支付详情。 |
| terms | Payment Element 中是否显示授权或其他法律协议。默认行为是仅在必要时显示它们。 |
| wallets | 是否显示 Apple Pay 或 Google Pay 等钱包。默认是尽可能显示它们。 |