Question

一切正常，直到上周为止。现在我在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”组件时，页面将刷新，并且没有任何反应。

Answer 1

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

您使用的是旧版的Stripe Checkout。

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

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

该库显然使用了已淘汰的旧旧版本的Checkout，因此不建议这样做。

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

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

反应条纹结帐不起作用和刷新页面

1 个答案: