时间戳

首页 > 解决方案 > 让 Stripe 接受预定义的产品及其价格

javascript - 让 Stripe 接受预定义的产品及其价格

问题描述

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

这是我的条纹元素代码：

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

价格和名称道具被传递给 CheckoutFrom 组件：

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

将其发送到 Stripe。那么我怎样才能告诉 Stripe 使用价格和产品 ID 呢？

标签： javascriptreactjsstripe-payments

解决方案

产品和价格与 Subscription 和 Checkout 相关联，而不是 PaymentIntent。所以不，您不能将现有的产品和价格附加到 PaymentIntent。

例如，您可以将产品和价格附加到结帐：https ://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items或订阅：https ://stripe.com/docs/api/subscriptions/创造

如果您希望实施 PaymentIntent，我建议您在您的网站上列出您的产品供用户选择，然后amount从价格中提取并传递给amountPaymentIntent。

推荐阅读