Javascript 使Stripe接受预定义的产品及其价格

我正在制作一个React应用程序，通过Stripe管理付款。Stripe有“产品”，您可以将产品和价格ID复制到代码中，然后Stripe将注册您的付款并将其链接到所选产品。我是Stripe的新手，我不知道该怎么做。目前，我在“描述”字段中传递产品名称，并将价格作为整数传递

这是我的条带元素代码：

<Elements stripe={stripePromise}>
 <CheckoutForm price='1000' name='orientacion'/>
</Elements>

---

这就把它送到了Stripe。那么，我如何告诉stripe使用价格和产品ID呢？

产品和价格与订阅和结账相关，而不是与PaymentIntent相关。因此，不能将现有产品和价格附加到PaymentIntent

例如，您可以将产品和价格附加到签出：或订阅：

---

如果您希望实现PaymentIntent，我建议您在网站上列出您的产品供用户选择，然后从价格中提取

金额

，并传递到PaymentIntent的

金额

。

不幸的是，直接使用

条带创建PaymentIntents。PaymentIntents.create目前不直接接受产品/价格，它只接受原始整数金额。因此，您可能希望通过其ID从API检索价格，查找
单位金额
，然后将其传递给API调用以创建PaymentIntent。
import React from 'react';
import {loadStripe} from '@stripe/stripe-js';
import { Elements, CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import {Button, Form} from 'react-bootstrap';
import axios from 'axios';


const stripePromise = loadStripe('pk_test_MYPUBLICKEY');


const CheckoutForm = (props) => {
    const stripe = useStripe();
    const elements = useElements();
    
    const handleSubmit = async (e) => {
        e.preventDefault();
    const {error, paymentMethod} = await stripe.createPaymentMethod({
            type: 'card',
            card: elements.getElement(CardElement)
        });
    if (!error) {
        console.log(paymentMethod);
        const { id } = paymentMethod;
        console.log('id');
        console.log(id)
        const data = await axios.post('http://localhost:3001/api/checkout', 
        {
            id,
            amount: props.price,
            description: props.name     
        }
        );
        console.log(data);
    } else {
        console.log(error);
    }    
    }

    return (
        <Form onSubmit ={handleSubmit}>
            <CardElement />
            <p>Price: {props.price/100} eur</p>
            <Button type='submit'>
                Comprar
            </Button>
        </Form>
    )
}

export default CheckoutForm;

const express = require('express');
const Stripe = require('stripe');
const cors = require('cors');

const app = express();
const stripe = new Stripe('sk_test_51IRxezLeEfBz7v63tNaTPPWBdlMaVCVHxVDsqQ5Z4BzVxIf5fgxI4fTkznzt1S8ZRNnyc146VPqA29I4lmsNl1C600nnih2m6x');

app.use(cors({origin: 'http://localhost:3000'})); 

app.use(express.json());



app.post('/api/checkout', async (req, res) => {
    
    const {id, amount, description} = req.body;

    const payment = await stripe.paymentIntents.create({
        amount,
        currency: "EUR",
        description,
        payment_method: id,
        confirm: true
    });


    console.log(payment);
    res.send({message: 'Sucess payment'});
});

app.listen(3001, () => {
    console.log('server listened', 3001)
})