Reactjs Stripe 支付不适用于 Node/Express

Posted 2023-02-22

【中文标题】Reactjs Stripe 支付不适用于 Node/Express

【英文标题】：Reactjs Stripe payment not working with Node/Express

【发布时间】：2021-02-20 17:58:00

【问题描述】：

我是第一次在我的 react 项目中使用 stripe。

我已使用测试 API 密钥设置付款。我已经使用 javascript 和 React 几年了，但我对 node.js / express 知之甚少。所以我使用沙箱中的样板作为后端，你可以在下面看到；

const cors = require("cors");
const express = require("express");
const stripe = require("stripe")("MY TEST KEY HAS BEEN INSERTED HERE");
const uuid = require("uuid/v4");

const app = express();

app.use(express.json());
app.use(cors());

app.get("/", (req, res) => 
  res.send("Add your Stripe Secret Key to the .require('stripe') statement!");
);

app.post("/checkout", async (req, res) => 
  console.log("Request:", req.body);

  let error;
  let status;
  try 
    const  product, token  = req.body;

    const customer = await stripe.customers.create(
      email: token.email,
      source: token.id
    );

    const idempotency_key = uuid();
    const charge = await stripe.charges.create(
      
        amount: 8.00,
        currency: "gbp",
        customer: customer.id,
        receipt_email: token.email,
        description: `Purchased the $product.name`,
        name: token.card.name,
      ,
      
        idempotency_key
      
    );
    console.log("Charge:",  charge );
    status = "success";
   catch (error) 
    console.error("Error:", error);
    status = "failure";
  

  res.json( error, status );
);

app.listen(8080);

这是 react js 中的函数，它处理即使用户输入卡号等情况。

  async function handleToken(token)

    let whichClass = 
      name: "Bodytone",
      price: 8.00
    
   
    const response = await axios.post("https://s9mh5.sse.codesandbox.io/checkout", token, whichClass);

    const  status  = response.data;

    if (status === "success") 
      alert("Successful payment");
     else 
      alert("failed payment");
    

  

我发现当我在输入详细信息后点击发送付款时，我看到绿色勾号表示一切顺利。但在此帐户的条带仪表板中，没有显示任何测试付款的结果。

在控制台中，我看到记录了两条不同的错误消息，详细信息如下：

StripeCheckout.open：“token”或“source”都是必需选项，但都没有找到。 您可以在 Checkout 文档中了解可用的配置选项： https://stripe.com/docs/checkout0.chunk.js:108728:20

还有.....

**Uncaught TypeError: this.fn is not a function
    trigger https://checkout.stripe.com/checkout.js:3
    bind https://checkout.stripe.com/checkout.js:3
    onToken https://checkout.stripe.com/checkout.js:3
    closed https://checkout.stripe.com/checkout.js:3
    bind https://checkout.stripe.com/checkout.js:3
    processMessage https://checkout.stripe.com/checkout.js:2
    bind https://checkout.stripe.com/checkout.js:2
    message https://checkout.stripe.com/checkout.js:2
    RPC https://checkout.stripe.com/checkout.js:2
checkout.js:3:24013**

是否有人能够发现错误/错误？

非常感谢您的帮助和反馈！

【参考方案1】：

您应该考虑使用 new Checkout 而不是您现在使用的旧版，或者可能使用 Elements 来构建您自己的表单，您可以使用 https://github.com/stripe/react-stripe-js。

也就是说，您没有提供足够的客户端代码来诊断问题。

【讨论】：

嗨@floatingLomas，感谢您的反馈和建议！我肯定会考虑该建议。