Bubble.io API Connector: How to Connect Any External API
Stripe, OpenAI, SendGrid, Slack — any service with an HTTP API connects to Bubble via the API Connector. A practical guide from installation to live use with OpenAI as the step-by-step example and troubleshooting for the four most common problems.
Bubble’s Bridge to Every External Service
The API Connector is what makes Bubble genuinely powerful. Stripe for payments, SendGrid for email, OpenAI for AI, Google Maps for location, Slack for notifications — any service with an HTTP API can be connected to Bubble via the API Connector, and its responses used in workflows and displayed in elements. This guide walks through setup, configuration, and troubleshooting.
To Connect Any API
Base URL
The root endpoint set once at the API level. For Stripe: https://api.stripe.com. For OpenAI: https://api.openai.com. All calls to that service share this base.
Authentication
How the API identifies you. Most use API Key in a header, Basic Auth, or Bearer token. Mark all credentials as ‘Private’ — this forces server-side execution and hides secrets from the browser.
The Endpoint
The specific path for one operation: /v1/customers to create a Stripe customer, /v1/chat/completions for OpenAI. Each operation gets its own API call entry.
The Response
What the API sends back. Click ‘Initialize call’ to fetch a live sample response and Bubble auto-populates the response structure so you can reference fields in workflows.
A Practical Example
Plugins → Add plugins → Search ‘API Connector’ → Install. This is a free official Bubble plugin required before any external API connection.
API Name
: OpenAI
Authentication
: Private key in header
Key name
: Authorization
Key value
: Bearer sk-XXXXXXXX ← mark as PRIVATE
Name
: Generate Text
Method
: POST
URL
: https://api.openai.com/v1/chat/completions
Body
: {“model”:”gpt-4o”,”messages”:[{“role”:”user”,”content”:”
Click ‘Initialize call’. Bubble sends the request and populates the response structure from the live API response — you can now reference the returned fields in any workflow.
Step 1
: OpenAI – Generate Text (prompt = Input’s value)
Step 2
: Only when Step 1 succeeded
Show text: Step 1’s choices:first item’s message’s content
Step 3
: Only when Step 1 failed
Show error message to user
Most Common Problems and Fixes
| Problem | Most Likely Cause | Fix |
|---|---|---|
| 401 Unauthorized | Wrong key or not marked Private | Check key value; verify Private is checked; re-initialize |
| 400 Bad Request | Body format wrong or missing required field | Compare your body to the API documentation example |
| Response is empty | Call succeeded but response not initialized | Re-run Initialize call with a request that returns data |
| CORS error | API doesn’t allow browser-side requests | Mark all parameters as Private to force server-side execution |
Always Mark Credentials as Private
Every field containing a secret key, password, or token must be marked Private. Private fields are sent from Bubble’s server. Non-private fields are sent from the user’s browser and visible in the browser’s network tab. This is the single most important security setting in the API Connector.
Build Your Bubble.io App With Expert Help
Pakistan’s leading Bubble.io development team. Multi-tenant SaaS architecture, Stripe billing, and full product builds done right from day one.
