收款

安全地在线上收款。

制作支付表单或使用预构建的结账页面来开始接收线上付款。

通过在您的网站上嵌入 UI 组件，使用 Stripe Elements 构建自定义的支付集成。看看这个集成与 Stripe 的其他集成类型的对比情况。

客户端侧面和服务器端代码构建接受各种支付方式的结账表单。

要查看 Link 对复购用户的运作方式，请输入邮件地址 demo@stripe.com。要在新注册过程中查看 Link 的运作方式，请输入其他邮件地址，并填写表单的其余部分。仅当您的任一钱包绑定了有效的卡时，演示中才会显示 Google Pay 或 Apple Pay。

集成难度

API

集成类型

将 UI 组件组合到自定义支付流程

用户界面自定义

使用 Appearance API 进行 CSS 级定制

想了解如何使用 Stripe Tax、折扣、配送或货币兑换？

Stripe has a Payment Element integration that manages tax, discounts, shipping, and currency conversion for you. See build a checkout page to learn more.

设置 Stripe
服务器端

首先，创建 Stripe 账户或登录。

用我们的官方库从您的应用程序访问 Stripe API：

创建 PaymentIntent
服务器端

注意

如果您想在不先创建 PaymentIntent 的情况下呈现 Payment Element，请参阅收集支付详情后再创建 Intent。

PaymentIntent 对象用来表示您从客户收款的意图，跟踪扣款尝试及整个过程中的状态变化情况。

创建 PaymentIntent

在您的服务器上创建 PaymentIntent，设置好 amount 和 currency。在最新版的 API 中，可以选择性指定 automatic_payment_methods 参数，因为 Stripe 会默认开启其功能。您可以从管理平台管理支付方式。Stripe 根据交易金额、货币和支付流程等因素处理符合条件的支付方式的退货。

Stripe 使用您的支付方式设置显示您启用的支付方式。要查看您如何向客户显示支付方式，请在管理平台中输入交易 ID 或设置订单金额和货币。要覆盖支付方式，用 payment_method_types 属性手动列出您想要启用的支付方式。

注意

始终在服务器端决定扣款金额，这是一个可信的环境，客户端不行。这样可防止客户自己选择价格。

检索客户端私钥

PaymentIntent 中包含的是一个客户端私钥，用于在客户端安全地完成支付流程。有不同的方法可以将客户端私钥传递到客户端。

使用浏览器的 fetch 功能，从您的服务器上的端点获取客户端私钥。如果您的客户端是单页应用，特别是用现代的前端框架（例如 React）搭建的情况，则该方法最为合适。创建服务于客户端私钥的服务器端点：

然后在客户端用 JavaScript 获取客户端私钥：

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

收集付款详情
客户端

用 Payment Element 在客户端收集支付信息。Payment Element 是一个预构建的 UI 组件，它简化了多种支付方式的收集支付详情的流程。

Payment Element 中包含一个 iframe，它通过一个 HTTPS 连接安全地将支付信息发送到 Stripe。避免将 Payment Element 放在另一个 iframe 中，因为有些支付方式需要重定向到另一个页面进行付款确认。

如果您确实选择使用 iframe 并想要接受 Apple Pay 或 Google Pay，则 iframe 必须要将 allow#attr-allowpaymentrequest) 属性设置为等于 "payment *"。

结账页面上的地址也必须以 https:// 开头，不能是 http://，否则您的集成不能工作。您可以在不使用 HTTPS 的情况下测试您的集成，准备好进行真实收款时将它启用。

设置 Stripe.js

Payment Element 自动可以获取，这是 Stripe.js 的功能。在您的结账页面包含 Stripe.js 脚本，方法是将它添加到您的 HTML 文件的 head 部分。为保持 PCI 合规，始终从 js.stripe.com 加载 Stripe.js。不要把脚本打包或自行保留副本。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

用下面的 JavaScript 在您的结账页面创建一个 Stripe 实例：

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

将 Payment Element 添加到您的支付页面

Payment Element 需要存在于您的支付页面的某个地方。用您的支付表单中的唯一 ID 创建一个空的 DOM 节点（容器）：

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

加载了之前的表单后，创建一个 Payment Element 实例，并将它放入容器的 DOM 节点。创建 Elements 实例时，将上一步的 client secret 传入 options：

认真处理客户端私钥，因为它会完成收款。不要记录它，而是把它嵌入到 URL，或显示给除客户以外的所有人。

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element 呈现一个动态表单，您的客户可在这里选择一个支付方式。对于每个支付方式，表单会自动请求客户填写必要的支付详情。

自定义外观

您可以自定义 Payment Element，使其匹配您网站的设计风格，方法是在创建 Elements 提供程序时向 options 传递外观对象。

