Coinbase API

Coinbase's spot price endpoints are completely public — you do not need an API key, an account, or any authentication to display live cryptocurrency prices. This makes the price ticker the simplest Coinbase integration in Bubble, and the one most builders should start with. Go to Plugins tab → Add plugins → search 'API Connector' (by Bubble) → Install. Click 'Add another API' and name it 'Coinbase Prices'. Set the base URL to https://api.coinbase.com Add a call named 'Spot Price': - Method: GET - Path: /v2/prices/BTC-USD/spot - No authentication headers needed - No body - Set 'Use as Data' (not Action) — this lets Bubble bind the response data directly to page elements Click 'Initialize call'. Because this is a public endpoint, the initialization completes immediately with real data. Bubble detects the response fields: data.amount (the price as a string like '45231.05') and data.currency (the currency like 'USD'). Add this Text element to a Bubble page: set the value to 'Get data from external API' → select your Coinbase Prices > Spot Price call → select data.amount. Add a currency symbol prefix ('$') to format the display. To display multiple currencies, create additional API calls: - /v2/prices/ETH-USD/spot (Ethereum) - /v2/prices/SOL-USD/spot (Solana) - /v2/prices/BTC-EUR/spot (Bitcoin in EUR) To refresh prices automatically, click on any element on the page, go to Workflows → Add workflow → 'Do every X seconds' → set interval to 30 seconds → add action 'Refresh an external API call' → select your Spot Price call. This triggers a fresh API call every 30 seconds without a page reload. Note: Coinbase returns the price as a string in data.amount, not a number. If you want to format it with commas or decimal places, use Bubble's 'formatted as number' expression on the value.

1// API Connector Configuration - No auth needed
2GET https://api.coinbase.com/v2/prices/BTC-USD/spot
3
4// Response:
5{
6  "data": {
7    "amount": "45231.05",
8    "base": "BTC",
9    "currency": "USD"
10  }
11}
12
13// Additional endpoints for other currencies:
14// GET /v2/prices/ETH-USD/spot
15// GET /v2/prices/SOL-USD/spot
16// GET /v2/prices/BTC-EUR/spot
17// GET /v2/exchange-rates?currency=USD  (all rates in one call)

Coinbase Commerce lets you accept Bitcoin, Ethereum, Litecoin, USDC, and other cryptocurrencies from customers without handling private keys or running your own blockchain node. The flow: your Bubble app creates a 'charge', Commerce returns a hosted checkout URL, you redirect the customer there, and Coinbase handles the rest. First, create your Commerce API key. Go to commerce.coinbase.com → log in or create an account → Settings → API Keys → Create an API Key. Copy the key — it will not be shown again. Install the API Connector plugin if you haven't already. Add a new API group named 'Coinbase Commerce'. Set base URL to https://api.commerce.coinbase.com Add a shared header: - Key: X-CC-Api-Key - Value: [your-commerce-api-key] - Enable the 'Private' checkbox — this keeps your key on Bubble's servers and out of the browser Add a second shared header: - Key: X-CC-Version - Value: 2018-03-22 (This pins the API version for stability) Add a call named 'Create Charge': - Method: POST - Path: /charges - Body type: JSON - Body: { "name": "[product_name]", "description": "[product_description]", "pricing_type": "fixed_price", "local_price": { "amount": "[price_amount]", "currency": "[currency_code]" }, "metadata": { "customer_id": "[bubble_user_id]", "order_id": "[bubble_order_id]" } } Make the parameters in square brackets into Bubble API call parameters. The metadata fields are important — they let you match the incoming webhook event back to the correct order in your database. Click 'Initialize call' with a real price (e.g., amount='25.00', currency='USD', product_name='Test Item'). The response includes a hosted_url field — this is the Coinbase Commerce checkout page URL you will redirect customers to. Critical: charges expire after 1 hour. If a customer starts checkout but delays more than an hour, the hosted_url is no longer valid. Store the charge_id and created_at timestamp in your Bubble Orders table so you can recreate an expired charge.

