Bubble.io Plugin
Potio Bubble Plugin Overview
Turn your Bubble app into a fully functional SaaS business without writing code. Potio integrates seamlessly with Stripe, allowing you to add no-code pricing tables, manage subscriptions, and automatically sync Stripe data with your Bubble database—no webhooks or complex setups needed.
Prerequisites
- Stripe account with products and pricing created.
- Potio account integrated with your Stripe account.
Installation and Setup
Step 1: Install the Potio Bubble Plugin
Navigate to the Potio Bubble Plugin page and click "Install."
Step 2: Configure Bubble Database Fields
In your Bubble app, navigate to Data → Data types → User and add the following four fields:
| Field Name | Type | Description |
|---|---|---|
| stripeCurrentPlan | text | ID of the user's current subscription price. |
| stripeCustomerId | text | Stripe Customer ID associated with the user. |
| stripeSubscriptionId | text | ID of the user's active Stripe subscription. |
| stripeSubscriptionStatus | text | Status of subscription: incomplete, incomplete_expired, trialing, active, past_due, canceled, unpaid, or paused. |
Step 3: Set Bubble Privacy Rules
Go to Data → Privacy → User → Everyone else (default permissions) and enable:
- stripeCurrentPlan, stripeCustomerId, stripeSubscriptionId, stripeSubscriptionStatus
- "Find this in searches" and "Modify via API"
This allows Potio to update subscription data in your Bubble database.
Step 4: Enable Bubble Data API
Navigate to Settings → API and:
- Enable "Enable Data API"
- Check "User"
- Generate a new API Token for Potio
Step 5: Connect Bubble to Potio
Copy your Bubble Data API root URL and API Token Private Key into Potio's Bubble Integration settings page.
Step 6: Embed Pricing Table in Bubble
Drag the Potio Pricing Table element onto your Bubble page.
Insert the Pricing Table Key from your Potio dashboard into the element's settings.
You're all set!
Your Bubble app now supports seamless, no-code Stripe pricing and subscription management.