Core Functionalities
Webhooks

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:

  1. Subscribe to a Topic: Use the GraphQL Admin API to create a webhook subscription for the desired topic.
  2. 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.
  3. 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.

TopicEvent
customers/data_requestRequests to view stored customer data
customers/redactRequests to delete customer data
shop/redactRequests 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
    1. Go to your partner account
    2. Your app configuration page
    3. In Compliance webhooks section
    4. update the field with endpoint links

The endpoint is /webhooks and it's already return 200. and you can modify it based on your need