使用 react 和 stripe 创建测试支付网关

Question

嘿，我正在我的网站上使用 react 制作支付网关，所以我正在使用 stripe js（用于测试）我已经将我的支付组件包装在 app.js 的 Elements 中

const promise = loadStripe("my stipe publishable key")

<Route path='/payment'> 
         <Header/>
          <Elements stripe={promise}>
          <Payment/>
          </Elements>
        </Route>

我在支付组件中的代码是

我使用 firebase 托管作为后端，所以我的运行命令 firebase init 创建了一个名为函数的文件夹（“因为我在运行 firebase init 后选择了函数选项”）并且对于 axios 我已经在我的 axios.js 文件中编写了这段代码

import axios from "axios";

const instance = axios.create({

    baseURL: "http://localhost:5001/*****/******/api"

});

export default instance;

和这里使用的 baseURL 我通过在运行 firebase init 创建的函数文件夹中的 index.js 中编写一些代码来获得我在 index.js 中编写的代码是

const functions = require('firebase-functions');

const express = require("express");

const cors = require("cors");

const stripe = require("stripe")('my stripe secret key here')

//API

//App config

const app = express();

//Middlewares

app.use(cors({origin: true}));

app.use(express.json());

//API routes

app.get('/', (request, response) => response.status(200).send('hello world'))

app.post('/payment/create', async(request, response) => {

    const total = request.query.total;

    console.log('Payment Request Recieved BOOM!!! for this amount', total)

    const paymentIntent = await stripe.paymentIntents.create({

        amount: total,

        currency: "usd",

    });

    //OK Created

    response.status(201).send({

        clientSecret: paymentIntent.client_secret,

    })

})

//Listen command

exports.api = functions.https.onRequest(app)

从这里我得到了我的 api，它在终端函数 [api] 中用作基本 url ：http 函数已初始化（http://localhost:5001/abcdabcdabcd/abcabcd/api）。

Answer 1

这里需要考虑以下几点：/payment/create通过挂钩调用useEffect，您将在每次组件更新时创建一个新的 PaymentIntent。这是非常低效的，并且会给您留下许多未使用的 PaymentIntents，使您的 Stripe 帐户变得混乱。相反，您应该只在用户打算购买某物时创建 PaymentIntent，例如当他们单击“购买”按钮时。您正在传递要从客户那里收取的总金额。这意味着恶意用户将许多东西添加到他们的购物车然后编辑该请求以确保他们被收取的费用比您预期的少得多是微不足道的。所有与计算总金额有关的逻辑都应该在服务器上完成，而不是客户端。您的服务器日志没有显示任何实际付款失败。由于您是在客户端进行确认，因此您可能在那里遇到错误，但在看到错误之前进行了重定向。您应该监听错误对象而不是立即重定向：stripe.confirmCardPayment(clientSecret, {  payment_method: {    card: elements.getElement(CardElement)  }}).then((result) => {  if (result.error) {    // payment failed, do something with the error    console.log(result.error.message);  } else {    setSucceeded(true);    setError(null)    setProcessing(false)    history.replace('/order')});您还可以通过查看仪表板来检查您的 Stripe 日志：https://dashboard.stripe.com/test/logs