Webhooks
Webhooks are a powerful tool that allows your application to receive real-time notifications about specific events occurring within a Shopify store. By subscribing to various webhook topics, your app can stay synchronized with Shopify data or trigger additional actions when certain events occur. This is a more efficient alternative to continuously polling for changes, as webhooks push the data to your app as soon as the event happens.
When to Use Webhooks
Webhooks are particularly useful in scenarios where your app needs to respond to events in near real-time. Here are some examples:
- Inventory Management: Notify clients about changes in inventory levels.
- Order Processing: Inform shipping companies about new orders, returns, or refunds.
- Data Cleanup: Remove customer data from your database when an app is uninstalled.
- Accounting Integration: Sync order data with accounting software.
- Dynamic Pricing: Update a product's warranty price based on changes to the product's price.
APIs vs. Webhooks
While APIs are useful for querying data and making changes, webhooks are ideal for receiving event-driven data. For instance, instead of polling the API to check if a new order has been created, you can subscribe to the orders/create webhook topic. This way, Shopify will send a notification to your specified endpoint whenever a new order is created.
Key Terminology
- Webhook Topic: Defines the type of event your app will receive notifications for. For example, subscribing to the products/create topic will notify your app whenever a new product is created.
- Webhook Subscription: Declares your app's intention to receive webhooks for a specific topic. It includes the topic name and the subscription endpoint (where Shopify will send the webhooks).
- Headers: Metadata included in each webhook, such as the shop domain, event ID, and API version.
Setting Up Webhooks
To set up a webhook, you need to:
- Subscribe to a Topic: Use the GraphQL Admin API to create a webhook subscription for the desired topic.
- Specify an Endpoint: Provide an endpoint where Shopify will send the webhook notifications. This can be an HTTPS endpoint or a cloud-based event bus like Google Pub/Sub or Amazon EventBridge.
- Handle the Payload: Process the incoming webhook payload in your app to perform the necessary actions.
Subscribe to a Topic
Subscribing to a topic means that when the corresponding topic event is triggered, your application will receive a notification at the specified endpoint (callback url), except for GDPR
webhooks.
We have already handled all that you need for subscribing to a topic, just simple:
const { webhook } = await authenticateExtra(request);
...
...
await webhook.subscribe(webhook.topics.TOPIC_NAME, callbackUrl); // callbackUrl means the endpoint where it's typically https://yourdomain.com/webhooks
Keep in mind, we have set up a webhook table where webhooks that hit /webhooks
in /app/routes/webooks.jsx
, will be stored. and it's a great place to start writing your business logic.
Valid topics
Here is how you can access valid topics WebhookSubscriptionTopic
const { webhook } = await authenticateExtra(request);
...
...
const topics = webhook.topics
//e.g. topics.CUSTOMERS_CREATE
Mandatory compliance webhooks (GDRP)
Mandatory compliance webhooks are callback methods that Shopify requires for apps listed on the Shopify App Store. Shopify requires mandatory compliance webhooks as a way to manage the personal data that an app collects.
Topic | Event |
---|---|
customers/data_request | Requests to view stored customer data |
customers/redact | Requests to delete customer data |
shop/redact | Requests to delete shop data |
Not to worry, we have you covered!😉
All you have to do is either
- Update your .toml file with
[webhooks]
api_version = "2024-04"
[[webhooks.subscriptions]]
uri = "https://your-doamin/webhooks"
compliance_topics = [ "customers/data_request", "customers/redact", "shop/redact" ]
- Or
- Go to your
partner account
- Your app
configuration
page - In
Compliance webhooks
section - update the field with
endpoint
links
- Go to your
The endpoint is /webhooks
and it's already return 200. and you can modify it based on your need