How can I handle Stripe payment methods without using Stripe Elements in FastAPI and Vue?

Our project uses FastAPI for the backend and Vue for the frontend to process Stripe payments. We generate a payment intent on the backend and use its client secret on the frontend to confirm the payment. Once the payment is successful, Stripe sends a webhook to our backend API.

Below is the backend code:

PYTHONCopied
@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__)

And here is the frontend code:

JAVASCRIPTCopied
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);
            });
        });
    }
}

You receive the following error message:

JSONCopied
{
  "code": "resource_missing",
  "doc_url": "https://stripe.com/docs/error-codes/resource-missing",
  "message": "No such PaymentMethod: 'pi_...'...",
  "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"
}

The error indicates that the PaymentIntent is in the state 'requires_payment_method', and that Stripe is unable to find the PaymentMethod. This appears to be caused by passing the PaymentIntent ID as the payment_method during payment confirmation, which is incorrect. Since we do not plan to use Stripe's Elements to collect card details directly, how should we correctly create or supply the payment method? I have reviewed Stripe's documentation but haven’t found a clear solution, possibly due to language limitations.

I appreciate any guidance to resolve this issue. Thank you for your help!