调至内容部分
创建账户
或
登录
Stripe 文档徽标
/
创建账户
登录

收款

安全地在线上收款。

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

使用 Stripe Elements 和 Checkout Sessions 在您的网站上构建一个结账页面，这是一种可管理税费、折扣、运费等内容的集成方式。

客户所在地
尺寸
主题
布局
仅当您的任一钱包绑定了有效的卡时，演示中才会显示 Google Pay 或 Apple Pay。

设置服务器
服务器端

在开始之前，您需要注册一个 Stripe 账户。

用官方 Stripe 库从您的应用程序访问 API。

Command Line
npm install stripe@18.0.0 --save

将 SDK 设置为至少使用 2025-03-31.basil API 版本。

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

创建一个 Checkout Session
服务器端

在服务器上添加一个终结点，用于创建 Checkout Session 并将其客户端私钥返回到前端。Checkout Session 表示您的客户在进行一次性付款或订阅时的会话。Checkout Sessions 创建后 24 小时过期。

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

设置前端
客户端

在您的结账页面包含 Stripe.js 脚本，方法是将其添加到您的 HTML 文件的 head。一定直接从 js.stripe.com 加载 Stripe.js，以保持 PCI 合规。请勿将脚本包含在捆绑包中，也不要自己托管其副本。

您需要通过包含以下脚本标签 <script src="https://js.stripe.com/basil/stripe.js"></script> 将 Stripe.js 从 v3 更新为 basil。了解有关 Stripe.js 版本控制的更多信息。

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

注意

Stripe 提供一个 npm 工具包，可用于将 Stripe.js 加载为模块。请参阅 GitHub 上的项目。需要 7.0.0 或更高版本。

初始化 stripe.js。

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'
,
);

发起结账
客户端

创建一个 fetchClientSecret 函数。此函数从服务器检索客户端私钥，并返回一个使用客户端私钥解析的 promise。通过传入 fetchClientSecret 来调用 initCheckout。initCheckout 返回解析为 checkout 实例的 promise。

checkout 对象充当结账页面的基础，包含来自 Checkout Session 的数据以及更新 Session 的方法。

checkout.session() 返回的对象包含您的价格信息。建议在您的 UI 中读取并显示会话中的 total 和 lineItems。

这样，您只需最少量的代码修改即可开启新功能。例如，添加手动货币价格，如果显示 total，则不需要更改 UI。

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.session().total.total.amount}`);
  });
index.html
<div id="checkout-container"></div>

收集客户电子邮件地址
客户端

创建电子邮件输入以收集客户的电子邮件地址。当客户完成输入来验证并保存电子邮件地址时，调用 updateEmail。

根据您的结账表单的设计，可通过以下方式调用 updateEmail：

  • 在提交付款之前。也可以调用 updateEmail 来提前验证，例如模糊输入。
  • 在转到下一步之前，例如点击保存按钮（如果您的表单包含多个步骤）。
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    checkout.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
});

收集付款详情
客户端

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

首先，创建一个容器 DOM 元素来挂载 Payment Element。然后使用 checkout.createPaymentElement 创建 Payment Element 的实例，并通过调用 element.mount 挂载它，提供 CSS 选择器或容器 DOM 元素。

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

请参见 Stripe.js 文档，查看支持哪些选项。

您可以通过在前端初始化 Checkout 时传递 elementsOptions.appearance 来自定义所有 Element 的外观。

提交付款
客户端

呈现一个“支付”按钮，该按钮从 checkout 实例调用 confirm 以提交付款。

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

测试您的集成应用

  1. 导航到您的结账页面。
  2. 使用下表中的支付方式填写付款详情。对于银行卡付款：
    • 输入一个任意的未来日期作为有效期。
    • 输入 3 位数 CVC 码。
    • 输入账单地址邮编。
  3. 将付款提交至 Stripe。
  4. 前往管理平台，在交易页面上查找支付。如果您支付成功，就会在列表中看到它。
  5. 点击您的付款，查看更多详情，例如账单信息及已购商品列表。您可以此信息来履行订单。
卡号场景如何测试
该卡付款成功，不需要验证。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
该卡付款时需要验证。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
该卡被拒绝，显示拒付代码，例如 insufficient_funds。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
银联卡的长度为 13-19 位。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。

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

另见

此页面的内容有帮助吗？
是否
需要帮助？联系支持。
加入我们的早期使用计划。
查看我们的更改日志。
有问题？联系销售。
LLM? Read llms.txt.
Powered by Markdoc
Code quickstart
相关指南
Elements Appearance API
更多支付场景
卡的工作原理
使用的产品
Payments
Elements
Checkout