如何监听Stripe cardElement输入事件判断卡片有效性并禁用按钮

问题根因 #

你当前无法触发cardElement.on()事件的核心原因是事件监听逻辑被写在了提交触发的createOrder方法中，只有用户点击提交按钮时才会绑定监听，用户输入信用卡信息的阶段没有对应监听器运行，自然无法捕获输入变更事件。

具体修改步骤 #

1. 新增响应式状态变量 #

在Vue实例的data中新增两个状态变量，分别用于标记信用卡是否合法、提交是否处于加载中：

data() {
  return {
    // 原有其他变量
    isCardValid: false,
    isLoading: false
  }
}

2. 在mounted阶段绑定信用卡输入监听 #

在Stripe Card元素挂载完成后直接绑定change事件监听，实时更新信用卡合法状态：

async mounted() {
  const stripe = await loadStripe(process.env.VUE_APP_STRIPE_PK);
  const elements = stripe.elements();
  const card = elements.create("card", { style: style });
  card.mount("#stripe-element-card");
  
  // 绑定信用卡输入变更监听
  card.on('change', (event) => {
    // 处理错误提示
    const errorDom = document.getElementById('card-error');
    errorDom.textContent = event.error ? event.error.message : '';
    // 同步信用卡合法状态
    this.isCardValid = event.complete;
  });
}

3. 修改提交按钮禁用逻辑 #

调整按钮的disabled判断条件，同时满足表单验证通过、信用卡有效、未处于加载中三个条件才可点击：

<button
  v-if="toggleUserInfo"
  id="submit"
  class="stripe"
  :disabled="$v.$invalid || !isCardValid || isLoading"
  type="submit"
>
  <div
    id="spinner"
    class="spinner"
    :class="{ hidden: !isLoading }"
  ></div>
  <span id="button-text" :class="{ hidden: isLoading }">Pay now</span>
</button>

4. 调整createOrder提交逻辑 #

删除原有方法内的事件绑定代码，新增加载状态控制，防止重复提交：

async createOrder(event) {
  this.isLoading = true;
  this.$v.$touch();
  
  // 前置校验不通过直接终止流程，重置加载状态
  if (this.$v.$invalid || !this.isCardValid) {
    this.isLoading = false;
    return;
  }

  try {
    // 原有订单信息收集、Stripe支付逻辑
    const cardElement = elements.getElement("card");
    const billingDetails = {
      name: user.name,
      address: {
        city: user.city,
        line1: user.street,
        state: "NY"
      },
      phone: user.phone
    };
    // 后续支付、订单创建逻辑
    // ...
    // 支付成功后执行重定向
  } catch (err) {
    // 错误提示逻辑
    console.error('支付失败', err);
  } finally {
    // 无论成功失败都重置加载状态，恢复按钮可点击性
    this.isLoading = false;
  }
}

内容的提问来源于stack exchange，提问作者Kevin T.