如何解决反应条纹结帐不起作用和刷新页面
一切正常,直到上周为止。现在我在react-stripe-checkout上遇到了一些问题(我注意到上一次更新是3年前,所以也许与此有关)
我已经生成了我的API令牌,并且已经有一个后端和前端代码互相通信。
首先,我创建我的结帐组件:
import StripeCheckout from 'react-stripe-checkout'
...
<StripeCheckout
stripeKey="{token}"
token={handletoken}>
</StripeCheckout>
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,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,address })
return {
statusCode: 200,body: {
message: 'Successfully purchased!',...body
}
}
预期的行为是能够购买产品。但是,当我单击“ react-stripe-checkout”组件时,页面将刷新,并且没有任何反应。
解决方法
您引用的警告是关键所在:
您使用的是旧版的Stripe Checkout。
我们于2019年4月发布了新版本的Checkout,该版本支持 手机钱包和其他付款方式: https://stripe.com/docs/payments/checkout
了解如何升级到新版本: https://stripe.com/docs/payments/checkout/migration
该库显然使用了已淘汰的旧旧版本的Checkout,因此不建议这样做。
您应该点击这些链接以阅读有关新Checkout的文档。
您可以在this repository中查看示例React实现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。