Reactjs Stripe 付款不適用於 Node/Express

Question

我第一次在我的反應項目中使用條紋。

我已經使用測試 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/checkout 0.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**

有沒有人能夠發現錯誤/錯誤？

非常感謝您的幫助和反饋！！

Answer 1

您應該考慮使用新的 Checkout而不是您現在使用的舊版Checkout ，或者可能使用 Elements 來構建您自己的表單，為此您可以使用https://github.com/stripe/react-stripe-js 。

也就是說，您沒有提供足夠的客戶端代碼來診斷問題。