node.js - 无法重定向到 Stripe 托管的结帐页面

Question

我正在尝试将 Stripe Checkout 集成到 MERN 应用程序中。我以前从未做过支付整合。

在Shopping页面上，每当我点击Checkout按钮时，理想情况下我应该被重定向到 Stripe 托管的支付页面。但是我收到一个错误。

错误 以下是Network选项卡中的响应。

{"message":"You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/.","stack":"Error: You did not provide an API key. You need to provide your API key in the Authorization header, using Bearer auth (e.g. 'Authorization: Bearer YOUR_SECRET_KEY'). See https://stripe.com/docs/api#authentication for details, or we can help at https://support.stripe.com/.\n    at IncomingMessage.<anonymous> (D:\\FINISHED CODING PROJECTS\\STRIPE-PAYMENT\\node_modules\\stripe\\lib\\StripeResource.js:174:21)\n    at Object.onceWrapper (events.js:421:28)\n    at IncomingMessage.emit (events.js:327:22)\n    at endReadableNT (internal/streams/readable.js:1327:12)\n    at processTicksAndRejections (internal/process/task_queues.js:80:21)"}

我究竟做错了什么？

代码片段如下：

src/App.js

import React, { useState } from "react";
import axios from "axios";
import Header from "./components/Header";
import Shopping from "./components/Shopping";
import RegisterForm from "./components/RegisterForm";
import LoginForm from "./components/LoginForm";
import { Route, Switch } from "react-router-dom";
import { useSelector } from "react-redux";

import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe(
  "pk_test_51I29jDKK144e4HAvKFfcQEjfPm3PWRDDS5fa1fWXM7bdBlpz92vROkIA04yoJbKYB5FEe42sOLOKu6D4TiDRDy0e0059Iop568"
);

const App = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const handleMenuClick = () => {
    setMenuOpen(!menuOpen);
  };

  const handleOverlayClick = () => {
    setMenuOpen(!menuOpen);
  };

  const handleSidedrawerNavbarLinkClick = () => {
    setMenuOpen(!menuOpen);
  };

  const { user } = useSelector((state) => state.login);

  const handleCheckoutClick = async () => {
    const stripe = await stripePromise;

    const config = {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.REACT_APP_STRIPE_SECRET_KEY}`,
      },
    };

    const response = await axios.post("/api/payment/checkout-session", config);

    const id = response.id;

    await stripe.redirectToCheckout({
      sessionId: id,
    });
  };

  return (
    <>
      <Header
        menuOpen={menuOpen}
        onMenuClick={handleMenuClick}
        onSidedrawerNavbarLinkClick={handleSidedrawerNavbarLinkClick}
        onOverlayClick={handleOverlayClick}
      />
      <Switch>
        <Route
          path="/buy"
          render={(props) => (
            <Shopping {...props} handleCheckoutClick={handleCheckoutClick} />
          )}
        />
        <Route path="/registerLogin" component={LoginForm} />
        <Route path="/register" component={RegisterForm} />
      </Switch>
    </>
  );
};

export default App;

服务器/路由/paymentRoutes.js

const express = require("express");
const asyncHandler = require("express-async-handler");
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

const router = express.Router();

const YOUR_DOMAIN = "http://localhost:3000/";

router.post(
  "/checkout-session",
  asyncHandler(async (req, res, next) => {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "INR",
            product_data: {
              name: "Vase",
              images: ["https://i.imgur.com/EHyR2nP.png"],
            },
            unit_amount: 10000,
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${YOUR_DOMAIN}?success=true`,
      cancel_url: `${YOUR_DOMAIN}?canceled=true`,
    });
    res.json({ id: session.id });
  })
);

module.exports = router;

标签： node.jsstripe-paymentspayment-gatewaypaymentpayment-processing