在Vue.js中使用Stripe API遇“Require is not defined”错误，如何修改代码？

问题根源 #

require是Node.js专属的CommonJS模块导入语法，Vue前端代码运行在浏览器环境，原生不支持该语法。更关键的是：你代码里的Stripe秘钥（sk_开头）绝对不能暴露在前端代码中，一旦泄露会导致账户被盗刷等严重安全问题。

正确修改方案 #

创建客户、管理发票这类敏感操作必须放在后端（比如Node.js服务器）执行，前端仅通过API接口调用后端服务。

1. 后端代码（Node.js示例）

在你的后端服务中编写接口处理Stripe逻辑，这里以Express为例：

// 后端路由文件
const stripe = require('stripe')('sk_test_51M6ZtzIWDjpHNQK1pihAHQGM9Hh7aGVggo7yICRvYNUPqmHA2nIB9OLU6UrVmnWU8Spzcl1ZkPdRZu6zYCSVO7fi008peIrX1g');
const express = require('express');
const router = express.Router();

router.post('/api/create-stripe-customer', async (req, res) => {
  try {
    const { email, paymentMethodId } = req.body;
    const customer = await stripe.customers.create({
      email,
      payment_method: paymentMethodId,
      invoice_settings: { default_payment_method: paymentMethodId },
    });
    res.status(200).json({ customerId: customer.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

module.exports = router;

2. 前端Vue组件代码

前端通过HTTP请求调用后端接口，不要直接处理Stripe秘钥：

<template>
  <div>
    <button @click="createStripeCustomer">创建Stripe客户</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async createStripeCustomer() {
      try {
        // 注意：实际场景中paymentMethodId需通过Stripe Elements前端组件获取，而非硬编码
        const response = await axios.post('/api/create-stripe-customer', {
          email: 'jenny.rosen@example.com',
          paymentMethodId: 'pm_card_visa'
        });
        console.log('客户创建成功，ID:', response.data.customerId);
      } catch (err) {
        console.error('创建失败:', err.response?.data?.error || err.message);
      }
    }
  }
}
</script>

补充：前端仅处理支付收集的场景

如果需要在前端处理支付方式收集（比如Stripe Elements），需使用Stripe的前端SDK，安装并通过ES模块导入：

1. 安装依赖：

npm install @stripe/stripe-js

2. Vue组件中使用：

import { loadStripe } from '@stripe/stripe-js';

export default {
  async mounted() {
    // 这里使用Stripe公钥（pk_开头），而非秘钥
    const stripe = await loadStripe('pk_test_你的公钥');
    // 后续可初始化Elements组件收集支付方式
  }
}

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