非PCI合规场景下Stripe Checkout/Elements实现方案及入门指引咨询

一、无PCI合规资质的最佳实现方案 #

如果你没有PCI合规资质，Stripe Checkout是最优选择：

• 它是Stripe完全托管的支付页面，用户的信用卡敏感信息直接提交给Stripe，你的服务器全程不会接触任何卡数据。
• 这种场景下你仅需完成最简单的SAQ A级合规认证（仅需确认使用Stripe托管方案，无复杂审核），所有PCI合规责任由Stripe承担。

二、Stripe Checkout快速入门 #

步骤1：获取Stripe密钥 #

注册Stripe账号后，在后台获取测试模式的Secret Key（后端使用）和Publishable Key（前端使用），测试阶段可使用Stripe提供的测试卡号（如4242 4242 4242 4242）模拟支付。

步骤2：后端创建Checkout Session #

用后端语言调用Stripe API生成支付会话，指定商品信息、金额及回调地址。以Node.js为例：

const stripe = require('stripe')('你的测试Secret Key');

const createCheckoutSession = async () => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: { name: '示例商品' },
          unit_amount: 2000, // 单位为分，代表20美元
        },
        quantity: 1,
      },
    ],
    mode: 'payment', // 一次性支付模式，订阅场景用subscription
    success_url: 'https://你的域名/success?session_id={CHECKOUT_SESSION_ID}',
    cancel_url: 'https://你的域名/cancel',
  });
  return session.id; // 将会话ID返回给前端
};

步骤3：前端跳转至Checkout页面 #

通过Stripe.js跳转到Stripe托管的支付页面：

<script src="https://js.stripe.com/v3/"></script>
<button id="pay-btn">立即支付</button>
<script>
  const stripe = Stripe('你的测试Publishable Key');
  const payBtn = document.getElementById('pay-btn');

  payBtn.addEventListener('click', async () => {
    // 调用后端接口获取会话ID
    const res = await fetch('/create-checkout-session', { method: 'POST' });
    const sessionId = await res.json();
    // 跳转至支付页面
    const { error } = await stripe.redirectToCheckout({ sessionId });
    if (error) console.error(error.message);
  });
</script>

步骤4：处理支付结果 #

• 支付成功后用户跳转至success_url，可通过URL中的session_id调用Stripe API验证支付状态，完成订单更新等后续逻辑。
• 支付取消则跳转至cancel_url，引导用户重新发起支付。

三、Stripe Elements快速入门 #

若需自定义支付页面样式，Stripe Elements是低合规成本的替代方案——它提供预构建的信用卡输入组件，敏感数据仍直接提交给Stripe，同样只需SAQ A级合规。

步骤1：后端创建Payment Intent #

生成支付意向用于追踪支付状态：

const stripe = require('stripe')('你的测试Secret Key');

const createPaymentIntent = async () => {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 2000,
    currency: 'usd',
  });
  return paymentIntent.client_secret; // 返回客户端密钥给前端
};

步骤2：前端嵌入Elements组件 #

挂载信用卡输入组件并处理支付提交：

<script src="https://js.stripe.com/v3/"></script>
<form id="payment-form">
  <div id="card-element"></div>
  <button type="submit">支付</button>
</form>
<script>
  const stripe = Stripe('你的测试Publishable Key');
  const elements = stripe.elements();

  // 创建并挂载信用卡组件
  const cardElement = elements.create('card');
  cardElement.mount('#card-element');

  const form = document.getElementById('payment-form');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // 获取后端返回的client_secret
    const res = await fetch('/create-payment-intent', { method: 'POST' });
    const clientSecret = await res.json();

    // 创建支付方式
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    });

    if (!error) {
      // 调用后端确认支付
      const confirmRes = await fetch('/confirm-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          paymentMethodId: paymentMethod.id,
          clientSecret,
        }),
      });
      const result = await confirmRes.json();
      alert(result.success ? '支付成功' : `支付失败：${result.error}`);
    } else {
      alert(`输入错误：${error.message}`);
    }
  });
</script>

步骤3：后端确认支付 #

完成支付状态确认：

const stripe = require('stripe')('你的测试Secret Key');

const confirmPayment = async (req, res) => {
  const { paymentMethodId, clientSecret } = req.body;
  const { paymentIntent, error } = await stripe.confirmCardPayment(
    clientSecret,
    { payment_method: paymentMethodId }
  );

  if (paymentIntent.status === 'succeeded') {
    res.json({ success: true });
    // 处理后续业务逻辑
  } else {
    res.json({ success: false, error: error.message });
  }
};

内容的提问来源于stack exchange，提问作者Chanchal Singh