将值从购物车传递给 Stripe Checkout
Passing values to Stripe Checkout from shopping cart
我的项目是一个简单的电子商务网站,我正在使用 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 请求以启动结帐会话,所以我的结帐页面上有这个按钮:
<form action="http://localhost:4242/create-checkout-session" method="POST">
<button className='button' type="submit">
Checkout
</button>
我的 Stripe 服务器是这样的:
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 结帐页面中供用户付款的内容。目前它只是一个占位符产品,但我希望能够使用结帐页面中 cart_items
对象的值(产品名称、数量和价格)。
React 应用程序和 Stripe 服务器都在同一个本地主机上。 React 在端口 3000 上,Stripe 服务器在端口 4242 上。
如何将这些参数发送到 Stripe?我查看了他们的所有文档,但找不到任何相关内容。
由于您使用的是 <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。
我的项目是一个简单的电子商务网站,我正在使用 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 请求以启动结帐会话,所以我的结帐页面上有这个按钮:
<form action="http://localhost:4242/create-checkout-session" method="POST">
<button className='button' type="submit">
Checkout
</button>
我的 Stripe 服务器是这样的:
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 结帐页面中供用户付款的内容。目前它只是一个占位符产品,但我希望能够使用结帐页面中 cart_items
对象的值(产品名称、数量和价格)。
React 应用程序和 Stripe 服务器都在同一个本地主机上。 React 在端口 3000 上,Stripe 服务器在端口 4242 上。
如何将这些参数发送到 Stripe?我查看了他们的所有文档,但找不到任何相关内容。
由于您使用的是 <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。