Gadget framework
Changelog
Glossary
FAQ

Quickstart: Connect to BigCommerce 

This guide will show you how to set up a BigCommerce connection, subscribe to BigCommerce webhooks, and store the webhook data in a Gadget database.

Prerequisites 

Before starting, you will need:

Step 1: Create a new BigCommerce app 

First, create a new Gadget app and connect it to BigCommerce.

  1. Create a new app in the BigCommerce Developer Portal.
  2. Give your app a name, Generate Credentials, then click Finish when the credentials appear. These credentials will be added to your Gadget app automatically.
  3. Click Connect to Gadget. Once signed in to Gadget, a new app will be automatically created for you. This app includes a BigCommerce connection using the generated credentials.

Step 2: Set BigCommerce app callback URLs and select scopes 

  1. Copy the Auth callback URL and Load callback URL from Gadget to your BigCommerce app and Save. Connection info is available at Settings > Plugins > BigCommerce.
  2. In BigCommerce, select the Scopes tab and choose the Products Read-only OAuth scope.
  3. Save and confirm the scope changes.

Step 3: Install on a sandbox store 

  1. In BigCommerce, click App Actions > Open in Control Panel and sign into your sandbox store.
  2. Navigate to Apps > Develop to see your draft app.
  3. Click on your app, then Install.

Congrats, you have successfully installed your app on a BigCommerce sandbox store!

The frontend is your Gadget app's React frontend built with BigDesign and embedded in the store. A new api/models/bigcommerce/store data model holds the store data.

Connection complete!

By setting up the connection, you have:

  • Set up a full-stack application.
  • Handled BigCommerce OAuth and callbacks for a single-click app.
  • Created a bigcommerce/store data model and saved the store data on install.
  • Handled frontend session management using the session model.
  • Installed the BigDesign library.

Step 4: Subscribe to BigCommerce webhooks 

BigCommerce webhooks are available as triggers on global actions.

To subscribe to BigCommerce webhooks in Gadget:

  1. Navigate to /api/actions, click +, and create a new action named handleProductCreate.js.
  2. Click + in the Triggers card and select BigCommerce.
  3. Select the store/product/created webhook scope.

This automatically subscribes your app to the store/product/created webhook, and runs the action when the webhook is received.

BigCommerce webhook payloads only include the resource id. Use the included BigCommerce API client to fetch the full resource data.

  1. Paste the following code into your action:
/api/actions/handleProductCreate.js
JavaScript
import type { ActionOptions } from "gadget-server"; export const run: ActionRun = async ({ params, logger, api, connections }) => { // get the BigCommerce API client for the current store const bigcommerce = connections.bigcommerce.current; // fetch the product data const product = await bigcommerce?.v3.get("/catalog/products/{product_id}", { path: { product_id: params.id, }, }); // log the product data and webhook payload logger.info({ product, params }, "product data and webhook payload"); }; export const options: ActionOptions = { triggers: { bigcommerce: { webhooks: ["store/product/created"], }, }, };
import type { ActionOptions } from "gadget-server"; export const run: ActionRun = async ({ params, logger, api, connections }) => { // get the BigCommerce API client for the current store const bigcommerce = connections.bigcommerce.current; // fetch the product data const product = await bigcommerce?.v3.get("/catalog/products/{product_id}", { path: { product_id: params.id, }, }); // log the product data and webhook payload logger.info({ product, params }, "product data and webhook payload"); }; export const options: ActionOptions = { triggers: { bigcommerce: { webhooks: ["store/product/created"], }, }, };
  1. Create a new product in your BigCommerce sandbox store to test the webhook. The product data appears in the Gadget Logs.

For more on webhooks, see the BigCommerce webhooks guide.

Step 5: Save the BigCommerce webhook payload 

Now you can store that BigCommerce product data in your database so you can use it in your app without making calls to the BigCommerce API.

  1. Right click on api/models/bigcommerce, select Add model, and create a new product model.
  2. Add the following fields and validations at api/models/bigcommerce/product/schema:
Field nameField typeValidations
bigcommerceIdnumberUniqueness, Required
namestringRequired
storebelongs to

The store field is a belongs to relationship to the bigcommerce/store model. The inverse should be a has many so that bigcommerce/store has many bigcommerce/product.

You can add more fields as needed, or remove fields you don't need! It is a good idea to only store the data required to power your app.

  1. Update api/actions/handleProductCreate.js to save the product data to the database. This action uses the automatically generated CRUD (create, read, update, delete) API for the bigcommerce/product model to create a new product record:
/api/actions/handleProductCreate.js
JavaScript
import { ActionOptions } from "gadget-server"; export const run: ActionRun = async ({ params, logger, api, connections }) => { // get the BigCommerce API client for the current store const bigcommerce = connections.bigcommerce.current; if (!bigcommerce) { throw new Error("Missing bigcommerce connection"); } // fetch the product data const product = await bigcommerce.v3.get("/catalog/products/{product_id}", { path: { product_id: params.id, }, }); if (!product) { throw new Error("Missing product"); } // log the product data and webhook payload logger.info({ product, params }, "product data and webhook payload"); // store product data in the product data model await api.bigcommerce.product.create({ bigcommerceId: product.id, name: product.name, store: { // get the bigcommerce/store id for the record stored in Gadget _link: connections.bigcommerce.currentStoreId, }, }); }; export const options: ActionOptions = { triggers: { bigcommerce: { webhooks: ["store/product/created"], }, }, };
import { ActionOptions } from "gadget-server"; export const run: ActionRun = async ({ params, logger, api, connections }) => { // get the BigCommerce API client for the current store const bigcommerce = connections.bigcommerce.current; if (!bigcommerce) { throw new Error("Missing bigcommerce connection"); } // fetch the product data const product = await bigcommerce.v3.get("/catalog/products/{product_id}", { path: { product_id: params.id, }, }); if (!product) { throw new Error("Missing product"); } // log the product data and webhook payload logger.info({ product, params }, "product data and webhook payload"); // store product data in the product data model await api.bigcommerce.product.create({ bigcommerceId: product.id, name: product.name, store: { // get the bigcommerce/store id for the record stored in Gadget _link: connections.bigcommerce.currentStoreId, }, }); }; export const options: ActionOptions = { triggers: { bigcommerce: { webhooks: ["store/product/created"], }, }, };
  1. Create another product in your BigCommerce store and check api/models/bigcommerce/product/data to see your saved product data.

Every time you add a product to your BigCommerce sandbox store, the product data will be also saved to your Gadget database.

For more on working with BigCommerce data, see the data guide.

Congrats! You have learned how to start building BigCommerce apps in Gadget!

Next steps 

Now that you have set up a BigCommerce connection and learned how to subscribe to webhooks and store data in a Gadget database, you can start building a single-click app.

Check out our tutorial for building a full-stack, single-click app that automatically adds search keywords to products:

Automatically add search keywords to products

Learn how to build a full-stack, single-click app that adds search keywords to products.

Start building →

Was this page helpful?