收款

安全地在线上收款。

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

使用 Stripe Checkout 在您的网站上嵌入预构建的支付表单。看看这个集成与 Stripe 的其他集成类型的对比情况。

powdur.me

集成难度

低代码

集成类型

在您的网站上嵌入预建的支付表单

用户界面自定义

限制性自定义

使用 Stripe 管理平台中的品牌设置匹配 Checkout 与您的网站设计。

首先，注册一个 Stripe 账户。

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

创建一个 Checkout Session
服务器端

从您的服务器创建一个 Checkout Session，并将 ui_mode 设置为 embedded。您可以使用 line items 配置 Checkout Session，以包括诸如 currency 之类的选项。

您还可以为现有客户创建 Checkout Session，从而用已知联系信息预填 Checkout 字段，并统一该客户的购买记录。

要让客户返回到您网站上托管的自定义页面，请在 return_url 参数中指定该页面的 URL。在 URL 中包含 {CHECKOUT_SESSION_ID} 模板变量，以在返回页面上检索会话的状态。在重定向之前，Checkout 会自动将变量替换为 Checkout Session ID。

阅读更多有关配置返回页面和其他自定义重定向行为的选项。

创建 Checkout Session 后，使用挂载 Checkout 响应中返回的 client_secret。

挂载 Checkout
客户端

Stripe.js 是作为 Checkout 的一部分提供的。在您的页面包含 Stripe.js 脚本，方法是将它添加到您的 HTML 文件的 head 部分。接下来，创建一个空的 DOM 节点（容器）用于挂载。

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

用您的可发布 API 密钥初始化 Stripe.js。

创建一个异步 fetchClientSecret 函数，请求您的服务器创建 Checkout Session 并检索客户端私钥。创建 Checkout 实例时，将该函数传入 options：

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout 在 iframe 中呈现，该 iframe 通过 HTTPS 连接将支付信息安全地发送给 Stripe。

常见错误

避免将 Checkout 放在另一个 iframe 中，因为有些支付方式需要重定向到另一个页面进行付款确认。

自定义外观

通过在您账户的品牌设置中设置背景颜色、按钮颜色、边框半径和字体，自定义 Checkout 以匹配您的网站设计。

默认情况下，Checkout 在呈现时没有外部填充或边距。我们建议使用一个容器元素，如 div，来应用您想要的边距（例如，所有边都是 16px）。

显示返回页面

在您的客户尝试付款后，Stripe 会将他们重定向到您网站上的返回页面。创建 Checkout Session 时，您在 return_url 参数中指定返回页面的 URL。阅读有关自定义重定向行为其他选项的更多信息。

在呈现您的返回页面时，使用 URL 中的 Checkout Session ID 来检索 Checkout Session 的状态。根据会话状态处理结果，如下所示：

complete: 付款成功。使用来自 Checkout Session 的信息来呈现成功页面。
open: 付款失败或被取消。重新安装 Checkout，以便您的客户可以重试。

client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

基于重定向的支付方式

在支付过程中，一些支付方式会将客户重定向到中间页面，如银行授权页面。当他们完成该页面时，Stripe 会将他们重定向到您的返回页面。

了解有关基于重定向的支付方式和重定向行为的更多信息。

处理付款后事件

当客户完成 Checkout Session 付款时，Stripe 会发送一个 checkout.session.completed 事件。使用管理平台 Webhook 工具或按照 Webhook 指南接收和处理这些事件，这可能会触发您：

向客户发送订单确认邮件。
在数据库中记录销售情况。
启动配送流程。

请侦听这些事件而非等待客户被重定向回您的网站。仅依赖 Checkout 着陆页触发履约是不可靠的。设置您的集成来侦听异步事件，这样才能用单一集成接受不同类型的支付方式。

详情请参阅我们的 Checkout 履约指南。

使用 Checkout 收款时需处理以下事件：

