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
Ensure you have the latest version of Shopify CLI installed to configure app-specific webhook subscriptions.
Sign up for Amazon EventBridge.
For development, you can use mock servers like Hookdeck Console or webhook.site can be used for development.
Project
Anchor to Set your app up to receive webhooks from Amazon EventBridgeSet your app up to receive webhooks from Amazon Event
Anchor to Set up a connection between Amazon EventBridge and ShopifySet up a connection between Amazon Event
-
In Shopify Partners app Build Configuration page, under the Amazon EventBridge section, click Create source.
-
Paste your AWS account ID, and choose your AWS region.
You need the AWS region when you associate an event bus with the source.
-
Provide a unique event source name. Each event source requires a unique name. If you have multiple apps, then consider a name that matches your app.
-
Click Create.
Anchor to Grant Shopify access to publish webhooks to your Amazon EventBridge event busGrant Shopify access to publish webhooks to your Amazon Event
Follow AWS EventBridge Resources instructions to set up an event bus from a Partner's event source:
-
In the AWS console, under EventBridge, navigate to the Partner event sources page.
-
In the Region drop-down list, select the AWS region that you chose when you set up your event source.
These regions must match for the event bus to connect with the event source.
-
Click the Partner event source that you created, and make note the ARN found under Partner event source ARN.
You need this address to subscribe to a webhook.
-
Select the option to associate the event source with an event bus.
Anchor to Create a rule to ensure the webhook is routed to the target you want it sent toCreate a rule to ensure the webhook is routed to the target you want it sent to
A rule is Amazon Eventbridge’s way of ensuring the event is routed to the target you want it sent to
Amazon EventBridge groups and sorts the events that your event source sends based on the rules that you define. After you set up your event source and associate it with an event bus, create a rule that tells AWS what to do with events it receives on the bus.
To define multiple rules, repeat this step for each rule.
As your app audience grows, your traffic can increase significantly. Consider using AWS CloudWatch to monitor your EventBridge integration for usage patterns and errors. For example, you can trigger an alert if an EventBridge rule is broken.
-
In the AWS console navigation menu navigate to rules.
-
Select your event bus.
-
Create a rule with a rule type of Rule with an event pattern and provide a name and a description.
-
When building the event pattern, select the following options:
-
EventBridge partners as the source
-
Shopify as the Partner
-
All Events as the event type
-
You can also define a custom event pattern for your rule.
-
In the Targets section, choose an AWS target such as a Lambda function or an SQS queue.
Events that are processed by this rule are sent to the function or queue that you select.
Anchor to Optional: Define a custom event patternOptional: Define a custom event pattern
When you create a rule, you can process events separately depending on factors like which shop generated the event or which resource triggered the event.
Event patterns in EventBridge rules have the same structure as the payloads that they match. Matching values are added to an array and compared using OR. You can also match by prefix using the prefix key.
-
Select Custom pattern.
-
Provide a custom pattern that matches the structure of an Amazon EventBridge payload.
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 a product has been updated, we need to include the read_products 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, such as read_orders, require manual steps in your Partner Dashboard. Go to your app > API Access > Access requests > Protected customer data access, fill out only the first step, and then save. Reinstall your app in the Shopify admin to register the granted scope.
Anchor to Select the API versionSelect the API version
The API version impacts which topics are available to subscribe to. The React Router template defaults to the latest version in your app configuration file. However, you can update the API version as needed.
Anchor to Configure topics to subscribe toConfigure 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"].
Your endpoint address should be your ARN. You can find details in your Amazon EventBridge console: Partner Event Sources > Select your event source > Partner event source ARN.
Anchor to Process your webhooksProcess your webhooks
Follow the Amazon EventBridge docs to subscribe to event data and process events.
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
When working in development mode, webhook subscriptions are automatically updated when you save your TOML file.
- Save your TOML file.
- If
app devis running, the webhook subscription will be automatically created or updated. - The webhook subscription is now active in your development store.
This step abstracts away calls to the webhookSubscriptionCreate GraphQL mutation
Learn more about subscribing to webhook topics using the GraphQL Admin API.
Anchor to Test your subscriptionTest your subscription
Anchor to Use Cloudwatch to ensure you can see the webhooks coming throughUse Cloudwatch to ensure you can see the webhooks coming through
-
Copy and paste your event bus URL (this is your ARN).
-
Navigate to CloudWatch > Live tail.
-
Select EventBridge.
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 appear in your Cloudwatch Live tail 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 be your ARN. You can find details in your Amazon EventBridge console: Partner Event Sources > Select your event source > Partner event source ARN.
This the same format as the URI you specified in your app configuration file.
Anchor to Deploy your appDeploy your app
When you're ready to release your webhook subscriptions to production:
When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of your app configuration and all extensions.
-
Navigate to your app directory.
-
Run the following command.
Optionally, you can provide a name or message for the version using the
--versionand--messageflags.Terminal
shopify app deploy
Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.
If you want to create a version, but avoid releasing it to users, then run the deploy command with a --no-release flag.
You can release the unreleased app version using Shopify CLI's release command, or through the Dev Dashboard.
Anchor to Tutorial Complete!Tutorial Complete!
Congratulations! You subscribed your app to a webhook topic using React Router, 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 React Router 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.