I am creating an external web app in which each external user should be required to have a Stripe subscription to access the application. Other than going the embed route, has anyone created or seen an example of elegantly paywalling external Retool app access (particularly just after OAuth)? Or does user management need to happen outside of the external Retool app? Thank you!
Hi @ryliev,
Welcome to the community. 
Implementing a paywall using Stripe subscriptions in a Retool app requires a combination of backend logic (for managing Stripe subscriptions) and frontend logic (for controlling access to the app). Here’s a high-level breakdown of how you could structure this:
1. OAuth Authentication:
- Start by implementing OAuth to authenticate users.
- Capture the OAuth token and use it to identify the user in your system.
2. Stripe Subscription Check:
- Create API endpoints in your backend that will communicate with Stripe to check whether a user has an active subscription.
- This endpoint should take the OAuth token or user ID as a parameter and return the subscription status.
3. Retool App Access Control:
- In the Retool app, use the API you’ve created to check the user’s subscription status.
- Based on the status, you can conditionally render the app’s content or a message prompting the user to subscribe.
4. Implementing the Paywall:
- If a user doesn’t have an active subscription, direct them to a page where they can subscribe.
- This might be a Retool component, a Stripe Checkout page, or a custom subscription page.
5. Webhooks:
- Implement webhooks to listen for events from Stripe (e.g., successful payment, subscription cancellation).
- Update the user’s access based on these events to ensure that access is granted or revoked based on the subscription status.
Example Workflow:
- User logs in via OAuth.
- The Retool app checks the subscription status of the user by calling your custom API.
- If the user has a valid subscription:
- The user gets access to the app.
- If the user doesn’t have a valid subscription:
- The user is redirected to a subscription page.
- Once the user subscribes, Stripe webhooks update the user’s status in your system, and the user gains access to the app.
Points to Consider:
- Securing Your API: Ensure that your custom API endpoints are secure. Only allow authenticated and authorized requests.
- Retool’s Native Integrations: Retool has native integrations with Stripe. Explore them to simplify the implementation.
- Error Handling: Implement robust error handling to manage cases where the subscription status might be temporarily unclear due to network issues or delays in webhook delivery.
- UX: Aim for a seamless user experience. Provide clear messaging and an easy-to-navigate subscription process.
Even though it might require some effort to integrate and manage the paywall externally, doing so would give you greater flexibility and control over the user access and subscription management processes. Note that some user management would still need to occur outside of the external Retool app, particularly concerning subscription status.
Hope this helps.
Patrick
4 Likes
Hey @ryliev - we do something similar. We use:
- Webflow to create a wrapper site
- We use MemberStack for all the login/auth
- Memberstack supports paid plans, content gating etc. via Stripe
- We then embed the Retool apps they have access to one the content gated pages
- We have a Retool Workflow that validates the Memberstack JWT and returns the Retool EmbedLink
It works quite well!
Loving the sound of the Retool Workflow that validates the Memberstack JWT and returns the Retool EmbedLink. I've been eyeing Webflow, though I may draft that wrapper site in divjoy.com because I'm a bit more familiar with them. Thank you so much!
Just FYI - Memberstack has super simple integration with Webflow. It will work with anything but will be a longer project. They have all the components etc. built for WebFlow. Not a paid ad for WebFlow 
1 Like
Hi David, I'm trying to replicate this approach currently. I'm new to coding and am a bit baffled on how to connect everything up, and the docs in webflow and memberstack are not clarifying much for me. Would you be able to offer some advice on:
-
how did you actually obtain the JWT from memberstack? Did you do this in custom code in webflow?
-
How does the workflow start? Does webflow send a post request to the retool workflow?
-
Why use a workflow at all? These guide seems to encourage that the website can handle it all through just a couple of API calls to retool.
Any advice enormously appreciated. A tad out of my depth here, and not even certain that my questions make that much sense.
You could make your front end JS code work as your backed (look at this Embed a web app with Retool Embed | Retool Docs). And think of Membestack as your authentication flow. However this would expose most of everything a hacker would need to blast new users into your Retool org or worse. Best to keep that negotiation away from the exposed frontend.
And yes the workflow is trigged by calling the endpoint (POST) from the front end that is give to you when you setup a WebHook trigger in the workflow.
To get the memberstack JWT here is a little bit of JS that you can call after your user authenticates with Memberstack.
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
let jwt = getCookie('_ms-mid');
Thank you so much! Really appreciated.
I got this working, so thank you! But a question for the retool team, hoping they see this:
do the new external apps features just launched aim eventually to replace Retool Embed? Or are they supposed to work together?
Embed isn't going anywhere - it's part of our overall External product suite, along with portals. Which one to use depends on your underlying use case!
1 Like