基本上,我希望调用Stripeapi来检索会话,这样我就可以在用户被定向到success_url时检查付款是否完成。(这可以通过检查检索到的会话来确认),我想从我自己的java服务器调用API,将支付状态更改为成功,并清理用户的购物车。但是,我遇到的问题是在用户被重定向到success_url后useEffect不运行。
下面是页面:
import Navigationbar from "../../Component/NavBar";
import React, {useEffect, useState} from "react";
import tick from "../../images/check.png";
import instagram from "../../images/instagram.png";
import twitter from "../../images/twitter.png";
import wechat from "../../images/wechat.png";
import tiktok from "../../images/tiktok.png";
import email from "../../images/gmail.png";
import "./style.css";
import {getCheckoutSessionDetails} from "../../../resource/CheckoutSessionResource";
import {changeTransactionStatusToFinished, getTransactionDetailData} from "../../../resource/TransactionDetailResource";
import {TransactionDetailData} from "../../../data/TransactionDetailData";
import {useParams} from "react-router-dom";
import LoadingSpinner from "../../Component/LoadingSpinner";
type params={
tid: string;
}
export default function TransactionCompletedPage(){
const domain=window.location.href;
const sessionId=domain.split("=")[1];
const params=useParams<params>();
const [paymentStatus,setPaymentStatus]=useState<boolean|undefined>(undefined);
const [isRendered,setIsRendered]=useState<boolean>(true);
if(paymentStatus) {
changeTransactionStatusToFinished(parseInt(params.tid as string))
}
//The following API is not called...
useEffect(()=>(
getCheckoutSessionDetails(params.tid as string,sessionId,setPaymentStatus)
) , [] )
return(
<>
<Navigationbar/>
<div className={"transaction-process-container"}>
<div className={"transaction-process-step-one-checkout"}>
<div className={"transaction-process"}>
<div className={"transaction-not-in-process-icon"}>1</div>
</div>
<div className={"transaction-process-step-one-name"}>Checkout</div>
</div>
<div className={"division-line"}></div>
<div className={"transaction-process-step-two-payment"}>
<div className={"transaction-process"}>
<div className={"transaction-not-in-process-icon"}>2</div>
</div>
<div className={"transaction-process-step-three-name"}>Payment</div>
</div>
<div className={"division-line"}></div>
<div className={"transaction-process-step-three-completion"}>
<div className={"transaction-process"}>
<div className={"transaction-in-process-icon"}>3</div>
</div>
<div className={"transaction-process-step-four-name"}>Transaction Completed</div>
</div>
</div>
<img className={"tick-image"} src={tick}/>
<h3 className={"payment-successful-message"}>PAYMENT SUCCESSFUL</h3>
<div className={"email-message"}> Thank you for patronizing our shop!
<br/>A confirmation email has been sent to you via the email address that you used to create this account in our platform
</div>
<div className={"social-media-logos-and-customer-service-container"}>
<div className={"social-media-container"}>
<div className={"social-media"}>
Follow Us on Social Media
</div>
<div className={"social-media-logos-container"}>
<img src={instagram} className={"social-media-logos"}/>
<img src={tiktok} className={"social-media-logos"}/>
<img src={twitter} className={"social-media-logos"}/>
<img src={wechat} className={"social-media-logos"}/>
</div>
</div>
<div className={"customer-service-container"}>
<div className={"social-media"}>Customer Service</div>
<div className={"social-media-logos-container"}>
<img src={email} className={"social-media-logos"}/>
<img src={wechat} className={"social-media-logos"}/>
</div>
</div>
</div>
</>
)
以下是调用API以检索条带会话和清理购物车的方法:
第一个
我尝试不将调用API的方法放在useEffect中,而是放在它之外,但没有API被调用。
2条答案
按热度按时间kzipqqlq1#
撇开useEffect未被调用的原因不谈,您应该通过侦听webhook事件
checkout.session.completed
来完成您的订单。Stripe有一个文档对此进行了解释:Fulfill orders with Checkout。原因是,如果出于任何原因,您的客户从未进入您的success_url(即,如果他们中途关闭浏览器,他们将失去互联网连接),那么您的逻辑将永远不会被调用。最好直接在后端侦听来自Stripe的事件触发器,并从那里运行逻辑。
3okqufwl2#
我通过创建两个页面来避免这个问题:一个页面允许用户单击继续按钮,另一个页面是用户单击继续按钮后重定向到的页面。在第一个页面中,我将所有需要调用的API放入handleOnCLick函数中,因此在单击继续按钮后,无论页面是否呈现自身,都将调用API,并且不会出于任何奇怪的原因调用API。