反应条纹结帐不工作和刷新页面答案

【问题标题】：react stripe checkout not working and refreshing page反应条纹结帐不工作和刷新页面
【发布时间】：2020-12-13 14:40:18
【问题描述】：

直到上周，一切都运行良好。现在我在使用 react-stripe-checkout 时遇到了一些问题（我注意到上次更新是在 3 年前，所以可能与它有关）

我已经生成了我的 API 令牌，并且已经有一个后端和前端代码相互通信。

首先我创建我的结帐组件：

import StripeCheckout from 'react-stripe-checkout'

...
 <StripeCheckout
   stripeKey="{token}"
   token={handleToken}>
 </StripeCheckout>

而我的handleToken函数是：

  const handleToken = async (token) => {
    const response = await fetch(`http://localhost:3002/checkout`, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        token,
        product,
        quantity,
        address: user.address,
      })
    })
  }

但是，控制台上有这些警告：

A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. 
It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. 
You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.

react_devtools_backend.js:2273 You’re using the legacy version of Stripe Checkout.

We released a new version of Checkout in April 2019, which supports mobile wallets and other payment methods:
https://stripe.com/docs/payments/checkout

Learn how to upgrade to the new version:
https://stripe.com/docs/payments/checkout/migration

这就是后端发生的事情

 const {
        source = {},
        token,
        product,
        quantity,
        address
      } = httpRequest.body
      const { ip, headers } = httpRequest
      source.ip = ip
      source.browser = headers["User-Agent"]
      if (headers["Referer"]) {
        source.referer = headers["Referer"]
      }

      const body = await checkoutAction({ token, product, quantity, address })

      return {
        statusCode: 200,
        body: {
          message: 'Successfully purchased!',
          ...body
        }
      }

预期的行为是能够购买产品。但是，当我单击“react-stripe-checkout”组件时，页面会刷新并且没有任何反应。

【问题讨论】：

您是否在后端的响应中设置了 cookie？
不...应该吗？我将包括后端的源代码
stripe.com/docs/js/checkout/redirect_to_checkout。您是否使用给定的方法来使用重定向结帐操作？另外请升级您的条带包版本，以便您在那里使用最新版本。
没有。我正在为此使用 react-stripe-checkout

标签： reactjs stripe-payments

【解决方案1】：

你引用的警告是关键所在：

您使用的是旧版 Stripe Checkout。

我们在 2019 年 4 月发布了新版本的 Checkout，它支持手机钱包和其他支付方式： https://stripe.com/docs/payments/checkout

了解如何升级到新版本： https://stripe.com/docs/payments/checkout/migration

这个库显然使用的是旧的结帐版本，已被弃用且不推荐。

您应该点击这些链接来阅读有关新 Checkout 的文档。

您可以在this repository 中查看示例 React 实现。

2020 年 3 月 13 日更新：看起来示例已重构。同一个组件的链接现在在这里： https://github.com/stripe-samples/checkout-one-time-payments/blob/master/client/react-cra/src/components/Checkout.js

【讨论】：

谢谢 Nihal - 看起来它被重构了。添加了新链接。