Subscribe to a webhook topic
Subscribe your app to Shopify webhook topics so that it will be alerted when an event occurs on a merchant store.
Suppose you are building a warranty pricing app that determines which warranty options a customer can add to their cart, based on the cost of an order.
When a customer is checking out, the total order cost is used to determine which warranty options a customer can select from.
In this tutorial, you'll subscribe your app to a webhook topic to be alerted whenever a new order is created.
Anchor to What you'll learnWhat you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Use your app configuration file to set up a webhook subscription.
- Use cloud-based delivery methods like Google Cloud's Pub/Sub event bus to receive webhooks.
- Test your subscription is configured correctly and you are receiving webhooks.
Shopify recommends using Google Pub/Sub as a cloud-based solution for delivering webhooks. You can also use Amazon EventBridge.
In instances where you want to hand-roll your own webhooks infrastructure, you may prefer your webhooks be delivered through HTTPS.
During development, you may choose to use your app's URL or external mock server sites like webhook.site and Beeceptor. These are not recommended for production.
Requirements
You must use Shopify CLI version 3.63.0 or higher to configure app-specific webhook subscriptions.
Scaffold an app that uses the Remix template.
Set up your Google Cloud account to use Pub/Sub.
Project
Anchor to Set your app up to receive webhooks from Google Pub/SubSet your app up to receive webhooks from Google Pub/Sub
To receive webhooks via a cloud-based event bus like Pub/Sub from Google Cloud, you must first set up a connection between your app and Pub/Sub.
Anchor to Grant Shopify access to publish webhooks to your Google Pub/Sub topicGrant Shopify access to publish webhooks to your Google Pub/Sub topic
-
Click on Topics in the left panel.
-
Click on the Create a topic button. Enter in a name, keep the remaining defaults and click on Create.
-
Next to the Google Pub/Sub topic you just created, click
â‹®and then click View permissions. -
Click on ADD PRINCIPAL.
-
Paste
delivery@shopify-pubsub-webhooks.iam.gserviceaccount.com(the Shopify service account address) into the New principals text box. -
In the Role drop-down list, select Pub/Sub as the type, and specify the role as Pub/Sub Publisher.
-
Click Save.
Anchor to Configure your webhook subscriptionConfigure your webhook subscription
Anchor to Update your access scopesUpdate your access scopes
Some webhook topics require scopes in order to be used.
Since we want to know about when an order has been created, we need to include the read_orders scope in the configuration file.
- To determine which scopes are required for each topic, use the Webhooks reference.
- The complete list of Shopify API access and approval scopes are listed here.
Scopes that access private customer data require to take manual steps in your Partner Dashboard. This is true of read_orders.
Navigate to your app > API Access > Access requests > Protected customer data access and fill out only the first step, then save.
Reinstall your app in the admin to ensure the granted scope on your app is registered with Shopify.
Anchor to Select the API versionSelect the API version
The API version impacts which topics are available to subscribe to. The Remix template defaults to the latest version in your app configuration file. However, you can update the API version as needed.
Anchor to Add topics to subscribe toAdd topics to subscribe to
To determine which topic to subscribe to, use the Webhooks reference.
In this example, your topic name will be in a list and formatted as:
topics = ["orders/create"].
Anchor to Configure the endpoint where you will receive webhooksConfigure the endpoint where you will receive webhooks
Your endpoint address should follow the following format:
Anchor to Process your webhooksProcess your webhooks
Add a new route to your app to process the event data when your app has received a webhook. In this case, we will just print to the console.
Anchor to Confirm the subscription has been added to this version of your appConfirm the subscription has been added to this version of your app
While working in development mode, however, the subscription is created once you have deployed your app, due to hot reloading.
- Save your TOML file.
- To deploy your app, run
shopify app deploy. - Navigate to the Partner Dashboard, click on your app, then Versions to see the latest version of your app. On this page, you will see
orders/createlisted in the Webhooks section.
Subscriptions are live on a store as soon as the app is installed, and assuming you have deployed.
This step abstracts away calls to the webhookSubscriptionCreate GraphQL mutation.
To learn more about subscribing to webhook topics using the Admin API, see the Subscribe using Admin API guide.
Anchor to Test your subscriptionTest your subscription
Anchor to Manually trigger an event in your test shopManually trigger an event in your test shop
Most webhook topics will fire immediately if you trigger the corresponding event your dev store.
- Navigate to your test shop and create a new order.
- The webhook payload should print to your Google Pub/Sub console.
A small number of webhook topics will not fire immediately if you trigger an event in your test shop. They include:
Anchor to Simulate an event using the command lineSimulate an event using the command line
You can use the CLI to simulate specific events occurring on a shop. This lets you test your processing logic by sending a POST request to your endpoint with a synthetic webhook. Note that it does not test your subscription configuration!
The address inputted for the --address flag should follow the following format:
Anchor to Tutorial Complete!Tutorial Complete!
Congratulations! You subscribed your app to a webhook topic using Remix, Google PubSub, and Shopify webhooks. Keep the momentum going with these related tutorials and resources.
Anchor to Next stepsNext steps
Follow our guide to deploy your Remix app to a testing or production environment.
Explore the Webhooks reference to learn about the full list of topics Shopify has, required access and approval scopes, and sample payloads.
Customize your webhooks experience by using filters or modifying the payload per webhook.
Decide how you want to share your app with users. For example, you might make your app available in the Shopify App Store, and bill customers for usage.