Paddle Subscription with Firebase
If you building a SaaS app with Google Firebase and wants to integrate subscription payments, then Paddle is one of the best and easy option.
Why Paddle?
There are many options for subscription billing for your SaaS services like Paddle, Stripe, Braintree and many more. But I choose Paddle of MondayMetrics because is it's easily available in my country and it’s very easy to integrate.
MondayMetrics is built with Firebase and VueJs. I am using Firebase functions to handle payment webhooks form Paddle.
In order to integrate Paddle, first of all, set up your account on Paddle and create a subscription. Note down the subscription product code. It will be used in the checkout process.
Add checkout to the frontend app
We have created a subscription plan in Paddle now we have to add the checkout button in our app so a user can subscribe to that plan.
First, add the Paddle JavaScript library to your page.
Now we have to provide a button where the user can click and the checkout process will start. Here is an example of the Vue component.
Change the product id in the above example with your subscription checkout id.
Our front end part for checkout is complete. Now we have to add a firebase function to handle Webhook requests from Paddle and update the subscription details if your Firestore (or Firebase) database.
Webhook handling with Firebase Functions
The second part of the integration is to handle the incoming Webhook requests from Paddle. Whenever a user subscribes or cancels a plan or updates any details, Paddle will be sent the events to your registered Webhook. Check out the event reference for more details about the subscription events at https://developer.paddle.com/webhook-reference/subscription-alerts
Now we will create an HTTP trigger function for firebase to handle the incoming post request. Here is a snippet for the HTTP handler.
The above code will handle the incoming webhook and verify it. Then it will update the subscription details in subscription collection in your firestore database.
Now once you deploy this function to firebase, you will get a URL for this function. Copy this URL and add this to your Paddle Webhooks settings. This is all. Now your app is ready to handle the subscription. So once your customer clicks the checkout button, a checkout popup will open and Paddle will handle the next. Once the payment is complete, your function will receive an event and your database will be updated with subscription details.
That's all.
What Next…
You have received your first subscription. The subscription details in the database will have the links to update or cancel the subscription. You can add these links to your user account page so the user can manage his subscription.
This is all for now. If something missing, comment below.
Did it help? Buy me a coffee ->
… What is MondayMetrics?
MondayMetrics is a tool to track your social medial metrics and get weekly emails of your growth. With this service, you can track
- Twitter Followers
- Instagram Followers
- Pinterest Followers
- Github Followers
- Github Repo Start
- HackerNews Karma
