How to generate a Receipt Page after Stripe Checkout

I am new to stripe and APIs and followed a tutorial to implement stripe checkout and implemented that successfully but I want to display a receipt after stripe checkout.

Do you know any such tutorial or can anyone please help.

Also, after the payment, in the stripe dashboard I am getting status as incomplete and it says that three_d_secure authentication is required which I had turned on in the setting but whenever I enter card details it never asks. Would like to learn that too. Let me know if there are any good resources for the same. Would be grateful to have someone guideme.

Code for listening on port 4000

const express = require("express")
const app = express()
require("dotenv").config()
const stripe = require("stripe")(process.env.STRIPE_SECRET_TEST)
const bodyParser = require("body-parser")
const cors = require("cors")

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

app.use(cors())

app.post("/payment", cors(), async (req, res) => {


    let { amount, id } = req.body
    try {
        const payment = await stripe.paymentIntents.create({
            amount,
            currency: "USD",
            description: "pay",
            payment_method: id,
            confirm: true
        })
        
        console.log("Payment", payment)

        res.json({
            message: "Payment successful",
            success: true
        })
    } catch (error) {
        console.log("Error", error)
        res.json({
            message: "Payment failed",
            success: false
        })
    }
})

app.listen(process.env.PORT || 4000, () => {
    console.log("Sever is listening on port 4000")
})

code for checkout form

import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import { CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js";
import {ArrowForward } from '@material-ui/icons';
import axios from "axios"
import React, { useState } from 'react'
import './styles.css';
import { DataGrid } from "@material-ui/data-grid";
import { Typography } from "@material-ui/core";
import { Alert } from "@material-ui/core";
import { LoadingButton } from "@material-ui/lab";
import {Button, TextField, Paper, Grid } from "@material-ui/core";
import StripeInput from "../../src/components/StripeInput";


const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "#c4f0ff",
            color: "#fff",
            fontWeight: 500,
            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
            fontSize: "16px",
            fontSmoothing: "antialiased",
            ":-webkit-autofill": { color: "#fce883" },
            "::placeholder": { color: "#87bbfd" }
        },
        invalid: {
            iconColor: "#ffc7ee",
            color: "#ffc7ee"
        }
    }
}

export default function PaymentForm() {
    const [success, setSuccess ] = useState(false)
    const stripe = useStripe()
    const elements = useElements()
    const [loading, setLoading] = React.useState(false);

    const handleSubmit = async (e) => {
        setLoading(true);
        e.preventDefault()
        const {error, paymentMethod} = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardNumberElement)
        })


    if(!error) {
        try {
            const {id} = paymentMethod
            const response = await axios.post("http://localhost:4000/payment", {
                amount: 1000,
                id
            })

            if(response.data.success) {
                console.log("Successful payment")
                setSuccess(true)
            }

        } catch (error) {
            console.log("Error", error)
        }
    } else {
        console.log(error.message)
    }
}

const paperStyle={padding:'30px 20px', width: 600, margin: "20px auto"}
const marginTop = { marginTop: 10} 
    return (
        <center>
        <>
        {!success ? 
        <div>
          <Grid>
          <Paper  elevation ={20} style = {paperStyle} >
          <Grid align='center'></Grid>


        <form>
       
        <Grid  item xs ={12}></Grid>
           <Grid item xs={12} sm={6}>
            <TextField 
            //placeholder="XXXX XXXX XXXX XXXX"
            label="Card Number"
            style={marginTop}
            fullWidth
            InputLabelProps={{
                shrink: true,
              }}
            InputProps={{
                inputComponent: StripeInput,
                inputProps: {
                     component: CardNumberElement
                },
           }}
            />
            </Grid>
            <Grid item xs={12} sm={6}>
            <TextField 
            //placeholder="MM/YY"
            fullWidth
            label="Expiry Date"
            style={marginTop}
            InputLabelProps={{
                shrink: true,
              }}
            InputProps={{
                inputComponent: StripeInput,
                inputProps: {
                    component: CardExpiryElement
                },
            }}
            />
            </Grid>
            <Grid  item xs ={12}></Grid>
            <Grid item xs={12} sm={6}>
            <TextField 
            //placeholder="XXX"
            fullWidth
            label="CVV"
            style={marginTop}
            InputLabelProps={{
                shrink: true,
              }}
            InputProps={{
                inputComponent: StripeInput,
                inputProps: {
                    component: CardCvcElement
                },
            }}
            />
            </Grid>
            
            <Grid  item xs ={12}></Grid>
            <Grid item xs={12} sm={6}>
            <LoadingButton 
            loading ={loading}
            loadingPosition="start"
            startIcon={<ArrowForward />}
            fullWidth 
            variant="outlined"  
            onClick={handleSubmit}
            style={marginTop}>
                Pay
            </LoadingButton>
            </Grid>
        </form>
        </Paper>
       </Grid>
       <center>
       
    </center>
       </div>
        :
        <Grid>
          <Paper  elevation ={20} style = {paperStyle} >
          <Grid align='center'></Grid>
       <Alert severity="success">
           Your payment is Successful. Thanks for using our service.
       </Alert> 
       </Paper>
       </Grid>
      
        }




        </>
        </center>
    )
}