Quasar框架下Stripe客户端集成问题求助

我之前也碰到过Quasar里引入Stripe.js的这个坑，本质是页面加载顺序或者Quasar的构建流程导致Stripe脚本还没加载完成，你就提前执行了初始化代码，所以才会报Stripe is not defined的错误。下面给你几个靠谱的解决思路：

1. 动态加载Stripe脚本（组件内单独处理，推荐） #

这种方式最灵活，适合只在单个组件里用到Stripe的场景，能确保脚本加载完成后再初始化：

export default {
  data() {
    return {
      stripe: null,
      elements: null
    };
  },
  mounted() {
    // 先检查Stripe是否已经加载
    if (!window.Stripe) {
      const script = document.createElement('script');
      script.src = 'https://js.stripe.com/v3/';
      script.async = true;
      // 脚本加载完成后再初始化Stripe
      script.onload = () => {
        this.stripe = window.Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd');
        this.initElements();
      };
      document.head.appendChild(script);
    } else {
      this.stripe = window.Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd');
      this.initElements();
    }
  },
  methods: {
    initElements() {
      this.elements = this.stripe.elements();
      // 这里可以创建并挂载你需要的Elements组件，比如卡片输入框
      const cardElement = this.elements.create('card');
      cardElement.mount('#card-element');
    }
  }
};

2. 使用Quasar Boot文件全局初始化（多组件共用） #

如果你的多个组件都需要用到Stripe，用Quasar的boot文件全局初始化会更方便：

第一步：创建boot文件 #

在src/boot目录下新建stripe.js：

export default async ({ app }) => {
  return new Promise((resolve) => {
    // 避免重复加载
    if (window.Stripe) {
      app.config.globalProperties.$stripe = window.Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd');
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://js.stripe.com/v3/';
    script.async = true;
    script.onload = () => {
      app.config.globalProperties.$stripe = window.Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd');
      resolve();
    };
    document.head.appendChild(script);
  });
};

第二步：注册boot文件 #

在quasar.config.js里把这个boot文件加进去：

module.exports = configure(function (ctx) {
  return {
    // ...其他配置
    boot: [
      'stripe' // 新增这一行
    ],
    // ...其他配置
  };
});

之后在任意组件里，直接通过this.$stripe就能访问Stripe实例了。

3. 确保脚本加载完成后再执行初始化（index.template.html方式） #

如果你坚持要在index.template.html里引入脚本，可以给脚本加onload标记，确保加载完成后再初始化：

在index.template.html的<head>里添加：

<script src="https://js.stripe.com/v3/" onload="window.stripeReady = true"></script>

然后在组件的mounted钩子中等待标记生效：

mounted() {
  const checkStripeReady = setInterval(() => {
    if (window.stripeReady) {
      clearInterval(checkStripeReady);
      this.stripe = window.Stripe('pk_live_dMLr0hShLxaZmXesv1buhndd');
      this.initElements();
    }
  }, 100);
}

重要提醒 #

• 别把Stripe的live publishable key硬编码在代码里！最好用Quasar的环境变量来注入，比如在.env文件里定义VUE_APP_STRIPE_PK=pk_live_xxx，然后用process.env.VUE_APP_STRIPE_PK来获取。
• Stripe要求生产环境必须用HTTPS，不过localhost是例外，本地测试没问题。

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