收集地址

默认情况下，Payment Element 仅收集必要的账单地址信息。收集客户完整的账单地址（例如，计算数字商品和服务的税额）或收货地址时，使用 Address Element。

申请 Apple Pay 商家令牌

如果您已将集成配置为接受 Apple Pay 付款，则我们建议将 Apple Pay 接口配置为返回商家令牌，以支持商家发起的交易 (MIT)。在 Payment Element 中请求相关商家令牌类型。

可选保存并检索客户支付方式

您可以配置 Payment Element 来保存客户的支付方式以备将来使用。本部分向您展示如何集成保存的支付方式功能，从而让 Payment Element：

提示买家同意保存支付方式
买家同意时，存储支付方式
向买家显示已存储的支付方式，以方便日后购物使用
买家更换时自动更新丢失或过期的银行卡

保存支付方式

复用以前保存的支付方式。

允许在 Payment Element 中保存支付方式

在您的服务器上创建 PaymentIntent 时，还要通过提供 Customer ID 并为您的会话启用 payment_element 组件来创建一个 CustomerSession。配置要启用的已保存支付方式的 features。例如，启用 payment_method_save 会显示一个复选框，可供客户保存其支付信息以备将来使用。

您可以在 PaymentIntent 或 Checkout Session 中指定 setup_future_usage，以覆盖保存支付方式的默认行为。这可以确保您自动保存支付方式以备将来使用，即使客户未明确选择保存它。

注意

允许买家通过启用 payment_method_remove 来移除其已保存的支付方式会影响依赖该支付方式的订阅。移除支付方式会将 PaymentMethod 与该 Customer 分离。

您的 Element 实例使用 CustomerSession 的客户端私钥来访问该客户保存的支付方式。创建 CustomerSession 时正确处理错误。如果发生错误，您不需要向 Element 实例提供 CustomerSession 客户端私钥，因为它是可选的。

使用PaymentIntent 和 CustomerSession 的客户端私钥创建 Element 实例。然后，用这个 Element 实例创建一个 Payment Element。

checkout.js
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

确认 PaymentIntent 时，Stripe.js 会自动控制 PaymentIntent 上的 setup_future_usage 设置和 PaymentMethod 上的 allow_redisplay，具体取决于客户是否勾选保存其付款详情的框。

强制重新收集卡安全码 (CVC)

可以选择在 when creating the PaymentIntent 指定 require_cvc_recollection，以在客户用银行卡支付时强制重新收集 CVC。

检测选择的已保存支付方式

要在选择了保存的支付方式时控制动态内容，请侦听 Payment Element change 事件（该事件会填充上所选的支付方式）。

checkout.js
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

可选结账页面中的链接
客户端

通过在 Payment Element 中使用 Link，让您的客户更快结账。您可以自动填充任何已使用 Link 的已登入客户的信息，无论他们之前是否在其他商家那里的 Link 中保存过支付信息。默认的 Payment Element 会默认在银行卡表单中包含 Link。要在 Payment Element 中管理 Link，请前往您的支付方式设置。

收集客户电子邮件地址以进行 Link 验证或注册

集成选项

有两种方法可以将 Link 与 Payment Element 进行集成。其中，Stripe 建议将客户电子邮件地址传递给 Payment Element（如果可用）。选择这些选项时，请一定要考虑您的结账流程的工作机制：

集成选项	结账流程	描述
传递客户的电子邮件地址至 Payment Element Recommended	您的客户在登入结账页面前先输入他们的电子邮件地址（例如，在之前的账户创建步骤）。您偏向于使用自己的电子邮件输入栏。	程序化地将客户的电子邮件地址传递给 Payment Element。在该场景中，客户直接在支付表单中通过身份验证进入 Link，而非在单独的用户界面组件中。
在 Payment Element 中收集客户的电子邮件地址	您的客户在结账时输入他们的电子邮件地址，并直接在 Payment Element 中验证或注册 Link。	如果客户尚未注册 Link，但他们在 Payment Element 中选择了受支持的支付方式，则系统会提示他们使用 Link 保存详细信息。对于那些已经注册的用户，Link 会自动填充他们的支付信息。

可选从服务器获取更新
客户端

呈现了 Payment Element 之后，您可能想更新 PaymentIntent 的属性，例如 amount（例如，折扣码或运费）。您可以在您的服务器上 update the PaymentIntent，然后调用 elements.fetchUpdates 来查看 Payment Element 中反映的金额。该例显示了如何创建更新 PaymentIntent 上的金额的服务器端点：

该例演示了如何更新 UI 来在客户端体现这些变化。

