使用Stripe Firebase Extension Webhook未触发运行订阅付款

问题描述

我在the Stripe Subscriptions extension中添加了Firebase / Vue应用程序，以便为客户管理订阅计划，但是我认为Stripe Webhook存在问题。

我通过设置firebase.rules来开始扩展安装，就像在教程中说的那样：

firebase.rules：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read,write;
    }
    match /customers/{uid} {
      allow read,write: if request.auth.uid == uid;

      match /checkout_sessions/{id} {
        allow read,write: if request.auth.uid == uid;
      }
      match /subscriptions/{id} {
        allow read,write: if request.auth.uid == uid;
      }
    }

    match /products/{id} {
      allow read: if true;
      allow write: if false;

      match /prices/{id} {
        allow read: if true;
        allow write: if false;
      }
    }
  }
}

我按如下所示配置Stripe Webhook，并在firebase扩展中添加了webhook秘密：

我还在Stripe仪表板中创建了一个受限制的密钥，并将其也添加到扩展中。

当我测试从Stripe仪表板创建新产品时，网络挂钩成功，并且在firebase中创建了一个集合：

条纹产品仪表板：

Firestore：

现在，问题是：

当我尝试创建并完成Stripe检出时出现问题。在本教程中，看来我需要调用stripe.redirectToCheckout()，它将为我处理大部分工作，但是我似乎找不到结帐会话的sessionId。这是他们显示的示例：

const docRef = await db
  .collection('customers')
  .doc(currentUser.uid)
  .collection('checkout_sessions')
  .add({
    price: 'price_1GqIC8HYgolSBA35zoTTN2Zl',success_url: window.location.origin,cancel_url: window.location.origin,});
// Wait for the CheckoutSession to get attached by the extension
docRef.onSnapshot((snap) => {
  const { sessionId } = snap.data();
  if (sessionId) {
    // We have a session,let's redirect to Checkout
    // Init Stripe
    const stripe = Stripe('pk_test_1234');
    stripe.redirectToCheckout({ sessionId });
  }
});

