sos-nextjs/pages/store/checkout/verify.js

import {useState, useEffect} from 'react'
import axios from 'axios'
import Router from 'next/router'


CheckoutComplete.getInitialProps = async function({ctx: {query: {session_id}}}){
  return {session_id}
}

export default function CheckoutComplete({session_id}){
  const [loading, setLoading] = useState(true)

  useEffect(()=>{
    (async ()=>{
      const {data: {status}} = await axios.post('/api/orders/current/checkout/verify', {session_id})

      if(status === "succeeded")
        Router.push('/store/checkout/complete')
      else
        setLoading(false)

    })()
  }, [])

  if(loading)
    return (
      <>
        <h2>Checkout</h2>
        <p style={{textAlign: 'center'}}>Verifying your payment . . .</p>
      </>
    )

  return (
    <>
      <h2>Checkout</h2>
      <p style={{textAlign: 'center'}}>There was a problem with your payment.</p>
    </>
  )
}