How to generate a Receipt Page after Stripe Checkout - reactjs

Question

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

Answer 1

You can learn about sending receipts from Stripe on successful payment or refunds here
To your second question, use card no 4000 0025 0000 3155 to test 3D secure integration. Read more here