在反应中处理条纹支付

Question

我可以使用以下方法成功处理 Stripe 付款：

const processPayment = async () => {
        const url = '/.netlify/functions/charge-card';
        const newItems = items.map(({ id, quantity }) => ({
            id,
            quantity,
        }));

        const stripe = await loadStripe(publishableKey);
        const { data } = await axios.post(url, { items: newItems });
        await stripe.redirectToCheckout({ sessionId: data.id });
    };

这是唯一适合我的方法

exports.handler = async (event, context) => {
    const { items } = JSON.parse(event.body);
    const allItems = await getProducts();

    const cartWithProducts = items.map(({ id, quantity }) => {
        const item = allItems.find(p => p.id === id);
        return {
            ...item,
            quantity,
        };
    });

    const lineItems = cartWithProducts.map(product => ({
        price_data: {
            currency: 'usd',
            product_data: {
                name: product.name,
            },
            unit_amount: product.price,
        },
        quantity: product.quantity,
    }));

    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: lineItems,
        mode: 'payment',
        success_url: `${process.env.URL}/success`,
        cancel_url: `${process.env.URL}/cancelled`,
    });

    console.log(lineItems);

    return {
        statusCode: 200,
        body: JSON.stringify({
            id: session.id,
        }),
    };

但是，我不想使用await stripe.redirectToCheckout({ sessionId: data.id });，因为我不想被重定向到 Stripe 的网站。我想做这样的事情：

return (
        <StripeCheckout
            label={'Pay Now'}
            name={'CRWN Clothing Ltd.'}
            billingAddress
            shippingAddress
            image={'https://svgshare.com/i/CUz.svg'}
            description={`Your total is $${price}`}
            amount={priceForStripe}
            panelLabel={'Pay Now'}
            token={processPayment}
            stripeKey={publishableKey}
            
        />

这会显示弹出窗口并允许我输入所有信息并提交付款，但实际上没有任何反应。不知道是不是跟sessionId和data.id有关。我可以使用另一个函数来代替 stripe.redirectToCheckout 来处理信息吗？

Answer 1

好的，我让它工作了。这是我的付款流程：

const processPayment = token => {
        const url = '/.netlify/functions/charge-card';
        const options = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8',
            },
            body: JSON.stringify({
                amount: priceForStripe,
                token,
            }),
        };
        fetch(url, options)
            .then(response => {
                alert('Payment Successful');
            }).catch(error => {
            console.log('Payment error:', error);
            alert('There was in issue with your payment. Please make sure you use the provided credit card.');
        });
    };

我的 StripeCheckoutButton：

<StripeCheckout
            label={'Pay Now'}
            name={'CRWN Clothing Ltd.'}
            billingAddress
            shippingAddress
            image={'https://svgshare.com/i/CUz.svg'}
            description={`Your total is $${price}`}
            amount={priceForStripe}
            panelLabel={'Pay Now'}
            token={processPayment}
            stripeKey={publishableKey}
        />

我真的不需要访问商品的总价，所以我将 export.handler 更改为：

exports.handler = async (event, context) => {
    const data = JSON.parse(event.body);
    const body = {
        source: data.token.id,
        amount: data.amount,
        currency: 'usd',
    };

    await stripe.charges.create(body, (stripeErr, stripeRes) => {
        if (stripeErr) {
            return {
                statusCode: 500,
                body: stripeErr,
            };
        } else {
            return {
                statusCode: 200,
                body: stripeRes,
            };
        }
    });
};

现在一切正常。我可以使用 stripe 的弹出窗口而不被重定向，并且支付过程完全在 stripes 结束。