Setting up Stripe and restricting page access in Plasmic app

Could use some help figuring out how to setup stripe and restrict pages to only users who have paid via stripe- with a plasmic app. Just a simple demo would work. Can even be stripe checkout or similar. I’ve deployed a cloudflare worker on my own domain already for the webhook. I just need to figure out how to work it into custom auth via supabase or any other auth provider like clerk, such that you can’t use the app until you’ve used a cc to sign up via stripe. Or gating certain features that way etc.

A guide using stripe elements would be preferred to one using stripe checkout as the % cut stripe takes is lower with stripe elements. But I’d take any lead on how to get this set up at this point.

Hi William, we have a example to using supabase auth with Plasmic https://github.com/plasmicapp/plasmic/tree/master/examples/supabase-auth-nextjs-pages-loader we have a overview over auth here https://docs.plasmic.app/learn/auth/ . I image that you would want not only restrict the UI, but any data sources operations that you have. I am not familiar with stripe so I am unable to give you instructions on that, but if you have some docs that you are following you can share it here. Those videos https://youtu.be/hVzqjtkcEyk https://youtu.be/rpdjrFuVMog?t=471 may also have some concepts that can help.

This project and it’s implementation of stripe with supabase is what I’m looking to accomplish, but it assumes I’m using that setup to write my own code for a react app, doesn’t assume I need to be able to control everything from within plasmic: https://usebasejump.com/docs

You can see it’s implementation of functions and components in this github repo: https://github.com/usebasejump/basejump

The only issue I see with using the basejump setup is that it uses RLS: “Permissions are handled using RLS” and
“since Plasmic currently connects to Supabase with a direct connection, Plasmic is unable to use auth features and most RLS features.”
https://docs.plasmic.app/learn/supabase/

Are you hosting your Next.js/React application or using Plasmic Hosting ?

I’m willing to host it whatever way works. Cloudflare pages would be great but not required.

There’s a bug in the basejump app’s way of deploying the supabase edge functions that handle billing, so I have to bail on that approach for now. At this point the simplest approach might be to learn how to use whatever authentication components and functions are being used in this starter kit:
https://github.com/mickasmt/next-saas-stripe-starter

And learn to use the plasmic functions that return html content onto a page and just handle all of the authentication elsewhere. The biggest reason I haven’t done that yet is I would really like to be able to pass db arguments and visualize them being displayed in the editor rather than having to just make the shell in plasmic and then go to my code base to see what it looks like with the props passed in etc.