axios React useEffect在重定向到我的Stripe success_url后未运行

n53p2ov0  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(134)

基本上,我希望调用Stripeapi来检索会话,这样我就可以在用户被定向到success_url时检查付款是否完成。(这可以通过检查检索到的会话来确认),我想从我自己的java服务器调用API,将支付状态更改为成功,并清理用户的购物车。但是,我遇到的问题是在用户被重定向到success_url后useEffect不运行。
下面是页面:

  1. import Navigationbar from "../../Component/NavBar";
  2. import React, {useEffect, useState} from "react";
  3. import tick from "../../images/check.png";
  4. import instagram from "../../images/instagram.png";
  5. import twitter from "../../images/twitter.png";
  6. import wechat from "../../images/wechat.png";
  7. import tiktok from "../../images/tiktok.png";
  8. import email from "../../images/gmail.png";
  9. import "./style.css";
  10. import {getCheckoutSessionDetails} from "../../../resource/CheckoutSessionResource";
  11. import {changeTransactionStatusToFinished, getTransactionDetailData} from "../../../resource/TransactionDetailResource";
  12. import {TransactionDetailData} from "../../../data/TransactionDetailData";
  13. import {useParams} from "react-router-dom";
  14. import LoadingSpinner from "../../Component/LoadingSpinner";
  15. type params={
  16. tid: string;
  17. }
  18. export default function TransactionCompletedPage(){
  19. const domain=window.location.href;
  20. const sessionId=domain.split("=")[1];
  21. const params=useParams<params>();
  22. const [paymentStatus,setPaymentStatus]=useState<boolean|undefined>(undefined);
  23. const [isRendered,setIsRendered]=useState<boolean>(true);
  24. if(paymentStatus) {
  25. changeTransactionStatusToFinished(parseInt(params.tid as string))
  26. }
  27. //The following API is not called...
  28. useEffect(()=>(
  29. getCheckoutSessionDetails(params.tid as string,sessionId,setPaymentStatus)
  30. ) , [] )
  31. return(
  32. <>
  33. <Navigationbar/>
  34. <div className={"transaction-process-container"}>
  35. <div className={"transaction-process-step-one-checkout"}>
  36. <div className={"transaction-process"}>
  37. <div className={"transaction-not-in-process-icon"}>1</div>
  38. </div>
  39. <div className={"transaction-process-step-one-name"}>Checkout</div>
  40. </div>
  41. <div className={"division-line"}></div>
  42. <div className={"transaction-process-step-two-payment"}>
  43. <div className={"transaction-process"}>
  44. <div className={"transaction-not-in-process-icon"}>2</div>
  45. </div>
  46. <div className={"transaction-process-step-three-name"}>Payment</div>
  47. </div>
  48. <div className={"division-line"}></div>
  49. <div className={"transaction-process-step-three-completion"}>
  50. <div className={"transaction-process"}>
  51. <div className={"transaction-in-process-icon"}>3</div>
  52. </div>
  53. <div className={"transaction-process-step-four-name"}>Transaction Completed</div>
  54. </div>
  55. </div>
  56. <img className={"tick-image"} src={tick}/>
  57. <h3 className={"payment-successful-message"}>PAYMENT SUCCESSFUL</h3>
  58. <div className={"email-message"}> Thank you for patronizing our shop!
  59. <br/>A confirmation email has been sent to you via the email address that you used to create this account in our platform
  60. </div>
  61. <div className={"social-media-logos-and-customer-service-container"}>
  62. <div className={"social-media-container"}>
  63. <div className={"social-media"}>
  64. Follow Us on Social Media
  65. </div>
  66. <div className={"social-media-logos-container"}>
  67. <img src={instagram} className={"social-media-logos"}/>
  68. <img src={tiktok} className={"social-media-logos"}/>
  69. <img src={twitter} className={"social-media-logos"}/>
  70. <img src={wechat} className={"social-media-logos"}/>
  71. </div>
  72. </div>
  73. <div className={"customer-service-container"}>
  74. <div className={"social-media"}>Customer Service</div>
  75. <div className={"social-media-logos-container"}>
  76. <img src={email} className={"social-media-logos"}/>
  77. <img src={wechat} className={"social-media-logos"}/>
  78. </div>
  79. </div>
  80. </div>
  81. </>
  82. )

以下是调用API以检索条带会话和清理购物车的方法:
第一个
我尝试不将调用API的方法放在useEffect中,而是放在它之外,但没有API被调用。

kzipqqlq

kzipqqlq1#

撇开useEffect未被调用的原因不谈,您应该通过侦听webhook事件checkout.session.completed来完成您的订单。
Stripe有一个文档对此进行了解释:Fulfill orders with Checkout。原因是,如果出于任何原因,您的客户从未进入您的success_url(即,如果他们中途关闭浏览器,他们将失去互联网连接),那么您的逻辑将永远不会被调用。最好直接在后端侦听来自Stripe的事件触发器,并从那里运行逻辑。

3okqufwl

3okqufwl2#

我通过创建两个页面来避免这个问题:一个页面允许用户单击继续按钮,另一个页面是用户单击继续按钮后重定向到的页面。在第一个页面中,我将所有需要调用的API放入handleOnCLick函数中,因此在单击继续按钮后,无论页面是否呈现自身,都将调用API,并且不会出于任何奇怪的原因调用API。

相关问题