Stripe Payment Element

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

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

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

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Checkout Sessions include customer information, shipping, tax, discounts, coupons, and payments integrations, while Payment Intents only handle payments integration.

使用 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

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