(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();

向 Stripe 提交付款
客户端

使用 stripe.confirmPayment，用来自 Payment Element 的详情完成付款。为该函数提供一个 return_url，告诉 Stripe 在用户完成付款后将他们重定向到哪里。您的用户可能会先被重定向到一个中间站点，如银行授权页面，然后才被重定向到 return_url。付款成功时，银行卡付款将立即重定向到 return_url。

如果您不想在完成付款后对银行卡付款重定向，可以将重定向设置到 if_required。这样就会只重定向使用基于重定向的支付方式结账的客户。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

确保 return_url 对应于您网站上显示付款状态的一个页面。Stripe 将客户重定向到 return_url 时，我们会提供以下 URL 查询参数。

参数	描述
`payment_intent`	`PaymentIntent` 的唯一标识符。
`payment_intent_client_secret`	`PaymentIntent` 对象的 client secret。

注意

如果您有可以用来跟踪客户浏览器会话的工具，则您可能需要将 stripe.com 域名添加到推荐人列表。重定向会导致一些工具创建新的会话，从而阻止您跟踪完整的会话。

用以下某个查询参数检索 PaymentIntent。检查 PaymentIntent 的状态，以决定向客户显示的内容。您还可以在提供 return_url 时附加自己的查询参数，它们会在重定向过程中持续存在。

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

处理付款后事件
服务器端

付款完成时，Stripe 会发送一个 payment_intent.succeeded 事件。使用管理平台 Webhook 工具、或按照 Webhook 指南来接收这些事件并运行操作，例如，向客户发送订单确认邮件、在数据库中记录订单，或启动配送流程。

侦听这些事件，而不是等待客户端回调。在客户端，客户可能会在执行回调之前关闭浏览器窗口或退出应用程序，并且恶意客户端可能会操纵响应。设置您的集成来侦听异步事件，这样才能用单一集成用用接受不同类型的支付方式。

除了处理 payment_intent.succeeded 事件外，建议在使用 Payment Element 收款时也处理其他的这些事件：

事件	描述	操作
payment_intent.succeeded	客户成功完成付款时发送。	向客户发送订单确认通知，并履行他们的订单。
payment_intent.processing	当客户成功发起付款但并未完成时发送。当客户发起银行借记时，通常会发送此事件。之后将会出现 `payment_intent.succeeded` 或 `payment_intent.payment_failed` 事件。	向客户发送订单确认，告知他们的付款正等待处理。对于数字商品，您可能想先履行订单，然后再等付款完成。
payment_intent.payment_failed	在客户尝试付款但付款失败时发送。	如果一笔付款从 `processing` 变为 `payment_failed`，则让客户再尝试一次。

测试您的集成

要测试您的自定义支付集成：

创建 Payment Intent 并检索客户端私钥。
使用下表中的方法填写付款详情。
- 输入一个任意的未来日期作为有效期。
- 输入 3 位数 CVC（银行卡安全码）。
- 输入账单地址邮编。
向 Stripe 提交付款。您将被重定向到您的 return_url。
前往管理平台，在付款页面上查找付款。如果您付款成功，就会在列表中看到它。
点击您的付款，查看更多详情，例如账单信息及已购商品列表。您可以此信息来履行订单。

了解有关测试您的集成的更多信息。

卡号	场景	如何测试
	该卡付款成功，不需要验证。	使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
	该卡付款时需要验证。	使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
	该卡被拒绝，显示拒付代码，例如 `insufficient_funds`。	使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
	银联卡的长度为 13-19 位。	使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。

有关测试您的集成的更多信息，请参阅测试部分。

可选添加更多支付方式

Payment Element 默认支持很多种支付方式。需进行额外步骤才能启用并显示某些支付方式。

Affirm

开始使用 Affirm 时，必须在管理平台中启用它。用 Affirm 支付方式创建 PaymentIntent 时，您需要包含收货地址。该例建议在客户选择了他们的支付方式后在客户端传递配送信息。进一步了解如何通过 Stripe 使用 Affirm。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US',
        },
      },

    },
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (e.g., payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

测试 Affirm

了解如何通过下表测试不同场景：

场景	如何测试
您的客户通过 Affirm 成功付款。	填写表单（务必包含收货地址）并授权付款。
您的客户未在 Affirm 重定向页面进行验证。	填写表单，然后在重定向页面上点击测试付款失败。

Afterpay (Clearpay)

用 Afterpay 支付方式创建 PaymentIntent 时，您需要包含收货地址。进一步了解如何通过 Stripe 使用 Afterpay。

您可以从管理平台管理支付方式。Stripe 根据交易金额、货币和支付流程等因素处理符合条件的支付方式的退货。下面的例子使用了 automatic_payment_methods 属性，但您可以用 payment method types 列出 afterpay_clearpay。在最新版的 API 中，可以选择性指定 automatic_payment_methods 参数，因为 Stripe 会默认开启其功能。无论您选择哪个选项，一定要在管理平台中启用 Afterpay Clearpay。

测试 Afterpay (Clearpay)

了解如何通过下表测试不同场景：

场景	如何测试
您的客户通过 Afterpay 成功付款。	填写表单（务必包含收货地址）并授权付款。
您的客户未在 Afterpay 重定向页面进行验证。	填写表单，然后在重定向页面上点击测试付款失败。

Apple Pay 和 Google Pay

当您启用银行卡支付时，我们会为环境符合电子钱包显示条件的客户显示 Apple Pay 和 Google Pay。要接受这些电子钱包的支付，您还必须：

在您的支付方式设置中启用它们。Apple Pay 默认启用。
在 HTTPS 的开发和生产环境中为您的应用服务。
注册您的域名。
如果您更新 PaymentIntent 的金额，请从服务器获取更新以保持电子钱包的支付模态同步。

区域测试
印度

Stripe Elements 不支持印度 Stripe 账户和客户的 Google Pay 或 Apple Pay。因此，如果测试者的 IP 地址在印度，您就不能测试您的 Google Pay 或 Apple Pay 集成，即使 Stripe 账户是在印度境外开立的也一样。

进一步了解如何通过 Stripe 使用 Apple Pay 和 [Google Pay](/google-pay](/google-pay)。

ACH 直接借记

通过ACH 直接借记支付方式使用 Payment Element 时，按照以下步骤操作：

创建 Customer 对象。
Command Line
选择语言
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :"

在创建 PaymentIntent 时指定客户 ID。

选择一个验证方式。

通过 Payment Element 使用 ACH 直接借记支付方式时，您只能选择 automatic 或 instant。

进一步了解如何通过 Stripe 使用 ACH 直接借记。

测试 ACH 直接借记

场景	如何测试
您的客户通过即时验证方式成功用美国银行账户完成付款。	选择美国银行账户并填写表单。点击测试机构。按照模态上的说明关联您的银行账户。点击您的付款按钮。
您的客户通过微存款方式成功用美国银行账户完成付款。	选择美国银行账户并填写表单。点击改为手动输入银行详情。按照模态上的这些说明关联您的银行账户。您可以使用这些测试账号。点击您的支付按钮。
您的客户在完成银行账户关联过程时会失败。	选择美国银行账户并点击测试机构或改为手动输入银行详情。关闭模态，不要完成它。

BLIK

结合使用 Payment Element 与 BLIK 时，用户可以关闭提示他们在其银行应用程序中授权付款的模态。这将触发向您的 return_url 重定向的操作，不会将客户返回到结账页面。进一步了解如何通过 Stripe 使用 BLIK。

处理用户关闭模态的情况时，在您的 return_url 的服务器端处理程序上，观察 Payment Intent 的 status，看它是 succeeded 还是仍然为 requires_action（说明用户在未授权的情况下关闭了模态），然后根据实际情况酌情处理。

二维码支付方式

通过特定支付方式（微信支付、PayNow、Pix、PromptPay、Cash App Pay）的二维码使用 Payment Element 时，用户可关闭二维码模态。这将触发向您的 return_url 重定向的操作，不会将客户返回到结账页面。

处理用户关闭二维码模态的情况时，在您的 return_url 的服务器端处理程序上，观察 Payment Intent 的 status，看它是 succeeded 还是仍然为 requires_action（说明用户在未支付的情况下关闭了模态），然后根据实际情况酌情处理。

或者，可通过传递高级可选参数 redirect=if_required，它可以防止在管理二维码模态时进行重定向，进而可防止自动重定向到您的 return_url。

Cash App Pay

Payment Element 在桌面网页或移动端网页中以不同的方式呈现动态表单，因为它使用的是不同的客户身份验证方式。进一步了解如何通过 Stripe 使用 Cash App Pay。

Cash App Pay 是一种基于重定向的移动端网页支付方式。它会将您的客户重定向到真实模式下的 Cash App 或测试模式下的测试页面。完成付款后，无论您是否设置了 redirect=if_required，它们都会被重定向到 return_url。

PayPal

要使用 PayPal，请务必使用注册域名。

向您的客户披露 Stripe

Stripe 收集有关客户与 Elements 互动的信息，以向您提供服务、防范欺诈并改进其服务。这包括使用 Cookie 和 IP 地址来识别客户在单次结账会话中看到的 Elements。您有责任披露并获得 Stripe 以这些方式使用数据所需的所有权利和许可。有关更多信息，请访问我们的隐私中心。