Stripe前端集成报错：.createServer is not a function 修复求助

问题根源 #

你在前端代码里错误导入了后端专用的Stripe Node.js库，这个库依赖Node.js的http模块，而浏览器环境中不存在该模块，直接导致了.createServer is not a function的报错。你之前添加的stripe.DEFAULT_TIMEOUT = require('http').createServer(function(){}).timeout完全无效，因为浏览器里根本没有require('http')这个能力。

修复步骤 #

1. 替换前端Stripe库 #

前端必须使用Stripe官方提供的浏览器SDK，而非npm上的stripe包，有两种实现方式：

方式一：通过CDN引入（最简单）

在项目的index.html中添加Stripe的CDN脚本：

<script src="https://js.stripe.com/v3/"></script>

然后修改你的stripe.js文件，移除后端库的导入，直接使用全局的Stripe对象：

/* eslint-disable*/
import axios from 'axios';
import { showAlert } from './alerts';

// 直接使用CDN注入的全局Stripe对象
const stripe = Stripe(process.env.PUBLIC_STRIPE_KEY);

export const bookTour = async (tourId) => {
  try {
    // 1) 从后端获取Checkout会话
    const session = await axios(
      `http://127.0.0.1:3000/api/v1/bookings/checkout-session/${tourId}`
    );
    // 2) 跳转到Stripe支付页面
    await stripe.redirectToCheckout({
      sessionId: session.data.session.id,
    });
  } catch (err) {
    console.log(err);
    showAlert('error', err.message);
  }
};

方式二：使用npm包（适合打包工具环境）

先安装浏览器版的Stripe SDK：

npm install @stripe/stripe-js

然后修改stripe.js：

/* eslint-disable*/
import axios from 'axios';
import { showAlert } from './alerts';
import { loadStripe } from '@stripe/stripe-js';

// 异步加载Stripe SDK
const stripePromise = loadStripe(process.env.PUBLIC_STRIPE_KEY);

export const bookTour = async (tourId) => {
  try {
    const session = await axios(
      `http://127.0.0.1:3000/api/v1/bookings/checkout-session/${tourId}`
    );
    const stripe = await stripePromise;
    await stripe.redirectToCheckout({
      sessionId: session.data.session.id,
    });
  } catch (err) {
    console.log(err);
    showAlert('error', err.message);
  }
};

2. 修复后端代码的拼写错误 #

你的bookingController.js里存在几处拼写错误，会导致Stripe会话创建失败：

• payment_method_type → 改为复数payment_method_types
• line_itmes → 改为line_items
• summery → 改为summary
• cancel_url里多余的// → 改为/tour/${tour.slug}

修改后的会话创建代码：

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  success_url: `${req.protocol}://${req.get('host')}/`,
  cancel_url: `${req.protocol}://${req.get('host')}/tour/${tour.slug}`,
  customer_email: req.user.email,
  client_reference_id: req.params.tourId,
  mode:'payment',
  line_items: [
    {
      name: `${tour.name} Tour`,
      description: tour.summary,
      images: [`https://www.natours.dev/img/tours/${tour.imageCover}`],
      amount: tour.price * 100,
      currency: 'usd',
      quantity: 1,
    },
  ],
});

3. 清理无用代码 #

彻底移除你之前添加的stripe.DEFAULT_TIMEOUT = require('http').createServer(function(){}).timeout，这段代码在浏览器环境中完全无效。

内容的提问来源于stack exchange，提问作者Tor Bloodaxe