将值从购物车传递到Stripe Checkout

Question

我的项目是一个简单的电子商务网站，我正在使用React和Stripe进行支付处理。我有一个结账页面，其中购物车中的产品以对象的格式存储，如下所示:

cart_items = [
{
"id": 4,
"name": "Motherboard 2",
"price": 100,
"cat": "Motherboards",
"quantity": 1
},
{
"id": 10,
"name": "Motherboard 4",
"price": 100,
"cat": "Motherboards",
"quantity": 2
},
{
"id": 7,
"name": "Motherboard 3",
"price": 100,
"cat": "Motherboards",
"quantity": 1
}
]

在Stripe文档中，它使用表单动作向Stripe服务器发送POST请求以启动checkout会话，因此我在checkout页面上有这个按钮:

<form action="http://localhost:4242/create-checkout-session" method="POST">
<button className='button' type="submit">
Checkout
</button>

和我的条纹服务器看起来像这样:

const stripe = require('stripe')('sk_test_51KwxvYGVoSBOtXM2XmVvIJnpCktSICKIYcdWijKEqLtIalOrFyCszRl2iNPLor2fjrOQmuAyTisoVL1v8s8RJvpO00xKsdBlUc');
const express = require('express');
const app = express();
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:4242';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: [
{
// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
price: 'price_1KwyVNGVoSBOtXM2T0zYX0E6',
quantity: 1,
},
],
mode: 'payment',
success_url: `http://localhost:3000/?success=true`,
cancel_url: `http://localhost:3000/?canceled=true`,
});
res.redirect(303, session.url);
});
app.listen(4242, () => console.log('Running on port 4242'));

line_items

的参数为Stripe checkout页面显示的内容，供用户进行支付。目前它只是一个占位符产品，但我希望能够使用结帐页面中cart_items对象的值(产品名称，数量和价格)。

React应用程序和Stripe服务器都在同一个本地主机上。React在端口3000上，Stripe服务器在端口4242上。

如何将这些参数发送给Stripe?我看了他们所有的文档，但是没有找到任何关于这个的。

Answer 1

由于您正在使用<form method="POST">，您可以使用它将产品id从前端发送到后端。像这样:

前端:

<form action="http://localhost:4242/create-checkout-session" method="POST">
<input type="hidden" name="product_ids[]" value="4" />
<input type="hidden" name="product_ids[]" value="10" />
<input type="hidden" name="product_ids[]" value="7" />
<button className='button' type="submit">Checkout</button>
</form>

后端:获取req.body.product_ids变量中的产品id，并找到相应的价格id (pr_xxx)发送给Stripe。

Answer 2

我们实际上构建了shoprocket来为您做这些。

只需在我们的dash中创建/导入您的产品，连接您的条纹帐户，然后将我们的代码片段粘贴到您的网站，我们为您注入完整的电子商务体验。它只需要几秒钟，最好的是你可以连接多个网关。

https://shoprocket.io/features/stripe-shopping-cart