活动	描述	行动
checkout.session.completed	当客户成功完成 Checkout Session 时发送。	向客户发送订单确认，并履行他们的订单。
checkout.session.async_payment_succeeded	当使用延迟型支付方式（如 ACH 直接借记）付款成功时发送。	向客户发送订单确认，并履行他们的订单。
checkout.session.async_payment_failed	当使用延迟型支付方式（如 ACH 直接借记）付款失败时发送。	通知客户支付失败并引导其返回会话重新尝试支付。

测试您的集成

要测试您的嵌入式支付表单集成，请执行以下操作：

创建一个嵌入式 Checkout Session，并在页面上挂载 Checkout。
使用下表中的方法填写付款详情。
- 输入一个任意的未来日期作为有效期。
- 输入 3 位数 CVC（银行卡安全码）。
- 输入账单地址邮编。
点击支付。您将被重定向到您的 return_url。
前往管理平台，在交易页面上查找支付。如果您付款成功，就会在列表中看到它。
点击您的付款，查看更多详情，例如包含账单信息和已购商品列表的 Checkout 摘要。您可以此信息来履行订单。

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

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

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

可选添加更多支付方式

默认情况下，Checkout 支持很多种支付方式。在启用并显示某些支付方式时，如 Apple Pay、Google Pay 和“先买后付”方式，您必须采取额外步骤。

Apple Pay 和 Google Pay

要接受来自 Apple Pay 和 Google Pay 的支付，您必须：

在您的支付方式设置中启用它们。Apple Pay 默认启用。
在 HTTPS 的开发和生产环境中为您的应用服务。
注册您的域名。
在开发和生产环境中通过 HTTPS 向您的应用程序提供服务。您可以使用类似 ngrok 的服务在本地测试时向您的应用程序提供服务。

此外，仅当以下_所有_条件都满足时，Checkout Session 才会向客户显示 Apple Pay 按钮：

客户设备的操作系统是 17 或更高版本的 macOS 或 iOS。
客户使用的是 Safari 浏览器。
客户在 Apple Pay 中储存了有效的银行卡。

只有满足以下所有条件时，Checkout Session 才会向客户显示 Google Pay 按钮：

客户的设备正在运行 Chrome 61 或更高版本。
客户在 Google Pay 中储存了有效的银行卡。

区域测试
印度

Stripe Checkout 不支持印度的 Stripe 账户或客户使用 Apple Pay 或 Google Pay。如果您的 IP 地址位于印度，即使 Stripe 账户在印度境外，也无法测试 Apple Pay 或 Google Pay 集成。

可选创建产品和价格

创建 Checkout Session 之前，您可以预先创建产品和价格。用“产品”表示不同的实物商品或服务等级，用“价格”表示每个产品的定价。

例如，您可以创建一个价格为 20 美元的 T 恤产品。这样即可在不更新相关产品详情的情况下更改和添加价格。使用 Stripe 管理平台或 API 均可创建产品和价格。详细了解产品和价格的运作原理。

API 仅要求有一个 name 即可创建 Product。Checkout 中显示您提供的产品的 name、description 和 images。

然后，创建一个 Price，定义产品的价格。这包括产品的费用及使用的币种。

创建的每个价格都会有一个 ID。创建 Checkout Session 时，要引用价格 ID 和数量。如果您以多币种销售，则将您的 Price 设置为多币种。Checkout 自动确定客户的本地货币，在 Price 支持时呈现该货币。

可选预填充客户数据
服务器端

如果您已经收集了客户的邮件地址并且想在 Checkout Session 中给他们预先填充，则创建 Checkout Session 时传递 customer_email。

可选保存支付方式详情
服务器端

默认情况下，用 Checkout 进行一次性付款时所使用的支付方式将来不能再使用。

保存支付方式，以在会话外扣款

通过传递 payment_intent_data.setup_future_usage 实参可以对 Checkout 进行设置，使其保存用于进行一次性付款的支付方式。在您需要捕捉填写的支付方式以便收取滞后费用时（例如取消或未到场费用），这样做非常有帮助。

如果您在 subscription 模式下使用 Checkout， Stripe 会自动保存该支付方式，用来完成今后的付款。使用 setup_future_usage 或 subscription 模式为客户保存的银行卡支付方式在复购时不会在 Checkout 中显示（详见下文）。建议使用自定义文本链接到有关使用保存的支付信息的任何相关条款。

