时间戳

首页 > 解决方案 > 条带结帐会话不起作用nodejs

node.js - 条带结帐会话不起作用nodejs

问题描述

我正在尝试使用 NodeJs 和 React 实现条带结帐，它似乎从控制台日志中得到了这个错误：

Access to XMLHttpRequest at 'https://checkout.stripe.com/pay/cs_test_a1y3gwvPAqpqhArQ9B83g3Du9EvF87HVcxzcx5Opt6o1rKinGEQViuXIq' (redirected from 'http://localhost:5000/api/account/subscriptioncheckoutsession') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我到目前为止所做的：

环境文件

REACT_APP_FETCH_URL=http://localhost:5000

服务器.js

var whitelist = ['http://localhost:3000', 'http://localhost:5000'];
app.use(cors({ credentials: true, origin: whitelist }));

路由接口

const YOUR_DOMAIN = 'http://localhost:5000';

router.post('/account/subscriptioncheckoutsession', async (req, res) => {
  const session = await Stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'Product Subsciption',
            images: ['https://i.imgur.com/EHyR2nP.png'],
          },
          unit_amount: 100,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });
  res.redirect(303, session.url)
})

客户

const handleCheckout = async (e) => {
        e.preventDefault()
        const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/account/subscriptioncheckoutsession')
    }


<div className="form-group">
  <button type="submit" className="btn btn-primary" onClick={handleCheckout}>
   Subscribe or Renew Subscription</button>
</div>

我错过了什么？非常感谢，非常感谢任何帮助。再次感谢。

标签： node.jsreactjsstripe-payments

解决方案

如果您使用 XMLHTTPRequest（例如，Axios.post）来获取 CheckoutSession 的 URL，则无法直接从服务器重定向！该方法仅在您执行 Stripe 文档中描述的操作时才有效 - 从以下位置调用后端 /subscriptioncheckoutsession 路由action：<form>https: //stripe.com/docs/billing/subscriptions/checkout#create-session

所以你可以改变你的代码，让表单动作成为那个路线，并完全摆脱onClickAxios 的功能和使用！

如果您不想使用表单提交而是想使用 Ajax 方法，如 Axios，我建议您的后端应该只返回 URL 作为响应正文的一部分（例如res.json({"url":session.url};，而不是res.redirect）并执行通过设置window.location（例如let response = await axios.post(...); window.location = response.data.url）在 JavaScript 中重定向

推荐阅读