I have been doing research on the demand for content around the integration of Auth0 with payment platforms like Stripe and PayPal. @donovan provided an interesting use case to explore on a blog post:
Customer makes a Gold subscription and can access all pages, but a Bronze subscription can only access some pages.
I’d like to hear/read more from y’all on what would you like to read about this type of integration? What should we cover in such blog post? Thank you!
This would be really helpful. I think the tutorials around implementing auth0 to protect certain pages are well written, I adapted this tutorial for my own application.
What is a bit trickier to implement, and what I am struggling with currently, is a “paywall” as @donovan describes.
Ideally a blog post/tutorial would assume you have already successfully implemented authentication using auth0. Selfishly, I would like that to be in React as a natural follow on to the article linked above. The closest tutorial I have found to being helpful so far is this
I think a useful structure would be;
Authenticated user clicks Buy Button (unauthenticated user asked to SignUp)
Stripe Modal/PopUp/Redirect
User purchases
Stripe webhook updates Auth0 profile with “paid: yes” (or similar)
“Paid up” Authenticated User is redirected back to Application
“Paid Up” user can now access premium content
Reversion to “normal” membership if user unsubscribes/doesnt pay
The above logic might be quite accurate- I am not sure how stripe and auth0 best communicate.
Also useful, rather than having 3 “tiers” (causual visitor, member, paid subscriber), inclusion of stripe/paypal in the user onboarding process would be useful in alot of cases whereby you are either a casual visitor or a paid subscriber.
IndieHackers have a lot of discussion around Auth0 and how it integrates with stripe if you wanted to do some extra research on use cases.
Thank you for this amazing feedback and welcome to the Auth0 community. Your reply helps me a lot to put things in perspective.
Recently, I was shopping for some things for a home improvement project at Home Depot and I noticed that they have two types of checkout: “As Guest” and as “Registered Customer”. The Guest Checkout lets you use Paypal Checkout which is super fast and uses your PayPal information to populate the order information. What was cool is that as a Guest, you are given the option to enter a password if you want to create an account (sign up) and it uses your PayPal info to populate the Home Depot account. I felt the checkout process was very smooth and I liked the many “paths” to registration.
So if we were looking at providing you, our readers and customers, a sample application of integrating Auth0 with paywalls, I think that an experience like that one from Home Depot would be useful, I think that applies to your point of “rather than having tiers”. Adding PayPal is optional during the on-boarding process of anyone.
What’s very challenging of coming with guidance like this is that we have to use a sample app that is as generic as possible but also focused “it has to be hot but also cold” → creating it feels like that. I think that we could be safe with a retail demo app as it fits the use case and flow of paywalls (checkout) universally. What do you think?
That sounds great - I appreciate maintaining simplicity while still having all the functionality you mentioned is probably the biggest challenge but look forward to reading in he future!
Something I would like is a simple login function that if the user is subscribed, they pass through and have access to the application. If not they are sent to a purchase subscription page. Thanks!
(Its old but shoutout to your Securing React Apps with Auth0 course on PluralSight [not sure if its sponsored by yall or what but honestly watching that is what made me choose Auth0])
This is what I am looking for, as well. I believe a flaw in the referenced article is that account creation occurs after the billing has occurred. I prefer the billing to occur after the user has registered. Unless I am mistaken, this has the benefit of creating marketing/promotional campaigns for those users who abandoned the checkout or decided not to pay.
I just signed up specifically to reply to this thread.
I would LOVE a tutorial on how to create a membership site with Paypal and Stripe using Gatsby/React.
Our situation currently is that I’ve already made part of our website with Gatsby (non-member areas). Member areas are protected with Wordpress + Memberpress.
Our current signup is a one-page signup, with ease of signup and conversion rate in mind.
On the signup page, you enter your email (or, if you’re already logged in, your account’s email is used)
Below that you either enter your credit card details, or you select the Paypal option.
You hit sign up. In case of Paypal you are then taken to Paypal where you pay, after which you’re redirected. Credit card payment through Stripe is handled on the page.
If payment was successful, you are automatically logged in and asked to change your password.
In the backend, members, subscriptions and transactions are stored (in our case currently, by Memberpress). On the frontend, users can view and cancel their active subscriptions in their profile.
I’ve almost only seen Stripe tutorials. We need to support Paypal as well. If this is doable and moving from Wordpress to Auth0/this solution is doable as well, then please take my money.
I didn’t clarify what the membership does, but it’s the “paywall” type of membership. We have a single membership with different price points (monthly, yearly, sometimes promotions), so as far as member status goes, you have an active paid membership, or you don’t.
Some parts of the website are free for all. Some parts show one thing to paying members, and something else (e.g. a pitch for the membership) for non-paying visitors. So there’s no redirect, but rather what you see depends on whether you’re a member or not.