Creating a Credit System with Make, Webflow, and Memberstack
In this tutorial, I'll guide you through a fully functional credit or token system using Make, Webflow, and Memberstack. You'll learn how to set up a system where users can purchase, view, and redeem credits.
The video provides a step-by-step guide on setting up gated content, creating a paid plan for purchasing credits, connecting your Stripe account, managing credit transactions, and presenting it in Webflow.
🔗 Link to code & Make.com Blueprints: https://docs.memberstack.com/hc/en-us...
Timestamps:
00:00 - Introduction
00:13 - Credit purchasing demo
01:16 - Setting up 'Has Credits' free plan
02:04 - Creating 'Buy Credit' paid plan
02:25 - Adding a Credit Scenario in Make
03:12 - Setting up Stripe events
07:47 - Handling form submission data
08:05 - Managing credit deductions
09:14 - Webflow site setup and structure
10:06 - Setting up 'Buy Credits' page in Webflow
10:47 - Displaying number of credits using Memberstack
If anything is unclear, please leave a comment, and I'll make sure to provide further explanations.
Remember to subscribe for more tutorials and updates!
#Webflow #Memberstack #Make #Stripe #WebflowTutorial #MemberstackTutorial #creditsystem
Here are the features mentioned in the video:
1. Memberstack
Creating a free plan for users who have credits, including gating content and directing to a success page on plan purchase.
Setting up a paid plan for buying credits.
Looking up a customer's data using their Memberstack ID.
Adding or removing plans depending on the number of credits a user has.
2. Make
Setting up a scenario to add a credit.
Importing a provided blueprint to replicate the set-up.
Connecting to your Stripe account for payment handling.
3. Stripe
Watching events for successful charges, enabling the activation of the Make scenario.
Retrieving and using Stripe's API keys for testing and live modes.
4. Webflow
Structuring the site with various pages such as sign-up/login, buy credits, and a success page.
Implementing a delay to ensure Memberstack updates are complete before the page reloads.
Hiding the form for buying credits if Memberstack fails to load.
Displaying the number of credits a user has using Webflow Interactions and custom code in the body tag.
5. Credit System Functionality
Purchasing credits via a Stripe checkout.
Displaying the number of credits a user has.
Providing an option for users to redeem their credits.
Managing the increment and decrement of a user's credits.
Redirecting users to different pages based on their credit transactions.