如何解决使用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中创建了一个集合:
现在,问题是:
当我尝试创建并完成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
。
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密钥并允许客户权限
,使用条纹Firebase扩展时,我遇到了同样的问题。在条纹firebase扩展配置中,将checkout_sessions
放在customers
集合中,在我的代码中,我使用的是users
集合。
在两个地方都使用users
后就开始工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。