简体   繁体   English

已创建 paymentintent 时如何防止在另一个选项卡中更改购物车

[英]How to prevent shopping cart alterations in another tab when paymentintent is already created

Has anyone figured out a solution to this ?有没有人想出解决办法 I seem to have gotten to the same conclusion with no solution.我似乎在没有解决方案的情况下得出了相同的结论。

If I were to go the my app's checkout page, the payintent is created in the backend (explained the process below).如果我去 go 我的应用程序的结账页面,payintent 是在后端创建的(下面解释了这个过程)。 So no after the payIntent is created, if i open a new tab and go the menu and add a new menu item, firestore will show the new (correct) total, but since the payment intent is created stripe charges the old (wrong) total.因此,在创建 payIntent 之后,如果我打开一个新选项卡和 go 菜单并添加一个新菜单项,firestore 将显示新的(正确的)总数,但是由于创建了付款意图,条带会收取旧的(错误的)总数.

What I am doing is我正在做的是

  1. Every time the page loads, I send a GET request to my backend which verifies the identity of the user (using firestore/firebase).每次加载页面时,我都会向我的后端发送一个 GET 请求,以验证用户的身份(使用 firestore/firebase)。

  2. Checks if there is a payment intent (payement intents are stored in firestore corresponding to the user)检查是否有支付意图(支付意图存储在用户对应的firestore中)

  • A. if payintent does not exist under user create one A. 如果 payintent 在用户下不存在创建一个
  • B. if payintent does exist retrieve payintent from stripe and check if it has.status===succeeded. B. 如果 payintent 确实存在,从 stripe 中检索 payintent 并检查它是否 has.status===succeeded。 IF it has succeeded create a new one and if it has not succeeded update the old one.如果它成功创建一个新的,如果它没有成功更新旧的。 The amount for all payIntents is calculated using total in firestore所有 payIntents 的金额是使用 firestore 中的 total 计算的

(and ofc if the users cart is empty a payintent is not created) (如果用户购物车是空的,则不会创建 payintent)

  1. Send back to the frontend the payInent.clienSecret and cart items to populate page将 payInent.clienSecret 和购物车项目发送回前端以填充页面

  2. From the front end using stripe elements and confirmPayment confirm the payment从前端使用 stripe 元素和 confirmPayment 确认付款

(using ngrok the page loads in about 800-1200ms so not too bad i think) (使用 ngrok 页面加载时间约为 800-1200 毫秒,所以我认为还不错)

Possible solutions are using webhooks, when payintent is processing check and update the pricing but that seems like duct taped solution (if it were to even work).可能的解决方案是使用 webhooks,当 payintent 正在处理检查和更新定价时,但这看起来像是胶带解决方案(如果它甚至可以工作的话)。 OR using webhooks when payment has succeeded update the payment, again seems like a duct tape solution (if it were to even work).或者在付款成功后使用 webhooks 更新付款,这似乎又是一种胶带解决方案(如果它甚至可以工作的话)。

EDIT: possible solution 3 cofirmPayment in the backend but according to documentation that takes away 3ds authentication which is the reason I am doing confirmPayment in the front end anyways编辑:后端可能的解决方案 3 cofirmPayment 但根据取消 3ds 身份验证的文档,这就是我在前端进行 confirmPayment 的原因

SOLUTION: The missing piece is that you need to update the Payment Intent's amount when something is added to their cart.解决方案:缺少的部分是您需要在将商品添加到他们的购物车时更新付款意向的金额。 Once you add that I think that will solve your issue.添加后,我认为这将解决您的问题。

So a function to create payment intent and update payment intent (when there is already a payment intent created) on add to cart.因此,一个 function 用于在添加到购物车时创建付款意向并更新付款意向(当已经创建付款意向时)。 And then a final update paymentIntent on the checkout page whenever they delete an item or if they edit the item然后,每当他们删除项目或编辑项目时,结帐页面上的最终更新 paymentIntent

Thank you Justin Michael谢谢贾斯汀迈克尔

I'm not sure I completely understand your question.我不确定我是否完全理解你的问题。 If you confirm a Payment Intent client-side using its client secret the Payment Intent will attempt to charge whatever the current amount set on it is.如果您使用客户端密码确认支付意向客户端,则支付意向将尝试收取当前设置的amount Stripe will never use a previous or "old" amount. Stripe 永远不会使用以前的或“旧的”金额。

As far as a solution, I recommend you retrieve the Payment Intent client-side using Stripe.js when your customer clicks on your "pay" button and see if the currently-set amount on the Payment Intent matches what you're currently displaying to them.至于解决方案,我建议您在客户点击“支付”按钮时使用 Stripe.js 在客户端检索付款意向,并查看付款意向中当前设置的amount是否与您当前显示的金额相匹配他们。 If it doesn't match abort the payment process, update your state client-side based on the latest version of the Payment Intent you just retrieved, prompt the customer to confirm the new amount, and ask them to click on "pay" again.如果不匹配,则中止付款流程,根据您刚刚检索到的最新版本的付款意向更新您的 state 客户端,提示客户确认新金额,并要求他们再次点击“付款”。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何防止在购物车中两次添加相同的产品 - how to prevent adding the same product 2 times in the shopping cart 未登录和登录后如何处理购物车系统? - How to handle shopping cart system when not login and after login? 如果已经存在标签,如何防止插入标签? - How to prevent the insertion of a tab if one already exists? 如何用JavaScript制作购物车 - how to make a shopping cart in javascript 如何检查商品是否已存在于您的购物车中 - UseReducer React JS - How to check if item already exists in your shopping cart - UseReducer React JS 如果已在另一个选项卡中打开,则阻止打开html - Prevent html from opening if already opened in another tab 当商品从购物车中移除时,如何显示“空购物车”字样? - How to show the words "empty cart" when an item is removed from the shopping cart? 如何从用户创建的列表(购物车)中删除元素 - How do I remove an element from a user created list (shopping cart) 当我清除并将其他商品添加到购物车时,我清除的商品又来了 - When I clear it and add another item to my shopping cart, the item that I cleared come again 打开另一个窗口标签时,如何防止当前窗口标签页重新加载? - how to prevent current window tab page reload when another window tab is being opened?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM