FastAPI+Vue集成Stripe支付：弃用Stripe Elements的实现疑问

我们的项目采用FastAPI作为后端、Vue作为前端，流程为后端生成Payment Intent ID，前端基于该ID发起支付，支付成功后由Stripe Webhook通知后端API。但前端支付过程中出现错误，相关代码及报错信息如下：

后端代码 #

@router.post("/create_payment_intent")
async def create_payment_intent(
        request: Request,
        order_id: str = Form(...),
        order_amount: int = Form(...),
        currency: str = Form("gbp")
):
    metadata = {
        'user_id': "",
        'order_id': order_id
    }
    # Create payment intent
    intent = stripe.PaymentIntent.create(
        amount=order_amount,
        currency=currency,
        receipt_email=user_email,
        metadata=metadata,
        automatic_payment_methods={'enabled': True}
    )

    res = {
        "client_secret": intent.client_secret,
        "payment_intent_id": intent.id
    }
    return JSONResponse(RestResult(code=Code.TRUE, msg=Message.SUCCESS_CREATE_PAYMENT_INTENT, data=res).__dict__)

前端代码 #

import { RequestApi } from '@/api/RequestApi';
import { loadStripe } from '@stripe/stripe-js';

export class StripeUtil {
    static pay(params: any) {
        return new Promise((resolve, reject) => {
            RequestApi.createPayment(params).then(async res => {
                const stripe = await loadStripe(import.meta.env.VITE_STRIPE_KEY);
                if (!stripe) {
                    return reject('stripe load failed');
                }
                const { client_secret, payment_intent_id } = res.data;

                const { error } = await stripe.confirmPayment({
                    clientSecret: client_secret,
                    confirmParams: {
                        payment_method: payment_intent_id,
                        return_url: 'https://example.com/order/123/complete',
                    },
                });
                if (error.type) {
                    showDialog({ message: error.message }).then();
                    reject(error.message);
                }
            }).catch(error => {
                return reject(error);
            });
        });
    }
}

错误信息 #

{
  "code": "resource_missing",
  "doc_url": "https://stripe.com/docs/error-codes/resource-missing",
  "message": "No such PaymentMethod: 'pi_...'; It's possible this PaymentMethod exists on one of your connected accounts, in which case you should retry this request on that connected account. Learn more at https://stripe.com/docs/connect/authentication",
  "param": "payment_method",
  "payment_intent": {
    "id": "pi_...",
    "object": "payment_intent",
    "amount": 1512,
    "amount_details": {
      "tip": {}
    },
    "automatic_payment_methods": {
      "allow_redirects": "always",
      "enabled": true
    },
    "canceled_at": null,
    "cancellation_reason": null,
    "capture_method": "automatic_async",
    "client_secret": "pi_..._secret_...",
    "confirmation_method": "automatic",
    "created": 1731412378,
    "currency": "gbp",
    "description": null,
    "last_payment_error": null,
    "livemode": false,
    "next_action": null,
    "payment_method": null,
    "payment_method_configuration_details": null,
    "payment_method_types": [
      "card"
    ],
    "processing": null,
    "receipt_email": "test@gmail.com",
    "setup_future_usage": null,
    "shipping": null,
    "source": null,
    "status": "requires_payment_method"
  },
  "request_log_url": "https://dashboard.stripe.com/test/logs/req_fsqWt4IIR3rXhM?t=1731412381",
  "type": "invalid_request_error"
}

已知当前Payment Intent处于requires_payment_method状态，但不想使用Stripe Elements收集用户银行卡信息，请问该如何创建并关联有效的payment_method以完成支付？

核心问题分析 #

当前代码的错误根源是：前端调用stripe.confirmPayment时，把**Payment Intent ID（pi_xxx）**错误传给了payment_method参数——这个参数需要的是真实的PaymentMethod ID（pm_xxx），而非Payment Intent的ID，因此Stripe返回了资源不存在的错误。

无需Stripe Elements关联PaymentMethod的可行方案 #

方案1：后端预创建并关联PaymentMethod（适用于已有合规存储的用户卡信息场景）

