How to Test and Replay BigCommerce Webhook Events on localhost with Hookdeck

BigCommerce is a popular e-commerce platform that enables businesses and individuals to create and manage online stores easily. It offers a wide range of features including multiple integrations and payment processing. The availability and support for webhooks, which are used to trigger events in response to specific actions or changes in the store, make it possible to automate processes and streamline operations.

Hookdeck is a webhook infrastructure service that helps developers receive webhooks, manage events and troubleshoot any issues quickly. It also provides the ability to expose a localhost server to the internet. This is useful for testing webhooks, as it allows developers to receive webhook requests from a service like BigCommerce on their local development environment.

In this article, I will discuss how to test BigCommerce webhooks with a localhost Node.js Express application using Hookdeck.

Relaying your BigCommerce webhooks through Hookdeck provides an overall view and keeps track of every event that occurs.

We will cover how to:

1. Set up a localhost webhook endpoint
2. Create a Hookdeck connection
3. Create a BigCommerce webhook
4. Test BigCommerce webhook event to localhost app

Set up a localhost webhook endpoint

For this example, we are going to use the sample Node.js code from Hookdeck's repository. Feel free to follow up with any application or code you might have.

• Open up your terminal and clone the repository by running:

git clone https://github.com/hookdeck/nodejs-webhook-server-example.git

• Change into the cloned directory and install the dependencies.

cd nodejs-webhook-server-example
npm install

• Start the server by executing:

node server.js

The node.js server starts up on http://localhost:1337. See the list of endpoints in the routes.js file. We will make use of the /bigcommerce-webhooks-endpoint.

Create a Hookdeck connection

There are several ways of creating a Hookdeck connection (see the guide here).

Create a Hookdeck connection with Hookdeck CLI

1. Install the Hookdeck CLI
2. Open up your terminal and expose the localhost port with:

hookdeck listen 1337

3. The Hookdeck CLI initiates the creation of a guest account that is used.
4. You get prompted to do some basic setup:
   • Create a new source (ex. BigCommerce)
   • Set the path to be forwarded to as /bigcommerce-webhooks-endpoint
   • Name the connection label (ex. localhost-app)
5. The connection is created and you are given: a. A login URL to use for your Hookdeck dashboard b. The webhook URL needed

6. Follow the Login URL and see the same connection on your Hookdeck online dashboard.

7. Copy the BigCommerce Source webhook URL. It is needed later in setting up the webhook listener.

Create a BigCommerce webhook

To create a BigCommerce webhook:

1. Sign up and create a BigCommerce store if you don’t have one, or Log in to an existing store.
2. Navigate to Settings > API accounts from the side panel on your BigCommerce dashboard.

3. Click on Create API account to create a new account.
4. Set the name for the account and select modify under Products as the resource to have access.
5. Save the changes to commit.

You need the API account details created above to create a new BigCommerce webhook listener. To create a BigCommerce webhook:

• Send a POST request to the Create a webhook endpoint in this format:

curl -X POST \
  https://api.bigcommerce.com/stores/{{STORE_HASH}}/v3/hooks \
  -H 'X-Auth-Token: {{ACCESS_TOKEN}}' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -d '{
  "scope": "store/product/*",
  "destination": "{{HOOKDECK_URL}}",
  "is_active": true,
  "headers": {}
}'

• Replace the placeholders with their respective values and run:
  • {{STORE_HASH}}: Hash of your BigCommerce store, provided with the API account credentials
  • {{ACCESS_TOKEN}}: The access token of the API account
  • {{HOOKDECK_URL}}: The Hookdeck connection URL
  • "scope": "store/product/*": This defines the events you want the webhook to listen to (In this case, every action happening on a product)
• You get a 200 response upon success.

Read more about BigCommerce webhooks and events here.

Test BigCommerce webhook event to localhost app

I’ve shown you how to set up a localhost server, create a Hookdeck connection, and configure a BigCommerce webhook. Let us test and trigger the event specified to make sure it is being received in our localhost application.

1. Go to your BigCommerce dashboard.
2. Open the Products section from the sidebar.
3. You see a list of products available in your store.
4. Click on the Eye icon across any product to hide its visibility from the store.

This triggers an event under the store/product/* scope the payload from the action gets relayed by Hookdeck directly to your localhost application

On your Hookdeck dashboard in the Request section, you should see the requests received with a 200 status code.

Back in the terminal of the localhost application, the successful payload from the webhook is received and logged.

Retry error or failed events

In case any failed events don’t make it to your destination for some reason, Hookdeck provides you with the ability to retry any attempts to deliver a failed or error event.

To retry a failed event:

• Navigate to the Events tab on the sidebar of your Hookdeck dashboard.
• Hit the Retry across the failed event.

• This replays the event again from Hookdeck to the local application.

A Hookdeck Request is an incoming webhook that Hookdeck receives from an external source. It contains the data that was sent by the external source as is (ex. from BigCommerce).

A Hookdeck Event is the webhook delivered by Hookdeck including configurations or filters applied to a destination (ex. to localhost app).

See more details on managing Hookdeck requests and events in the Hookdeck documentation.

Conclusion

In this guide, you learned how to receive BigCommerce webhook events through Hookdeck, a webhook infrastructure for reliable ingestion, to an application running on localhost.

Hookdeck can be used safely to consume, monitor, and troubleshoot your BigCommerce webhooks.