Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: How to register webhook in public app

How to register webhook in public app

nikhilthink
Shopify Partner
7 0 0

I am not able to register the webhook, I read the documentation and I am not able to figure out as to in which file I have to write the webhook post method and do I have to fetch the post method in the frontend in order to invoke it. 

Replies 14 (14)

Weaverse
Shopify Partner
82 27 38

To register a webhook in your Shopify app, you need to use the Shopify REST API to create the webhook and specify the URL endpoint for receiving the webhook. The webhook handling code should be in the backend using a server-side programming language like Node.js or Ruby.

Here's the code to register a webhook:

 

const webhook = new shopify.rest.Webhook({session: session});
webhook.address = "https://your-app.com/webhook-receiver-address";
webhook.topic = "customers/update";
webhook.format = "json";
await webhook.save({
  update: true,
});

 

You can find more details on how to register webhooks in the Shopify documentation:

https://shopify.dev/docs/api/admin-rest/2023-01/resources/webhook

And here's an article on configuring HTTPS for webhooks:

https://shopify.dev/docs/apps/webhooks/configuration/https

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
nikhilthink
Shopify Partner
7 0 0

I wrote the same piece of code in my Index.js file where all other end points are defined, now what do I have to do next

Weaverse
Shopify Partner
82 27 38

I recommend you to take the Shopify App tutorial first; it includes the webhook setup as well:
https://shopify.dev/docs/apps/getting-started/build-app-example

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
nikhilthink
Shopify Partner
7 0 0

I checked and if I am not wrong, the sample app doesn't contain any code related to webhooks.

If you can just tell me if I am doing everything right in below code

 

 

 

app.post("/api/2023-01/webhooks",async (_req, res) => {
  const webhook = new shopify.api.rest.Webhook({session: res.locals.shopify.session});
  webhook.topic = "orders/create";
  webhook.format = "json";
  await webhook.save({
    update: true,
  });
})
Weaverse
Shopify Partner
82 27 38

The code that I've sent is for registering the webhook address with Shopify; you should execute it right after the user authenticates with your app. 
After registering webhook, when the store gets updated, your app will receive webhook data from Shopify; you should create a route to handle it. Here is the document guide: 
https://shopify.dev/docs/apps/webhooks/configuration/https#step-4-receive-the-webhook

Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Theme Customizer for Shopify Hydrogen
Join our Weaverse + Hydrogen community: Weaverse Community
nikhilthink
Shopify Partner
7 0 0

yeah, in order to receive the HTTP request from shopify, I wrote following code in my frontend

 

const fetchWeb=async()=>{
        try {
           await fetch("/api/2023-01/webhooks",{
            method:"POST",
            headers:{
              'Accept':"application/json",
              'Content-Type':"application/json"
            }
           }).then(response=>response.json().then(response=>console.log(JSON.stringify(response))))
        } catch (err) {
          console.log(err.message)
        }
      }
is this good?
ShopifyDevSup
Shopify Staff
1453 238 531

Hey @nikhilthink and @Weaverse,

Just wanted to add a few links to your to conversation here. If you are following the Build an app guide and webhooks documentation, neither cover specific steps for setting up webhooks directly in your app.  

If you are building further upon an app that is leveraging the official shopify-api-js library an example is provided in the repo for setting up webhooks, which is expanded on in this workshop

Hope those links help with your setup - cheers!

@awwdam 
Shopify Developer Support

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

originmaster
Shopify Partner
45 2 19

@ShopifyDevSup both of these links are now dead. Are there any other examples that you know of? Thanks

ShopifyDevSup
Shopify Staff
1453 238 531

Hey @originmaster , thanks for pointing that out. 

 

This guide here has updated links and resources for managing webhooks in your app https://shopify.dev/docs/apps/webhooks/configuration 

 

Hope this helps 

 

- Kyle G.

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

originmaster
Shopify Partner
45 2 19

@ShopifyDevSup thanks, I was more looking for examples of the setup. I mostly figured it out but one thing that isn't clear is how to register new webhooks when the app is already live and installed on the store. It seems the only way is to uninstall the app and reinstall it because OAuth flow needs to be triggered

ClementOutis
Shopify Partner
25 4 16

Hi @originmaster did you understand how to register new webhooks on a public app? 

I try to find a way too, and the classic method don't seems to work!

- Helpful? Like and Accept a solution
- Casper - Cart, sync and keep saved for a month your customer's cart across multiple device seamlessly.
- BrandCraft, give you all the keys to edit your checkout page, only for Shopify Plus with the Checkout Extensibility.
originmaster
Shopify Partner
45 2 19

@ClementOutis I was working on a custom app but public apps should be the same. I'm using a Remix app with the latest Shopify packages and it turned out to be quite straightforward to add the webhooks (described in the docs here), but there were a couple of things that caught me out when getting them registered.


Once you have the webhook added in your shopifyApp config (shopify.server.ts), and the webhook handler (in webhooks.tsx):
- make sure you have added the access scopes you need in both the app toml file and in the .env on your server (or wherever you have these set up in production). If these access scopes don't match between the toml file and the server your app will go into an auth loop and it will display a browser cookies error. I wasted a few hours on this.

Another thing to note - webhooks that have been added after the app is already installed on a store don't seem to register without OAuth being triggered again, so I've found that visiting the /auth route in the app will register the webhook.

Hope that helps!

Mariam_Rashad22
Visitor
1 0 0

Hi @originmaster I would like to inquire about the authentication process for this part. I have created a webhook for the "create order" topic, and the webhook's address points to an endpoint within my Shopify app. However, whenever an order is created, the webhook does not trigger the endpoint, and an error is thrown stating that the shop is not provided.

Could you please advise on how to resolve this issue and ensure that the URL is accessible? It is worth noting that the app has multiple endpoints that are authorized and utilize the Shopify access token without any issues.

originmaster
Shopify Partner
45 2 19

@Mariam_Rashad22 If I was you, rather than creating an extra endpoint to handle your "create order" webhook, use the existing `/webhooks` endpoint that is already set up within the app and handle the `ORDERS_CREATE` topic in there with the rest of the webhook topics. Hope that helps