[Code] Credit System with Make.com & Webflow

Article author
Duncan Hamra

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.

 

Was this article helpful?

Comments

2 comments

  • Comment author
    Luciana Yamaji

    Hi Duncan-Hamra, 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?

    1
  • Comment author
    Duncan Hamra

    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 👍

    1

Please sign in to leave a comment.