如何在Stripe Checkout后生成收据页面

Question

我是条带和api的新手，并遵循教程实现条带结帐并成功实现，但我想在条带结帐后显示收据。

你知道任何这样的教程吗?或者有人可以帮助吗?

此外，付款后，在条纹仪表板中，我得到的状态为不完整，它说需要我在设置中打开的three_d_secure身份验证，但每当我输入卡的详细信息时，它永远不会问。我也想学这个。让我知道如果有任何好的资源相同的。如果有人给我指路，我会很感激的。

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

您可以在这里了解如何在成功付款或退款时从Stripe发送收据

对于你的第二个问题，使用编号为4000 0025 0000 3155的卡测试3D安全集成。点击这里阅读更多内容