How to add credits with a plan

Hey guys!

I’m new to Webflow and I think it’s fantastic so far.

I’m setting up a system with Webflow, Memberstack, and Make.

This provides a SaaS for the user, I want the user to buy a plan that gives him x amount of credits, and each time he uses the service he consumes a credit.

My question is, is there a way to have a custom field that counts the number of credits the user has purchased and then deducts a credit for each request?

If the user has no credits, he is invited to buy more credits.

I really appreciate any help you can provide.

1 Like

Memberstack allows you to get the member id via script, so you can use that to build a “buy one” button.

That button would be a submit button on a hidden form, that triggers a webhook on Make, to check available credits. If there are enough, debit and return success. If there are not enough, return a failure.

  • Inputs: Memberstack MemberID, number credits paying
  • Outputs: Success/fail, message, and number credits remaining

You’d want to track the user credit balances somewhere, I’d recommend AirTable. Easy to report and update.

NOTE: Personally I’d build it so that you can specify the number of credits you want to debit, and default to 1. It’s just as easy, and you might have premium products later.

When a user completes a transaction, you have a success/fail response, and display the appropriate form success or failure message that Webflow lets you design.
Your fail message would invite them to buy more credits, with a link.

You can custom script that, or you can use my attributes-based tool here-

Just return a webhook response with a 200-range HTTP response code for success, or a 400+ for errors. That way you can build it like an API with different messages, e.g. member unknown, member account locked, unable to access database.

The tool will take care of displaying success / fail automatically based on the webhook response.

For a “you have X credits remaining” message.
You could build a second Make webhook that get that balance, or you can use the first one with a 0 credit payment request, and use the credit balance it returns.

Are you using Webflow ECommerce?

You could create some products there with credit values, and then install a webhook directly from Webflow’s API to notify a “top-up” Make automation of new orders. Here you might have to get creative to figure out how to insert the Memberstack member ID into the order data as a hidden custom field.

Pretty sure it can be done, but I haven’t tried that bit.

Thanks, Michael, I’m digesting your answer and looking forward to implementing it as soon as I finish understanding all the steps and concepts.

I have a question tho, with Webflow Users already existing, I guess I could just use the Webflow CMS to store the user info and update it accordingly, I’m I right? So I wouldn’t need to retrieve any of the MS info

No, Memberships BETA doesn’t currently have any way to retrieve the user ID, or to bind CMS items to a specific User. Someday, we hope.

1 Like

Hi @Roberto_R I’m currently investigating building something like this as a plugin SaaS product. Let users buy credits and have the payment go to the site owner’s Stripe account. Then provide an endpoint that returns whether the user has sufficient credits remaining. Would you be open to discussing what you’re looking for here?

Hey @Roberto_R :wave:

I just created a tutorial for this sort of situation using Webflow, Make, and Memberstack.

Sharing now incase future readers have a similar Q.

Here’s the Demo project + cloneable:

Here’s a video tutorial:

And here are links to the code and blueprints:

1 Like

Hi Duncan, first off thank you so much for this contribution and detailed tutorial. I see that you’re using Memberstack as a way to track credits and block access to pages.
My use-case seems different in that I’m hoping to create effectively a rewards/credit program similar to airline or credit card companies. Customers can buy credits and need them to consume on the site, but what would be prevented isn’t so much access to a page but rather the ability to finalize a purchase (with some kind of error message such as “insufficient credits, buy more?”). Would this still be the right design approach in this case?

1 Like

Hey @EasyRent_Team :wave:

Assuming someone doesn’t have any credits, how would they purchase/do things on the site? I’m guessing you want to give people a way to bypass checkout if they a certain number of credits?

Or… oh wait I see that you mentioned that folks will be buying credits :thinking: In that case you could display a purchase credits UI if their credit count is under a certain amount. This can be achieved using some custom code and the Memberstack DOM package.