Stripe Payment Element

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

Payment Element 是 Web 的一个 UI 组件，接受 40 多种支付方式，它可以验证输入的内容，并处理错误。可以单独使用，也可以与 Web 应用前端的其他元素一起使用。

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

兼容的 API

Stripe 提供两个与 Element 兼容的核心支付 API，让您可以灵活地接受客户的各种支付类型。您可以将这些 API 集成到 Stripe 的预构建支付界面中。虽然我们建议大多数用户使用 Checkout Session，但它们提供的用例略有不同，具体取决于您选择如何构建结账流程以及所需的控制程度。您可以使用 Checkout Session API 构建结账页面，也可以使用 Payment Intents API 构建高级集成。

Checkout Sessions API 允许您对客户的结账流程进行建模。这包括其购买中包含的行项目、账单地址和收货地址、适用税率以及优惠券或折扣。通过 Checkout Session，您可以创建订阅、使用 Stripe Tax 计算税率以及发起付款。
Payment Intents API 允许您对支付步骤进行建模。与要求行项目详情的 Checkout Sessions API 不同，您只需传递想要收取的最终金额。这适用于付款流程，例如会话外付款。如果希望使用 Stripe 来计算适用的税费或创建订阅，则必须分别集成 Stripe Tax API 或 Subscriptions API。

Checkout Session 包括客户信息、配送、税收、折扣、优惠券和支付集成，而 Payment Intent 仅处理支付集成。

使用 Payment Element 构建结账页面

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

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

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

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

HTML · React · Vue

查看 Stripe.js 参考

组合元素

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

注意

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

一个带有联系信息、收货地址和支付字段的表单。联系信息被标记为 Link Authentication Element，收货地址被标记为 Link Authentication Element，支付字段被标记为 Payment Element

有关此示例的完整代码，请查看向 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

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