In this tutorial, I'll guide you through the creation of a 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.
Make.com Blueprints
Download the Add Credit Make Blueprint.
Download the Remove Credit Make Blueprint.
Body Scripts & Attributes
Copy the </body> script to Trigger a Page Redirect with a Delay.
Copy the <body> script and attribute to Display Member Metadata.
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.
Here are the features mentioned in the video:
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.
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.
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.
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.
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.
-------------
Keywords: Tokens, Credits, Chips, Coins, Tickets, Units, Game currency, Currency substitutes, Points, Balance, Virtual currency, etc.
Comments
2 comments
Hi Duncan from Memberstack, is it possible that, after a user redeems credits, we could gain access to specific CMS items? I'm considering the possibility of, maybe after updating the credits key in the metadata of one member, adding another metadata field, containing the CMS Item ID. What are your thoughts on this approach?
Hi Luciana Yamaji 👋
My first thought is to use our "Add plan" action to add a free plan to the member. If the free plan grants access to your CMS item(s) then the customer now has access.
But I like your idea too! If you're open to gated content yourself using custom code then it should work just fine 👍
Please sign in to leave a comment.