注意

全球隐私法非常复杂、微妙。建议在实施 setup_future_usage 之前咨询您的法律和隐私团队，因为这可能会影响您的隐私合规框架。参考欧洲数据保护委员会发布的指导意见，了解有关保存支付详情的更多信息。

保存支付方式，以在 Checkout 中预先填充

默认情况下，Checkout 使用 Link 为您的客户提供安全地保存和重复使用其支付信息的选项。如果您更喜欢自己管理支付方式，请在创建 Checkout Session 时使用 saved_payment_method_options.payment_method_save，让客户保存他们的支付方式，以备将来购物时在 Checkout 中使用。

在 payment 或 subscription 模式下传递此参数会显示一个可选复选框，让客户显式保存其支付方式以备将来购买时使用。当客户选中此复选框时，Checkout 会使用 allow_redisplay: always 保存支付方式。Checkout 使用该参数来确定将来的购物中是否可以预先填充支付方式。使用 saved_payment_method_options.payment_method_save 时，您无需传入 setup_future_usage 来保存支付方式。

使用 saved_payment_method_options.payment_method_save 时要求提供 Customer。要保存新客户，请将 Checkout Session 的 customer_creation 设置为 always。否则，会话过程中不会保存客户或支付方式。

如果未传入 payment_method_save 或客户不同意保存支付方式，Checkout 仍会保存在 subscription 模式下或使用 setup_future_usage 创建的支付方式。这些支付方式的 allow_redisplay 值为 limited，这可以防止在退货时预先填充它们，并使您遵守卡组织的规则和数据保护法规。了解如何更改这些模式启用的默认行为以及如何更改或覆盖 allow_redisplay 行为。

注意

您可以使用 Checkout 保存银行卡和其他支付方式来进行会话外收款，但 Checkout 仅预填充已保存的银行卡信息。了解如何预填充保存的银行卡信息。要在不进行初始付款的情况下保存支付方式，请在设置模式下使用 Checkout。

允许客户移除已保存的支付方式

要让客户移除已保存的支付方式，使其不会在将来的付款中再次出现，请在创建 Checkout Session 时使用 saved_payment_method_options.payment_method_remove。

如果支付方式关联到有效订阅，并且客户没有为账单和订阅付款保存默认支付方式，则客户不能删除该支付方式。

可选客户账户管理
无代码

通过向您的客户门户分享链接，让您的客户管理他们自己的账户。客户门户允许客户用他们的电子邮件地址登录，以管理订阅、更新支付方式等。

可选单独授权和捕获
服务器端

Stripe 支持银行卡两步验证付款，因此您可以先对银行卡进行授权，然后稍后再捕获。当 Stripe 授权付款时，发卡行为客户卡上的资金提供担保并冻结客户卡上的付款金额。然后您会有一定的时间来捕获资金，具体取决于银行卡)。如果您在授权过期之前不捕获付款，则付款会被取消，并且发卡行释放扣留的资金。

如果在确认客户能够支付与向其收款这两项操作之间还需要其他操作，则将授权与捕获分离开来是非常有帮助的。例如，如果您销售的产品库存有限，则需要确认客户用 Checkout 购买的商品仍然有货，然后才能捕获他们的付款并履行订单。通过以下流程实现：

确认 Stripe 已授权客户的支付方式。
查阅库存管理系统，确认那件商品是否有货。
更新您的库存管理系统，指示客户未购买那件商品。
捕获客户的付款。
在确认页面通知客户他们是否购买成功。

要表明您想单独授权和捕获，必须在创建 Checkout Session 时将 payment_intent_data.capture_method 的值设置为 manual。这样可指示 Stripe 仅授权客户银行卡上的金额。

要捕获一笔未捕获的付款，可以用管理平台，也可以用 capture 端点。程序化地捕获付款必须访问 Checkout Session 过程中创建的 PaymentIntent，它可从 Session 对象获取。

可选订单履行

了解如何在客户付款时程序化地获取通知。