1// Create Charge
2POST https://api.commerce.coinbase.com/charges
3Headers:
4  X-CC-Api-Key: <private-commerce-api-key>
5  X-CC-Version: 2018-03-22
6  Content-Type: application/json
7
8Body:
9{
10  "name": "Premium Subscription",
11  "description": "1 month access to all features",
12  "pricing_type": "fixed_price",
13  "local_price": {
14    "amount": "29.00",
15    "currency": "USD"
16  },
17  "metadata": {
18    "customer_id": "bubble-user-id-here",
19    "order_id": "bubble-order-id-here"
20  }
21}
22
23// Response (partial):
24{
25  "data": {
26    "id": "charge-uuid-here",
27    "hosted_url": "https://commerce.coinbase.com/charges/ABCD1234",
28    "expires_at": "2026-01-09T15:30:00Z",
29    "timeline": [{ "status": "NEW", "time": "2026-01-09T14:30:00Z" }]
30  }
31}

With the Commerce API call configured, build the complete checkout workflow in Bubble that takes a user from clicking 'Pay with Crypto' to landing on Coinbase's hosted checkout page. Create a 'Pay with Crypto' button on your product or cart page. In the button's workflow: Step 1: Create Order — if you haven't already, create an Order record in Bubble's database with status 'pending' and a generated order_id. This is what you will update when payment is confirmed. Step 2: Call API — 'Coinbase Commerce > Create Charge'. Map your parameters: - product_name: the product's name field - product_description: the product's description field - price_amount: the product's price formatted as text (e.g., '29.00', not 29) - currency_code: 'USD' (or your store's currency) - bubble_user_id: Current User's unique ID - bubble_order_id: the Order record's unique ID you created in Step 1 Step 3: Make changes to a thing — update your Order record to store 'coinbase_charge_id' (from the API response data.id) and 'coinbase_charge_created_at' (Current date/time). You will use the timestamp to detect expired charges. Step 4: Open an external URL — set the URL to the API response's data.hosted_url. Set it to open in the current tab (recommended) or a new tab. Opening in the same tab provides a cleaner UX because Coinbase will redirect back to your app when payment completes — set the 'Redirect URL' in your Commerce account settings to a thank-you page on your Bubble app. Important: store crypto transaction amounts as Text type in Bubble's database, not as Number. Bitcoin amounts have 8 decimal places (e.g., 0.00031427 BTC), and Bubble's Number type can lose precision on very small decimal values. Store the amount string exactly as returned by Coinbase and only convert to a display-formatted number when showing it in the UI. For expired charge detection: on any page where you show the charge or a 'resume checkout' link, add a condition checking if coinbase_charge_created_at is more than 50 minutes ago. If expired, run the 'Create Charge' API call again and update the stored charge_id and URL.

1// Bubble workflow for 'Pay with Crypto' button:
2// Step 1: Create thing 'Order'
3//   - status: 'pending'
4//   - customer: Current User
5//   - amount_display: '29.00 USD'
6
7// Step 2: Call API Coinbase Commerce > Create Charge
8//   - product_name: Product's name
9//   - price_amount: Product's price:formatted as text
10//   - bubble_order_id: Result of Step 1's unique ID
11//   - bubble_user_id: Current User's unique ID
12
13// Step 3: Make changes to Order (result of Step 1)
14//   - coinbase_charge_id: Result of Step 2's body data id
15//   - coinbase_charge_url: Result of Step 2's body data hosted_url
16//   - coinbase_charge_created_at: Current date/time
17
18// Step 4: Open an external URL
19//   - URL: Result of Step 2's body data hosted_url
20
21// Expired charge check (50 min threshold):
22// Condition: Order's coinbase_charge_created_at < Current date/time - 50 minutes
23// If true: re-run Create Charge, update Order record with new charge_id and hosted_url

