BigCommerce

In your BigCommerce admin panel, navigate to Advanced Settings → API Accounts. Click 'Create API Account' and choose 'V2/V3 API Token'. Give the token a descriptive name like 'Bubble Integration'. Under OAuth Scopes, select the permissions your Bubble app will need — at minimum: Products (read-only or modify), Orders (read-only or modify), and Carts (modify) if you are building cart functionality. After you click 'Save', BigCommerce shows you the access token exactly once on a credentials page. You must copy and save this token immediately — if you navigate away without saving it, you cannot recover it and must create a new API account entirely. Also copy your store hash from the API credentials page: it appears in the API path as /stores/{store_hash}. Store both values in a secure password manager before proceeding. Your store hash looks like a short alphanumeric string such as 'abc12def3g'.

Open your Bubble app in the editor. Click the Plugins tab in the left sidebar, then click 'Add plugins'. Search for 'API Connector' — find the one published by Bubble (not third-party) and click Install. Once installed, the API Connector appears in your Plugins tab. Click on it to open the configuration panel. Click 'Add another API' twice to create two groups: name the first group 'BigCommerce v2' and the second 'BigCommerce v3'. For BigCommerce v2, set the root URL to https://api.bigcommerce.com/stores/YOUR_STORE_HASH/v2. For BigCommerce v3, set the root URL to https://api.bigcommerce.com/stores/YOUR_STORE_HASH/v3. Replace YOUR_STORE_HASH with the actual hash you copied in Step 1. On both groups, click 'Add shared headers', add a header named X-Auth-Token, paste your access token as the value, and check the 'Private' checkbox. The Private checkbox is critical — it tells Bubble to keep this header server-side and never send it to the browser. Also add a second shared header: Content-Type with value application/json (no Private checkbox needed for this one).

1// BigCommerce v3 API Connector Group Configuration
2{
3  "groupName": "BigCommerce v3",
4  "rootURL": "https://api.bigcommerce.com/stores/YOUR_STORE_HASH/v3",
5  "sharedHeaders": [
6    {
7      "name": "X-Auth-Token",
8      "value": "YOUR_ACCESS_TOKEN",
9      "private": true
10    },
11    {
12      "name": "Content-Type",
13      "value": "application/json",
14      "private": false
15    },
16    {
17      "name": "Accept",
18      "value": "application/json",
19      "private": false
20    }
21  ]
22}

Before building any real functionality, verify that your credentials are working by adding and initializing a simple GET call. In the BigCommerce v3 group, click 'Add another call'. Name the call 'Get Products'. Set the method to GET and the path (relative to the root URL) to /catalog/products. Add two parameters: limit with value 1 and page with value 1. These are static values used only for initialization — you will make them dynamic later. Click 'Initialize call'. Bubble sends the actual HTTP request to BigCommerce and shows you the response structure. You should see a JSON object with a 'data' array containing one product and a 'meta' object with pagination info. Once Bubble detects the fields, click 'Save' on the call. If the initialization fails, the most common cause is a typo in the store hash in the root URL or the access token value in the header. Double-check both values. The error 'Unauthorized' (HTTP 401) always means wrong token or wrong store hash — not a Bubble configuration issue.

1// Expected successful BigCommerce v3 GET /catalog/products?limit=1 response shape
2{
3  "data": [
4    {
5      "id": 77,
6      "name": "[Sample] Fog Linen Chambray Towel - Beige Stripe",
7      "type": "physical",
8      "sku": "SLCTBS",
9      "price": 49.00,
10      "sale_price": 0.00,
11      "retail_price": 0.00,
12      "inventory_level": 0,
13      "inventory_tracking": "none",
14      "availability": "available",
15      "is_visible": true,
16      "categories": [18]
17    }
18  ],
19  "meta": {
20    "pagination": {
21      "total": 11,
22      "count": 1,
23      "per_page": 1,
24      "current_page": 1,
25      "total_pages": 11
26    }
27  }
28}

Now that authentication is confirmed, build a product catalog page. Create a new Bubble page called 'Catalog'. Add a Repeating Group element. In its data source, choose 'Get data from an external API' and select your BigCommerce v3 'Get Products' call. In the Repeating Group's parameters, set limit to a fixed value (e.g., 12) and page to a page-state variable you define. Create a page-level custom state called 'current_page' (type Number, default value 1). Wire the page parameter to this state so the Repeating Group fetches the correct page of results. Inside the Repeating Group, add an Image element for the product thumbnail and Text elements for the product name and price. For the Image source, map it to 'Current Cell's Get Products's data's images first item's url_thumbnail' — note that images is a separate nested object within each product. Add a 'Next Page' button that runs a workflow: Set State of current_page to 'current_page + 1'. Add a 'Previous Page' button that sets current_page to 'current_page - 1' (with a conditional preventing it from going below 1). For total pages, use the 'meta's pagination's total_pages' value from the API call response to conditionally hide the Next Page button when you are on the last page. Privacy rules note: if you cache any product data in a Bubble data type (for performance), go to Data tab → Privacy and set rules so that only authenticated users or appropriate roles can read cached product records.