如果你的系统已合法存储用户银行卡信息（需严格符合PCI合规要求），可在后端直接创建PaymentMethod并关联到Payment Intent：

# 先创建PaymentMethod（生产环境替换为用户真实卡信息）
payment_method = stripe.PaymentMethod.create(
    type="card",
    card={
        "number": "4242424242424242",
        "exp_month": 12,
        "exp_year": 2025,
        "cvc": "123",
    },
)

# 创建PaymentIntent时直接关联该PaymentMethod
intent = stripe.PaymentIntent.create(
    amount=order_amount,
    currency=currency,
    receipt_email=user_email,
    metadata=metadata,
    automatic_payment_methods={'enabled': True},
    payment_method=payment_method.id,
    confirm=True,  # 可选：自动触发支付确认，根据业务需求调整
)

⚠️ 注意：直接处理银行卡号需满足PCI DSS高等级合规要求，中小团队不建议采用，合规风险极高。

方案2：使用Stripe Payment Link（安全合规，无需自行处理卡信息）

这是最推荐的方案，完全无需处理卡信息，也不用Stripe Elements：

1. 后端修改为生成Payment Link：

@router.post("/create_payment_link")
async def create_payment_link(
        request: Request,
        order_id: str = Form(...),
        order_amount: int = Form(...),
        currency: str = Form("gbp")
):
    # 创建对应订单金额的价格项
    price = stripe.Price.create(
        unit_amount=order_amount,
        currency=currency,
        product_data={"name": f"Order {order_id}"},
    )

    # 生成Payment Link
    payment_link = stripe.PaymentLink.create(
        line_items=[{"price": price.id, "quantity": 1}],
        metadata={'order_id': order_id},
        after_completion={
            "type": "redirect",
            "redirect": {"url": "https://example.com/order/123/complete"}
        }
    )

    return JSONResponse(RestResult(code=Code.TRUE, msg=Message.SUCCESS_CREATE_PAYMENT_LINK, data={"url": payment_link.url}).__dict__)

2. 前端修改为跳转至Payment Link：

static pay(params: any) {
    return new Promise((resolve, reject) => {
        RequestApi.createPaymentLink(params).then(res => {
            // 跳转到Stripe官方支付页面
            window.location.href = res.data.url;
            // 支付完成后通过Webhook接收通知，前端可在回调页面查询订单状态
            resolve();
        }).catch(error => {
            reject(error);
        });
    });
}

方案3：前端直接创建PaymentMethod（仅限合规场景）

若必须在前端处理卡信息（需确保PCI合规），可直接调用Stripe API创建PaymentMethod后再确认支付：

static pay(params: any) {
    return new Promise((resolve, reject) => {
        RequestApi.createPayment(params).then(async res => {
            const stripe = await loadStripe(import.meta.env.VITE_STRIPE_KEY);
            if (!stripe) {
                return reject('stripe load failed');
            }
            const { client_secret } = res.data;

            // 创建PaymentMethod（生产环境替换为用户输入的真实卡信息）
            const { paymentMethod, error: pmError } = await stripe.createPaymentMethod({
                type: 'card',
                card: {
                    number: '4242424242424242',
                    exp_month: 12,
                    exp_year: 2025,
                    cvc: '123',
                },
            });

            if (pmError) {
                return reject(pmError.message);
            }

            // 使用真实的PaymentMethod ID确认支付
            const { error } = await stripe.confirmPayment({
                clientSecret: client_secret,
                confirmParams: {
                    payment_method: paymentMethod.id,
                    return_url: 'https://example.com/order/123/complete',
                },
            });
            if (error) {
                showDialog({ message: error.message }).then();
                reject(error.message);
            } else {
                resolve();
            }
        }).catch(error => {
            reject(error);
        });
    });
}

关键注意事项 #

• PCI合规优先：除非有专业合规团队支持，否则优先选择Payment Link方案，避免直接处理银行卡号带来的合规风险。
• 依赖Webhook通知：无论采用哪种方案，都必须通过Stripe Webhook接收支付成功的最终通知，前端跳转或本地状态不能作为支付完成的唯一依据。

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