The checkout redirect does NOT confirm payment. A customer could close the browser after being redirected to Coinbase. Payment confirmation must come from Coinbase's webhook — an HTTP POST that Coinbase sends to your app when a charge is confirmed on the blockchain. Backend Workflows (API Workflows) are required for this step and need a paid Bubble plan. Enable API Workflows in Bubble: go to Settings → API → check 'This app exposes a Workflow API'. The Backend Workflows section will appear in your editor. Create a new Backend Workflow named 'coinbase_payment_webhook'. Set the method to POST. Click 'Detect request data' — Bubble shows you a URL like: https://your-app.bubbleapps.io/api/1.1/wf/coinbase_payment_webhook Copy this URL. Go to Coinbase Commerce → Settings → Webhook subscriptions → Add endpoint. Paste your Bubble Backend Workflow URL and subscribe to these events: - charge:confirmed (blockchain confirmation received) - charge:failed (charge expired or payment failed) Copy the webhook shared secret from Commerce Settings — you'll need it for verification. Send a test event from Commerce's webhook tester. In Bubble's Backend Workflow editor, you see the detected data structure from the test webhook — the key fields are: event.type (the event name like 'charge:confirmed'), event.data.id (the charge UUID), and event.data.metadata.order_id (your Bubble order ID from Step 2). Build the workflow logic: 1. Condition: only continue when event.type = 'charge:confirmed' (ignore other events) 2. Search for Order where coinbase_charge_id = event.data.id — finds the right Bubble order 3. Make changes to the Order: set status to 'paid', set paid_at to Current date/time 4. Optional: trigger a follow-up workflow (send confirmation email, provision access, etc.) Note on webhook verification: Coinbase Commerce signs webhooks with a X-CC-Webhook-Signature header (HMAC-SHA256 of the raw request body). Bubble's Backend Workflow cannot compute HMAC-SHA256 natively to verify the signature. For production, consider verifying by checking that the event metadata (order_id, amount) matches a real pending order in your database before marking it paid — this prevents forged webhook events from incorrectly marking orders as paid.

1// Coinbase Commerce Webhook Payload
2// POST https://your-app.bubbleapps.io/api/1.1/wf/coinbase_payment_webhook
3
4{
5  "id": "webhook-event-uuid",
6  "type": "charge:confirmed",
7  "data": {
8    "id": "coinbase-charge-uuid",
9    "code": "ABCD1234",
10    "name": "Premium Subscription",
11    "timeline": [
12      { "status": "NEW", "time": "2026-01-09T14:30:00Z" },
13      { "status": "PENDING", "time": "2026-01-09T14:32:00Z" },
14      { "status": "COMPLETED", "time": "2026-01-09T14:38:00Z" }
15    ],
16    "metadata": {
17      "customer_id": "bubble-user-id",
18      "order_id": "bubble-order-id"
19    },
20    "pricing": {
21      "local": { "amount": "29.00", "currency": "USD" },
22      "bitcoin": { "amount": "0.00064153", "currency": "BTC" }
23    }
24  }
25}
26
27// Bubble Backend Workflow steps:
28// 1. Only when: Detected data event type = 'charge:confirmed'
29// 2. Search for Things: Order where coinbase_charge_id = Detected data event data id
30// 3. Make changes to Order: status = 'paid', paid_at = Current date/time

Now that you have Commerce payments working, add a live price component to your checkout page showing the current cryptocurrency equivalent of the purchase price. This improves the experience by showing customers exactly how much crypto they will pay, updated in real time from Coinbase's public API. This step uses the public price endpoint — no auth required, no API key, no WU cost beyond the API Connector call itself. If you haven't already created a 'Coinbase Prices' API group in Step 1, do that now. Add a 'Convert Currency' call: - Method: GET - Path: /v2/prices/USD-BTC/spot - This returns how much BTC one USD buys — invert it to get BTC per dollar Alternatively, use the spot price endpoint with base and quote reversed: GET /v2/prices/BTC-USD/spot returns USD price of 1 BTC. To show the BTC cost of a $29 item, divide 29 by the returned amount. In your Bubble checkout page, add a Text element beneath the 'Pay with Crypto' button that reads: 'That's approximately [BTC amount] BTC at today's rate.' Use a 'Get data from external API' expression → Coinbase Prices > Spot Price call → data.amount, then apply the division math using Bubble's expression builder. For caching and WU efficiency: if your checkout page has many visitors, consider storing the latest Bitcoin price in an App Data record and refreshing it only once every 30 seconds via a recurring workflow, rather than having every page load trigger an API call. Display the stored price value and show 'Updated [X] seconds ago' using the stored refresh timestamp. RapidDev's team has helped many fintech Bubble apps build crypto payment flows like this — if you want to discuss architecture choices for your specific project, book a free scoping call at rapidevelopers.com/contact.