Cart operations in BigCommerce use the v3 cart endpoints and must run from Bubble Backend Workflows (available on paid Bubble plans) to keep cart IDs and customer data server-side. Set up the following API calls in your BigCommerce v3 group: (1) 'Create Cart' — POST to /carts with a JSON body containing the line items array; (2) 'Add Item to Cart' — POST to /carts/{cartId}/items; (3) 'Get Cart' — GET /carts/{cartId}. For each of these, mark the call as an 'Action' (not 'Data') in the 'Use as' dropdown in the API Connector. In Bubble, create a data type called 'Cart' with fields: bigcommerce_cart_id (text), user (User), created_date (date). When a user clicks 'Add to Cart' on your product page, trigger a Backend Workflow that calls 'Create Cart' (if no cart exists) or 'Add Item to Cart' (if a cart already exists), then saves or updates the Cart record in Bubble's database with the returned cartId. Store the cart ID in the database — not in page URL state or a cookie — to keep it secure. Use the returned cartId for all subsequent cart operations.

1// BigCommerce v3 Create Cart API call body structure
2{
3  "line_items": [
4    {
5      "quantity": 1,
6      "product_id": "<productId dynamic>",
7      "variant_id": "<variantId dynamic>"
8    }
9  ],
10  "channel_id": 1
11}
12
13// Expected Create Cart response (extract cartId from here)
14{
15  "data": {
16    "id": "b20deef4-d8d4-4c99-8dc8-ff1d3baf4012",
17    "customer_id": 0,
18    "channel_id": 1,
19    "line_items": {
20      "physical_items": [
21        {
22          "id": "item_uuid",
23          "product_id": 77,
24          "quantity": 1,
25          "sale_price": 49.00
26        }
27      ]
28    }
29  }
30}

This step covers the most BigCommerce-specific pattern in the entire integration: generating single-use checkout URLs. BigCommerce's headless checkout requires you to POST to /carts/{cartId}/redirect_urls, which returns a checkout URL that is valid for exactly 30 minutes and can only be used once. The critical architectural rule: never call this endpoint at page load and never cache the URL. Call it only at the moment the user actively clicks 'Proceed to Checkout'. In your BigCommerce v3 API Connector group, add a call named 'Get Checkout URL' — POST to /carts/{cartId}/redirect_urls with cartId as a dynamic parameter. Set it as an Action. Create a Backend Workflow called 'Generate Checkout URL' that takes a cartId as input. The workflow calls 'Get Checkout URL' and then uses the 'Navigate to' action to send the user to the returned checkout_url from the response. On your cart page in Bubble, add a 'Proceed to Checkout' button. In its workflow, use 'Schedule API Workflow' to trigger the 'Generate Checkout URL' Backend Workflow with the current user's cart ID from the Bubble database. The user will be redirected to BigCommerce's native checkout page where they complete payment. After payment, BigCommerce sends order confirmation webhooks — set those up in BigCommerce Admin → Store Setup → API Accounts → Webhooks if you need to update Bubble records on successful purchase. If you work with a high volume of orders and cart operations, be mindful that each Backend Workflow API call counts against your Bubble Workload Units budget — consider batching and scheduling catalog sync jobs during off-peak hours. The RapidDev team has built production Bubble apps with BigCommerce integrations at scale — if your project involves complex catalog management or multi-channel setup, reach out at rapidevelopers.com/contact for a free scoping call.

1// BigCommerce POST /carts/{cartId}/redirect_urls — call this ON DEMAND only
2// Never cache the returned URL — it expires after 30 minutes and is single-use
3
4// API Connector call config:
5{
6  "method": "POST",
7  "path": "/carts/<cartId dynamic>/redirect_urls",
8  "headers": {
9    "X-Auth-Token": "<private>",
10    "Content-Type": "application/json",
11    "Accept": "application/json"
12  },
13  "body": {}
14}
15
16// Expected response:
17{
18  "data": {
19    "cart_url": "https://store-abc12.mybigcommerce.com/cart.php?action=addItem&...",
20    "checkout_url": "https://store-abc12.mybigcommerce.com/checkout?action=...",
21    "embedded_checkout_url": "https://store-abc12.mybigcommerce.com/embedded-checkout?..."
22  }
23}