Vue-Stripe报错：redirectToCheckout不是函数，疑关联旧npm版本

问题背景 #

升级旧网站集成Stripe结账功能时，点击结账按钮触发报错：this.$refs.checkoutRef.redirectToCheckout is not a function。该功能在测试项目中可正常运行，当前项目与测试项目仅Node.js版本不同（当前使用Node.js 14.18.1），安装的vue-stripe版本为4.4.4，怀疑问题由版本兼容性导致。

相关代码片段：

<template>
  <!-- 省略其他代码 -->
  <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
  />
  <button class="btn btn-danger unpaid" @click="checkout">Checkout</button>
  <!-- 省略其他代码 -->
</template>

<script>
import axios from "axios";
import qs from 'query-string';
import {StripeCheckout} from '@vue-stripe/vue-stripe';

export default {
  components: {
    StripeCheckout,
  },
  name: 'MeineRechnungen',
  data() {
    this.publishableKey = process.env.VUE_APP_STRIPE_PUBLISHABLE_KEY;
    return {
      loading: false,
      lineItems: [
        {
          price: process.env.VUE_APP_STRIPE_PRODUCT_STANDARD,
          quantity: 1,
        },
      ],
      successURL: 'https://xxxxx.com',
      cancelURL: 'https://xxxxx.com',
      invoices: ''
    }
  },
  methods: {
    checkout() {
      this.$refs.checkoutRef.redirectToCheckout();
    },
    // 省略其他方法
  }
}
</script>

排查与解决方案 #

1. 版本兼容性修复 #

vue-stripe@4.4.4的依赖要求可能不兼容Node.js 14.x：

• 升级Node.js版本：将Node.js升级到16.x及以上（推荐LTS版本如16.20.2），然后执行rm -rf node_modules package-lock.json && npm install重新安装依赖。
• 降级vue-stripe版本：如果无法升级Node.js，可尝试降级到@vue-stripe/vue-stripe@3.x版本（该版本兼容Node.js 14），执行命令：npm uninstall @vue-stripe/vue-stripe && npm install @vue-stripe/vue-stripe@3.x，注意适配3.x版本的API（部分参数或方法名可能有变化）。

2. 修正组件调用方式 #

vue-stripe@4.x中，redirectToCheckout方法可能需要通过组件内部的Stripe实例调用，而非直接在组件ref上调用：
修改checkout方法如下：

checkout() {
  // 先确认组件实例和Stripe实例存在
  if (this.$refs.checkoutRef && this.$refs.checkoutRef.stripe) {
    this.$refs.checkoutRef.stripe.redirectToCheckout({
      lineItems: this.lineItems,
      mode: 'payment',
      successUrl: this.successURL,
      cancelUrl: this.cancelURL
    }).catch(err => {
      console.error('Stripe结账调用失败:', err);
    });
  } else {
    console.error('Stripe组件未正确挂载或Stripe实例未初始化');
  }
}

3. 调试验证步骤 #

• 在checkout方法中添加打印语句，确认ref获取的实例内容：

  checkout() {
    console.log('checkoutRef实例:', this.$refs.checkoutRef);
    // 后续调用代码
  }
  

• 检查浏览器控制台是否有Stripe脚本加载失败的报错，确认publishableKey是否正确配置。

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