这是我的实现方式

 async checkoutv2(item) {
      let currentUser = this.getCurrentUser();
      const stripe = window.Stripe(this.publishableKey);

      const docRef = await db
        .firestore()
        .collection("customers")
        .doc(currentUser.uid)
        .collection("checkout_sessions")
        .add({
          unit_amount: item["unit_amount"],plan: item["id"],description: item["description"],interval: item["interval"],currency: item["currency"],type: item["type"],interval_count: item["interval_count"],active: item["active"],// allow_promotion_codes: true,// tax_rates: ["txr_1HCshzHYgolSBA35WkPjzOOi"],mode: "subscription",metadata: {},});

      // Wait for the CheckoutSession to get attached by the extension
      docRef.onSnapshot((snap) => {
        const { sessionId } = snap.data();
        if (sessionId) {
          // We have a session,let's redirect to Checkout
          // Init Stripe
          stripe.redirectToCheckout({ sessionId });
        } else {
          console.log("NOPE");
        }
      });
    },

添加到Firestore后，似乎CheckOutSession会“附加”到扩展名，并创建会话ID并将其添加到文档中。但是我看不到我的版本会发生这种情况。正在创建checkout_sessions，但没有创建sessionId。

snap数据如下所示：

sessionId上没有任何内容，但是它确实有自己的ID，我相信这是Firestore自动为集合创建的ID。

查看我的日志，不会触发任何Webhook。当我测试特定的Webhook事件时，有些成功，有些却没有。

成功：

与价格，产品创建/更新/删除有关。
checkout.session.completed
customer.subscription.created

失败（错误状态代码400）：

customer.subscription.updated
customer.subscription.deleted（日志：类型为[customer.subscription.deleted]的Stripe事件[evt_00000000000000]的Webhook处理程序失败：无此类订阅：'sub_00000000000000'）

谁能告诉我发生了什么事？我正在使用Stripe API版本：2017-06-05。我已经在我的index.html中添加了以下内容：

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-functions.js"></script>

    <!-- If you enabled Analytics in your project,add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>

    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css"
    />

我的package.json：

{
  "name": "mathpath","version": "0.1.0","private": true,"description": "## Project setup ``` npm install ```","author": "","scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","start": "node index.js","bd": "vue-cli-service build && firebase deploy"
  },"main": "babel.config.js","dependencies": {
    "aws-sdk": "^2.719.0","axios": "^0.19.2","bootstrap": "^4.5.0","bootstrap-vue": "^2.1.0","core-js": "^3.6.5","dns": "^0.2.2","express": "^4.17.1","firebase": "^7.17.1","firebase-admin": "^9.0.0","firebaseui": "^4.6.0","fs": "0.0.1-security","jquery": "^3.5.1","katex": "^0.12.0","markdown-it": "^11.0.0","markdown-it-katex": "^2.0.3","mathjax-node": "^2.1.1","pg": "^8.2.2","pg-hstore": "^2.3.3","sequelize": "^6.3.0","showdown": "^1.9.1","showdown-katex": "^0.8.0","slugify": "^1.4.5","stripe": "^8.83.0","uniqid": "^5.2.0","vue": "^2.6.11","vue-katex": "^0.4.0","vue-router": "^3.3.4","vue-stripe-checkout": "^3.5.7","vue-youtube-embed": "^2.2.2","vuefire": "^2.2.3","vuex": "^3.5.1"
  },"devDependencies": {
    "@babel/polyfill": "^7.7.0","@vue/cli-plugin-babel": "~4.4.0","@vue/cli-plugin-eslint": "~4.4.0","@vue/cli-service": "~4.4.0","babel-eslint": "^10.1.0","bootstrap": "^4.3.1","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","mutationobserver-shim": "^0.3.3","popper.js": "^1.16.0","portal-vue": "^2.1.6","sass": "^1.19.0","sass-loader": "^8.0.0","vue-cli-plugin-bootstrap-vue": "~0.6.0","vue-template-compiler": "^2.6.11"
  },"eslintConfig": {
    "root": true,"env": {
      "node": true
    },"extends": [
      "plugin:vue/essential","eslint:recommended"
    ],"parserOptions": {
      "parser": "babel-eslint"
    },"rules": {
      "no-console": "off","no-restricted-syntax": [
        "error",{
          "selector": "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]","message": "Unexpected property on console object was called"
        }
      ]
    }
  },"browserslist": [
    "> 1%","last 2 versions","not dead"
  ],"license": "ISC"
}

解决方法

我遇到了同样的问题。

在它开始工作之前，我做了一些更改，我不确定到底是什么修复了它：

关闭我的Firebase模拟器并在生产数据上进行测试。修复之前，它似乎可以在仿真器中运行（原始帖子中提到的问题除外），但我尚未测试它是否可以在仿真器中修复。
在Stripe中删除我所有的测试数据和webhook，然后重新开始。
更新了我所有的firebase和vue-stripe-checkout依赖项：

“ firebase”：“ 7.19.1”， “ firebase-admin”：“ ^ 9.1.1”， “ firebase-functions”：“ ^ 3.11.0”， “ firebase-tools”：“ ^ 8.10.0”， “ firebaseui”：“ ^ 4.6.1”， “ vue-stripe-checkout”：“ ^ 3.5.7”

从2020-03-20到2020-08-27将Stripe仪表板中的Stripe API更新。
删除了扩展名，并使用CLI而不是控制台重新安装。配置扩展程序时，我唯一更改的是将客户集合设置为“用户”，因为这是我应用程序中的约定：https://firebase.google.com/products/extensions/firestore-stripe-subscriptions

完成所有这些操作后，我在Stripe中创建了一个测试订阅产品，并看到它出现在我的产品集中。在修复之前，该功能已经起作用。全新的是，我现在看到sessionId作为第二个snap.data（）响应的一部分。第一个响应看起来像“修复”之前的响应，我以为它再次失败了，但是在等待了一两秒钟之后，出现了一个新的响应，带有附加的sessionId参数?

我也在使用Vue。然后，我进行该会话并将其提交以更新状态。我看着这个会话改变，然后调用checkoutRef函数。这次，用户的收藏集将使用新的订阅进行更新。

对我来说，这段代码在store-auth.js中

async checkoutUser({ commit },payload) {
    let userId = firebaseAuth.currentUser.uid;

    const docRef = await firebaseDb
      .collection("users")
      .doc(userId)
      .collection("checkout_sessions")
      .add({
        price: "YOUR_PRICE_ID",success_url: window.location.origin,cancel_url: window.location.origin,mode: "subscription"
      });

    docRef.onSnapshot(snap => {
      const test = snap.data();

      const { sessionId } = snap.data();
      if (sessionId) {
        commit("setSession",sessionId);
      }
    });
  },

这就是您使用vue-stripe-checkout的任何地方。对我来说，它位于PagePlans.vue

    <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :mode="mode"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
    :session-id="sessionId"

  watch: {
    currentSession: {
      handler(newValue,oldValue) {
        this.sessionId = newValue

        this.$refs.checkoutRef.redirectToCheckout({scenarioId: newValue.sessionId})
      }
    }
  },computed: {
    ...mapGetters("auth",["currentSession"]),},methods: {
    ...mapActions("auth",[
      "checkoutUser",]),async checkout() {
      await this.checkoutUser()
    }
  }

对于Firebase云功能，我查看了日志，发现这是访问问题。

编辑您的受限API密钥并允许客户权限

条带限制的API权限：

Stripe的Firebase功能：

使用条纹Firebase扩展时，我遇到了同样的问题。在条纹firebase扩展配置中，将checkout_sessions放在customers集合中，在我的代码中，我使用的是users集合。

在两个地方都使用users后就开始工作。

firebase-extensions google-cloud-firestore stripe-payments webhooks

使用Stripe Firebase Extension Webhook未触发运行订阅付款

问题描述

解决方法

相关问答