条纹结帐后如何生成收据页面

Posted 2023-03-22

【中文标题】条纹结帐后如何生成收据页面

【英文标题】：How to generate a Receipt Page after Stripe Checkout

【发布时间】：2021-11-15 18:56:58

【问题描述】：

我是条带和 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>
    )

【参考方案1】：

您可以了解如何从 Stripe 发送成功付款或退款的收据here

对于第二个问题，使用卡号 4000 0025 0000 3155 测试 3D 安全集成。阅读更多here

【讨论】：

谢谢@RobLjm，我试过上面没有给出的卡，但3ds没有弹出。我是不是做错了什么。

据我了解，3D Secure auth 仅在卡或银行需要时才进行。您是否尝试过使用 4242 4242 4242 4242 卡进行测试（这是一张不需要 3ds 的有效卡）？

@SarahKaiser 如果您准确地分享您正在使用的代码或您正在遵循的确切教程，它可能会有所帮助。

@RobLjm 我也试过 4242 4242 4242 4242 但在仪表板中仍然显示不完整，需要 3ds 身份验证

@karllekko，嘿，实际上我丢失了原始教程的 URL，但它与这里的非常相似 --> betterprogramming.pub/…