In my Laravel React application I have implemented the payment gateway. The payment flow works fine but the problem is when user perform a transaction on for example paytm payment gateway, paytm sends payment response to my API where I update the database from response then redirect the user to home page of my website
while I am updating the database, the user sees blank screen for few seconds then user redirected.
How can I avoid this blank screen as some user mistook it as payment failure? Can I show loading screen while database is updating?
CodePudding user response：
You are correct. You should show loading state when user makes a request for payment. And when you receive the response back from the server you can redirect the user to the homepage.
const App = () => {
const [loading, setLoading] = useState(false)
// Function for making payment request
const makePayment = () => {
setLoading(true)
// {******** Making API call *********}
setLoading(false)
// Redirect user to homepage
}
}
CodePudding user response：
Checkout this blog written by me on how to handle payTm payment gateway at frontend using ReactJs:
In this I am rendering text as a loader while paytm is redirecting user from merchants site to paytm payment page. You can show your custom loader instead of the text.
Demo for your reference: https://www.youtube.com/watch?v=Li1epZu58_s