Stripe Payment Element

通过一个安全可嵌入的 UI 组件，接受全球的支付方式。

The Payment Element is a UI component for the web that lets you accept more than 100 payment methods, validates input, and handles errors. Use it alone or with other elements in your web app’s front end.

仅当您的任一钱包绑定了有效的卡时，演示中才会显示 Google Pay 或 Apple Pay。

兼容的 API

Stripe 提供两种与 Elements 兼容的核心支付 API，便于您灵活接受客户的各种支付方式。可以将这些 API 集成到 Stripe 的预构建支付界面中。根据您选择的结账流程结构和所需的控制程度，这些 API 适用于不同的用例。我们建议在大多数用例中使用 Checkout Session。

使用 Checkout Sessions API 完整模拟客户结账流程，涵盖购买的行项目、账单与送货地址、适用税率以及优惠券或折扣等信息。通过 Checkout Session，您可创建订阅、利用 Stripe Tax 功能计算税率，并通过单一集成方式发起付款。
使用 Checkout Sessions API 构建结账页面。
使用 Payment Intents API 仅构建支付步骤模型，实现更精细的控制。与需要行项目详细信息的 Checkout Session API 不同，只需传入想要收取的最终金额。适用于希望手动计算最终金额的高级支付流程。使用 Payment Intents 时，如果希望使用 Stripe 计算适用税费，须使用 Stripe Tax API 构建单独的集成；如果希望使用 Stripe 创建订阅，须使用 Subscription API 构建单独的集成。
使用 Payment Intents API 构建一个高级集成。

使用 Payment Element 构建结账页面

使用 Checkout Sessions API 构建与 Payment Element 的集成应用。

构建与 Payment Element 的高级集成应用

使用 Payment Intents API 构建与 Payment Element 的集成应用。

在 GitHub 上克隆一个示例应用程序

HTML · React · Vue

查看 Stripe.js 参考

组合元素

Payment Element 与其他元素交互操作。例如，此表单使用一个附加元素来自动填充结账详情，使用另一个元素来收集收货地址。

注意

您不能移除 Link 法律协议，因为这是确保用户正确了解服务条款和隐私政策所必需的。条款对象不适用于 Link 法律协议。

包含联系信息、送货地址和支付字段的表单。联系信息标注为链接验证元素，送货地址标注为地址元素，支付字段标注为支付元素。

结合多个元素的支付表单

有关此示例的完整代码，请查看向 Elements 集成添加链接。

还可以将 Payment Element 与 Express Checkout Element 组合使用。这种情况下，Apple Pay 和 Google Pay 等钱包支付方式只会在 Express Checkout Element 中显示以避免重复。

支付方式

默认情况下，Stripe 会为您启用某些支付方式。我们可能还会在通知您后启用其他支付方式。您可以随时通过管理平台启用或禁用某些支付方式。通过 Payment Element，您可以使用动态支付方式来：

不使用代码，在管理平台中管理支付方式
根据位置、货币和交易金额等因素动态显示最相关的支付选项

例如，如果是德国客户，用欧元支付，他们会看到所有接受欧元的有效支付方式，最先列出的是德国广泛使用的支付方式。

按照与客户相关的顺序显示支付方式

若要进一步自定义付款方式的显示方式，参见自定义付款方式。若要添加非 Stripe 平台集成的付款方式，可以使用自定义付款方式。

如果您的集成要求您手动列出支付方式，请参阅手动列出支付方式。

版面配置

您可以自定义 Payment Element 的布局来适应您的结账流程。下图是用不同的布局配置呈现的相同 Payment Element。

三种结账表单示例。该图显示选项卡选项，其中客户从以选项卡方式显示的支付方式中进行选择，有时也会显示为两个折叠选项，其中支付方式垂直列出。您可以选择在折叠视图中显示或不显示单选按钮。

不同布局的 Payment Element。

选项卡布局使用选项卡水平显示支付方式。要使用此布局，请将 layout.type 的值设置为 tabs。您还可以指定其他属性，例如 layout.defaultCollapsed。

index.js
查看完整示例
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

外观

使用 Appearance API 控制所有元素的样式。选择主题或更新具体详情。

例如，选择“扁平”主题，并覆盖主文本颜色。

index.js
查看完整示例
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

参阅 Appearance API 文档，查看主题和变量的完整列表。

选项

Stripe Elements 支持的选项不止这些。例如，用 business 选项显示您的商家名称。

index.js
查看完整示例
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */};
const options = {
  business: { name: "RocketRides" }
};

Payment Element 支持以下选项。查看每个选项的参考条目，以了解更多信息。

布局	Payment Element 的布局。
defaultValues	在 Payment Element 中显示的初始客户信息。
商家	在 Payment Element 中显示的有关您的业务的信息。
paymentMethodOrder	支付方式的列出顺序。
字段	是否显示特定字段。
readOnly	是否可修改支付详情。
条款	Payment Element 中是否显示授权或其他法律协议。默认行为是仅在必要时显示它们。
钱包	是否显示 Apple Pay 或 Google Pay 等钱包。默认是尽可能显示它们。

错误

在客户确认以下错误代码期间，Payment Element 会自动显示面向客户的本地化错误消息：

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

要显示其他类型的错误的消息，请参阅错误代码和错误处理。