Show loading while updating the payment response

Question

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?

Answer 1

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
  }
}