React+Material UI自定义表单对接Stripe支付方案咨询（不使用Elements）

因为你不能使用Stripe的Card/Payment Element，核心思路是先通过Stripe.js生成支付方式凭证（PaymentMethod），再结合PaymentIntent完成支付确认，具体步骤如下：

核心逻辑说明 #

1. 用自定义表单收集卡信息（卡号、有效期、CVC），通过useState存储
2. 调用stripe.createPaymentMethod将卡信息转换为Stripe认可的支付方式凭证
3. 后端创建PaymentIntent并返回client_secret
4. 调用stripe.confirmCardPayment完成支付，传入client_secret和生成的PaymentMethod ID

前端代码修改 #

1. 支付信息收集（PaymentForm.js） #

确保用状态存储完整的卡信息，并支持传递给结账组件：

import { useState } from 'react';
// 导入你的Material UI组件

export default function PaymentForm({ onCardInfoChange }) {
  const [cardNumber, setCardNumber] = useState('');
  const [expMonth, setExpMonth] = useState('');
  const [expYear, setExpYear] = useState('');
  const [cvc, setCvc] = useState('');

  // 实时同步卡信息到父组件（Checkout）
  const handleChange = () => {
    onCardInfoChange({
      cardNumber: cardNumber.replace(/\s/g, ''),
      expMonth: parseInt(expMonth),
      expYear: parseInt(expYear),
      cvc: cvc
    });
  };

  return (
    <div>
      <input
        type="text"
        value={cardNumber}
        onChange={(e) => {
          setCardNumber(e.target.value);
          handleChange();
        }}
        placeholder="卡号"
      />
      <input
        type="number"
        value={expMonth}
        onChange={(e) => {
          setExpMonth(e.target.value);
          handleChange();
        }}
        placeholder="到期月"
      />
      <input
        type="number"
        value={expYear}
        onChange={(e) => {
          setExpYear(e.target.value);
          handleChange();
        }}
        placeholder="到期年"
      />
      <input
        type="text"
        value={cvc}
        onChange={(e) => {
          setCvc(e.target.value);
          handleChange();
        }}
        placeholder="CVC"
      />
    </div>
  );
}

2. 发起支付（Checkout.js） #

在第三步的"Place Order"点击事件中执行完整支付流程：

import { useStripe } from '@stripe/react-stripe-js';
import { useState } from 'react';
import PaymentForm from './PaymentForm';
// 导入你的Material UI组件

export default function Checkout() {
  const stripe = useStripe();
  const [cardInfo, setCardInfo] = useState({});
  // 假设你已获取订单金额、配送信息等数据
  const orderAmount = 1000; // 单位为分，示例为10美元

  const handlePlaceOrder = async () => {
    if (!stripe || !cardInfo.cardNumber) return;

    // 1. 生成PaymentMethod
    const { error: pmError, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardInfo
    });

    if (pmError) {
      alert(`卡信息验证失败：${pmError.message}`);
      return;
    }

    // 2. 向后端请求创建PaymentIntent
    try {
      const res = await fetch('/create-payment-intent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: orderAmount,
          paymentMethodId: paymentMethod.id
        })
      });
      const { clientSecret, error } = await res.json();

      if (error) {
        alert(`创建支付意向失败：${error}`);
        return;
      }

      // 3. 确认支付
      const { error: confirmError, paymentIntent } = await stripe.confirmCardPayment(
        clientSecret,
        { payment_method: paymentMethod.id }
      );

      if (confirmError) {
        alert(`支付失败：${confirmError.message}`);
      } else if (paymentIntent.status === 'succeeded') {
        alert('支付成功！');
        // 这里添加订单完成后的逻辑（跳转成功页、更新订单状态等）
      }
    } catch (fetchError) {
      alert(`网络错误：${fetchError.message}`);
    }
  };

  return (
    <div>
      {/* 第一步、第二步组件 */}
      <PaymentForm onCardInfoChange={setCardInfo} />
      {/* 第三步确认页面 */}
      <button 
        onClick={handlePlaceOrder} 
        disabled={!stripe || !cardInfo.cardNumber}
      >
        Place Order
      </button>
    </div>
  );
}

后端代码修改（index.js） #

调整PaymentIntent创建逻辑，支持传入PaymentMethod ID：

const stripe = require('stripe')('你的Stripe密钥');
const express = require('express');
const app = express();
app.use(express.json());

app.post('/create-payment-intent', async (req, res) => {
  const { amount, paymentMethodId } = req.body;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: 'usd', // 根据业务调整币种
      payment_method: paymentMethodId,
      confirm: false, // 由前端触发支付确认，若需后端直接确认可设为true
      automatic_payment_methods: { enabled: true }
    });

    res.json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

关键注意事项 #

• PCI合规风险：自行收集卡信息需要符合PCI DSS的SAQ A-EP合规要求，这比使用Stripe UI组件的合规要求严格得多，若非必要建议优先使用Stripe官方UI组件降低合规成本。
• 前端验证：可添加卡号格式、有效期范围等基础验证，减少无效请求。
• 错误处理：示例中使用alert仅作演示，实际项目建议使用更友好的错误提示组件。

内容的提问来源于stack exchange，提问作者Chirag Lalwani