Introduction to Shopify Webhooks

hi everyone and welcome to an introduction to shopify web books web books are a way for shopify to communicate an event that takes place on our store to an api that we manage let's say a user buys an item on our store we want to get details of that purchase we can simply register a web hook on shopify and whenever a purchase is made we get details of that purchase sent to our api through a webhook request now there are three things you need for you to set up a web book connection first you need a shopify store obviously then you need an api that the request is going to be sent to and you need an endpoint on that api that the webhook request is going to target so i have an api written in node.js here in visual studio code as you can see it has a root endpoint that says welcome to the awesome users api that can be anything then this endpoint just below the root endpoint shopify dash web hook dash request that is the endpoint that we're going to be calling with our shopify web hook is it has to be a post request because the web book request is going to be served as a post request so with this up the first thing i'm going to do is to bring up the cli i'm going to shut this down just to make sure that any changes i made kick in just clear the screen and start my local server with npm start so now we have the server running at localhost port 3000. naturally web book requests are not going to be sent to a local host you need an https url to be able to receive your web books so we need to find a way to make this publicly available and with an https endpoint to do that we're going to be making use of ng rock ngroc is a tool that proxies requests from the web to our local server to a tunneling system to get ngoc serving our api i'm just going to open another tab ensure that the api is running and mark the port our api has gone at about 3000. here i'm just going to run at the root of the project mpx ngrok http 3000 hit enter and wait for android to do at the end of this process we're going to get an https url that will be publicly available on the internet now that ngoc is done simply copy the https version of the url as you can see several urls are printed here but you did the https version to receive your web book requests just going to pull up my server or my browser rather this is my shopify store open the tab and test that this url points to my server as you can see the welcome to the awesome users api is printed on the screen so we have ngrok successfully tunneling the requests to my local server so once you have that the next thing is to go to your shopify admin page go to your shopify admin page that would be the name of your store.myshopify.com admin you go to admin page and you look for settings is down at the left hand side here so you click on settings once the settings page comes up click on notifications then scroll down down down down down down down and you'll see the web books section as you can see i haven't created anywhere book so i'm just going to click on the creator book button and which event am i going to be requesting web books to be sent to my server click the drop down and i'm going to be picking cut update so that i don't have to check out before i see some activity so i'm just going to click cut update so anytime the cart is updated anytime the user adds an item to the shopping shopping cart or delete an item from the shopping cart i get a request sent to my endpoint so click that i want it to be in json format now the url the url that we need to point our web hook request to just going to click this tab and copy the root url from here update this then go into my application code vs code and copy this endpoint as you can see what this endpoint simply does is console.log the request so you're just going to print the request to the cli so go back to the shopify store and add the endpoint remove the extra for slash there web api version unstable i just use the latest all delicious and rc release candidate okay so we saved that and as you can see webhook saved successfully so once there's a cat update this web is going to make a request to this endpoint in json format good so let's test that out we're going to be expecting a printout in the cli here whenever you request hits the endpoint so let's go to our store click a product i'm just going to click this casual shirt and as that comes up i'm going to click add to cart and as you can see i have one casual shirt in my shopping cart let's see if we have gotten the web book request already go to the cli open it no request yet let's go to the cart let's view the cart and see if the request is going to be fired when we update the cart so i'm just going to increase the quantity once again i'm going to check if we have a request already yeah as you can see we have a request fired as we updated the cat the request was fired and printed on the cli i think two requests actually came because i updated the card twice but as you can see we have some activity here the request body is a whole lot i'll just scroll up and see if we can get like a dot body that will be easier to read so as seen here in one of the requests we have a dot body property or we have a body property so i'm just going to go back to my code vs code and just say rec dot body just change this to dot body then uh i need to kill my server and start it once again pm start you don't need to update ng grog that works fine so we have the server back up and now let's update the cart once again i see the request body so i'm just going to drop this down to two once i do that let's inspect our cli yeah a request comes in and it was look at this request you can see the line items there's a line items array there's an id and a token also attached to the body of the request so if we look close we can see the price of the item and we can also see the vendor that stick it out store that is my store and the line price because we have two items we now have 10 that's a double of five so as you can see in this video we've seen how to create a web book on shopify and receive the request to an https endpoint on a server that we manage if this video has been of help remember to hit the like button and also subscribe to our channel for more videos on processing webhooks

Channel: Hookdeck

Views: 1,865

Keywords:

Id: edWXuE5Cz4w

Length: 8min 25sec (505 seconds)

Published: Fri Apr 30 2021