我正在将前端应用程序与 Stripe 集成以进行付款处理。
我正在遵循快速入门文档，并且几乎一切正常，但是我没有被自动重定向。我确实得到了一个包含链接的成功响应，因此从响应中提取该链接不会太困难。但是，如果这不是预期的实现，我不想这样做。
我的后端：
@app.post('/create-checkout-session')
async def create_checkout_session(request: Request):
data = await request.json()
price_id = data['price_id']
try:
checkout_session = stripe.checkout.Session.create(
line_items=[
{
# Provide the exact Price ID (for example, pr_1234) of the product you want to sell
'price': price_id,
'quantity': 1,
},
],
mode='subscription',
success_url='http://localhost:3000' + '?success=true',
cancel_url='http://localhost:3000' + '?canceled=true',
)
except Exception as e:
print(e)
return str(e)
return redirect(checkout_session.url, code=303)
我的前端 api 调用：
fetch("{backend}/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify({ price_id: "price_1P3O6zRsJS40xuhRCkN4vrML" }),
});
以及对 api 调用的响应
{
"headers": {
"Content-Type": "text/html; charset=utf-8",
"Content-Length": "905",
"Location": "https://checkout.stripe.com/c/pay/cs_test_a1ODicN9C2lxgpSowo6RVXl8G1FaBFwaJrkgKwtuPKE6LBSIV5izrxyT67#fidkdWxOYHwnPyd1blpxYHZxWjA0Sn9cR1ZXdk9WMTV9cG1Xcnd0N38wN2prTnBHbUcxTDNUd3V0fW9uSFRWUEdhS29WdF1cXH1jbmRSXX1Tdnd2Yn1MazVwaTNkMHU3cXdKY2tIM2J9VTdrNTU8R092cjZudCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl"
},
"_status": "303 SEE OTHER",
"_status_code": 303,
"direct_passthrough": false,
"_on_close": [],
"response": [
"<!doctype html>\n<html lang=en>\n<title>Redirecting...</title>\n<h1>Redirecting...</h1>\n<p>You should be redirected automatically to the target URL: <a href=\"https://checkout.stripe.com/c/pay/cs_test_a1ODicN9C2lxgpSowo6RVXl8G1FaBFwaJrkgKwtuPKE6LBSIV5izrxyT67#fidkdWxOYHwnPyd1blpxYHZxWjA0Sn9cR1ZXdk9WMTV9cG1Xcnd0N38wN2prTnBHbUcxTDNUd3V0fW9uSFRWUEdhS29WdF1cXH1jbmRSXX1Tdnd2Yn1MazVwaTNkMHU3cXdKY2tIM2J9VTdrNTU8R092cjZudCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl\">https://checkout.stripe.com/c/pay/cs_test_a1ODicN9C2lxgpSowo6RVXl8G1FaBFwaJrkgKwtuPKE6LBSIV5izrxyT67#fidkdWxOYHwnPyd1blpxYHZxWjA0Sn9cR1ZXdk9WMTV9cG1Xcnd0N38wN2prTnBHbUcxTDNUd3V0fW9uSFRWUEdhS29WdF1cXH1jbmRSXX1Tdnd2Yn1MazVwaTNkMHU3cXdKY2tIM2J9VTdrNTU8R092cjZudCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl</a>. If not, click the link.\n"
]
}
如果它很重要我的 python 端点中的
redirect
调用来自
flask
问题出在你的前端处理 Stripe 返回的 303 重定向的方式上。前端代码没有遵循重定向，而是仅仅返回了响应。
你需要调整前端代码以遵循重定向。你可以用多种方式实现：
1. 使用
fetch
的重定向选项：
最简单的方法是设置
fetch
的
redirect
选项为 'follow'，让它自动处理重定向：
fetch("{backend}/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify({ price_id: "price_1P3O6zRsJS40xuhRCkN4vrML" }),
redirect: 'follow'
})
.then(response => {
// 处理成功的重定向
if (response.redirected) {
window.location.href = response.url;
} else {
// 处理错误
console.error('Redirection failed');
}
})
.catch(error => {
console.error('Fetch error:', error);
});
2. 手动处理重定向：
你也可以手动处理重定向：
fetch("{backend}/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
credentials: "include",
body: JSON.stringify({ price_id: "price_1P3O6zRsJS40xuhRCkN4vrML" })
})
.then(response => {
if (response.status === 303) {
// 从响应头中获取重定向 URL
const redirectUrl = response.headers.get('Location');
// 重定向到 Stripe Checkout 页面
window.location.href = redirectUrl;
} else {
// 处理其他响应
console.log('Response:', response);
}
})
.catch(error => {
console.error('Fetch error:', error);
});
这两种方法都会将用户重定向到 Stripe Checkout 页面。选择哪种方法取决于你的偏好和应用程序的具体需求。
请注意，如果你的前端框架有自己处理重定向的方式，你可能需要参考其文档以获得更具体的指导。
标签：python,reactjs,stripe-payments From： 78795483