1// Display equivalent BTC amount for a $29.00 charge
2// In Bubble Text element:
3// Value: (29 / Coinbase Prices Spot Price's data amount):formatted as number (5 decimal places)
4// Display: 'approx. 0.00064 BTC'
5
6// Caching pattern for high-traffic apps:
7// Data type: AppSettings
8// Fields: btc_usd_price (Text), price_updated_at (Date)
9
10// Recurring workflow (every 30 seconds, on checkout pages):
11// Step 1: Call API > Coinbase Prices > Spot Price
12// Step 2: Make changes to AppSettings: 
13//         btc_usd_price = Result of Step 1's data amount
14//         price_updated_at = Current date/time
15
16// Text element value: Search for AppSettings:first item's btc_usd_price

Before launching, apply Bubble Privacy Rules to protect sensitive financial data in your database, and set up WU-efficient patterns for the API calls. Privacy Rules for Commerce data: Go to Data tab → Privacy → click your 'Order' data type (or whatever you named it). Add a rule: 'This Order's customer = Current User' → check View for all fields. This ensures users can only see their own orders. Without this rule, a logged-in user who knows the order ID could potentially access another user's order details through Bubble's Data API. Privacy Rules for API keys: Coinbase Commerce API keys are stored as Private headers in the API Connector — they never reach the browser. However, if you ever store any Coinbase credentials in the Bubble database (e.g., for multi-account setups), restrict those fields using Privacy Rules. Rate limit management for App API: The authenticated Coinbase App API allows up to 10,000 requests per hour per API key. For price ticker use cases (public, unauthenticated), there is no documented rate limit but best practice is to avoid calling more frequently than every 10 seconds. For portfolio data calls (authenticated), 10,000/hr sounds large but a Bubble app with 1,000 active users each triggering 20 API calls per session = 20,000 calls per hour — exceeding the limit. Cache portfolio data in Bubble's database and refresh on user action (a 'Sync' button), not continuously. Workload Unit (WU) awareness: Each API Connector call consumes WU. For price tickers refreshing every 30 seconds on a busy page, this adds up. Use App Data caching (store the latest price and timestamp, serve from database to page, refresh via a single recurring Backend Workflow) rather than having each page load trigger an API call. Crypto amount storage: Reiterate the critical rule: always store cryptocurrency amounts (BTC, ETH, etc.) as Text type in your Bubble database, never as Number. Bubble's Number type is a JavaScript double-precision float — it cannot represent 0.00031427 BTC accurately. Store the exact string from Coinbase's response and only format for display.

1// Privacy Rules pattern for Orders data type:
2// Rule: 'This Order's customer is Current User'
3// Check: View (all fields)
4// Purpose: Each user sees only their own orders
5
6// WU-efficient price caching pattern:
7// Instead of: Text element calls Spot Price API on every page load
8// Do instead:
9//   1. AppSettings record stores: btc_price='45231.05', btc_price_updated=timestamp
10//   2. Recurring Backend Workflow (every 30 seconds): refreshes AppSettings price
11//   3. All page Text elements read from AppSettings (database = no API call per user)
12// Result: 2 API calls/minute regardless of how many users are on the page
13
14// Crypto amount field types in Bubble database:
15// CORRECT: coinbase_btc_amount (Text type) = '0.00064153'
16// WRONG: coinbase_btc_amount (Number type) = loses precision