Stripe Payment Element

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

要亲自尝试 Payment Element，请从以下示例之一开始：

创建 Payment Element

此代码创建一个 Payment Element，并将它挂载到 DOM：

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({ 
clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

用 Payment 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。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

外观

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

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

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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

选项

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

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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