How to process webhooks in updated Node and React Shopify app?

nandezer · March 14, 2021, 11:47am

Hey!

A month ago I developed a node and react Shopify app following the “Build a Shopify App with Node and React” tutorial. Since then they seem to have updated/changed the way to register and process webhooks.

The first time I had it the code was something like this:

/* Register webhook for cart update */
const registrationCartUpdate = await registerWebhook({
	address: `${HOST}/webhooks/carts/update`,
	topic: 'CARTS_UPDATE',
	accessToken,
	shop,
	apiVersion: ApiVersion.October20
});
if (registrationCartUpdate.success) {
	console.log('Successfully registered cart update webhook!');
} else {
	console.log('Failed to register cart update webhook', registrationOrderPaid.result);
}

const webhook = receiveWebhook({secret: SHOPIFY_API_SECRET});
    
/*Receive webhook carts update*/
 router.post('//webhooks/carts/update', webhook, (ctx) => {
         console.log('received cart update webhook: ');
         //Print all cart items
          console.log(ctx.state.webhook.payload.line_items);
});

To something like this:

/* Register webhook for cart update*/
const registrationCartUpdate = await Shopify.Webhooks.Registry.register({
  shop,
  accessToken,
  path: '/webhooks',
  topic: 'CARTS_UPDATE',
  webhookHandler: async (_topic, shop, body) => {
	console.log('received cart update webhook: ');
	//Print body
	console.log(body);
  },
});
if (registrationCartUpdate.success) {
	console.log('Successfully registered cart update webhook!');
} else {
	console.log('Failed to register cart update webhook', registrationOrderPaid.result);
}

router.post("/webhooks", async (ctx) => {
	try {
                //Process webhook
		await Shopify.Webhooks.Registry.process(ctx.req, ctx.res);
		console.log(`Webhook processed, returned status code 200`);
	} catch (error) {
		console.log(`Failed to process webhook: ${error}`);
	}
});

My problem is that the body that I receive in the new way of doing it is a string (see console.log):

┃ received cart update webhook:
┃ {"id":"b28c0ef9ff6ce6b4b1261ab7f6f4ed76","token":"b28c0ef9ff6ce6b4b1261ab7f6f4ed76","line_items":[{"id":39266914205850,"properties":null,"quantity":1,"variant_id":39266914205850,"key":"39266914205850:2dae68072231626227fe28e192723de1","discounted_price":"25.00","discounts":[],"gift_card":false,"grams":0,"line_price":"25.00","original_line_price":"25.00","original_price":"25.00","price":"25.00","product_id":6541117784218,"sku":"","taxable":true,"title":"T-shirt","total_discount":"0.00","vendor":"A","discounted_price_set":{"shop_money":{"amount":"25.0","currency_code":"SEK"},"presentment_money":{"amount":"25.0","currency_code":"SEK"}},"line_price_set":{"shop_money":{"amount":"25.0","currency_code":"SEK"},"presentment_money":{"amount":"25.0","currency_code":"SEK"}},"original_line_price_set":{"shop_money":{"amount":"25.0","currency_code":"SEK"},"presentment_money":{"amount":"25.0","currency_code":"SEK"}},"price_set":{"shop_money":{"amount":"25.0","currency_code":"SEK"},"presentment_money":{"amount":"25.0","currency_code":"SEK"}},"total_discount_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}}},{"id":37335165829274,"properties":{},"quantity":1,"variant_id":37335165829274,"key":"37335165829274:677f0f916861c76dd6c1cf0be5719fd7","discounted_price":"0.00","discounts":[],"gift_card":false,"grams":0,"line_price":"0.00","original_line_price":"0.00","original_price":"0.00","price":"0.00","product_id":6010213040282,"sku":"","taxable":true,"title":"Movesgood T-shirt","total_discount":"0.00","vendor":"Test Store","discounted_price_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}},"line_price_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}},"original_line_price_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}},"price_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}},"total_discount_set":{"shop_money":{"amount":"0.0","currency_code":"SEK"},"presentment_money":{"amount":"0.0","currency_code":"SEK"}}}],"note":null,"updated_at":"2021-03-14T11:40:41.373Z","created_at":"2021-03-08T05:27:18.177Z"}
┃ Webhook processed, returned status code 200

So I can’t do body.line_items as then I get an undefined error.

The ctx variable seems to have changed also, as ctx.state.webhook.payload.line_items for example is also undefined.

How can I read the items in the cart now? (same problem applies when I try to do order/paid!)

nandezer · March 15, 2021, 6:05pm

By adding the parse function of JSON, I get the string into an object.

const obj = JSON.parse(body);

scole954387 · March 21, 2021, 4:06am

I’m new to programming and been tearing my hair out trying to find out how to register multiple webhooks. I’m using similiar code as yours that’s created with the shopify cli node app generator.

Do you have code to register multiple webhooks?

Thanks!

nandezer · March 21, 2021, 4:45am

Hey @scole954387 ,

you basically have to put one const after the other.

/*Register webhook for uninstalled app */
			const registrationUninstalled = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: "/webhooks",
			  topic: "APP_UNINSTALLED",
			  webhookHandler: async (topic, shop, body) => {
				console.log('App uninstalled');
				const obj = JSON.parse(body);
				console.log(obj);
				delete ACTIVE_SHOPIFY_SHOPS[shop];
			  },
			});
			 if (registrationUninstalled.success) {
			  console.log('Successfully registered uninstalled app webhook!');
			} else {
			  console.log('Failed to register uninstalled app webhook', registrationUninstalled.result);
			}
			
			/* Register webhook for orders paid */
			const registrationOrderPaid = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'ORDERS_PAID',
			   webhookHandler: (_topic, shop, body) => {
				  console.log('received order paid webhook: ');
				  const obj = JSON.parse(body);
			  },
			});
			 if (registrationOrderPaid.success) {
			  console.log('Successfully registered Order Paid webhook!');
			} else {
			  console.log('Failed to register Order Paid webhook', registrationOrderPaid.result);
			}
				
			/* Register webhook for cart create */
			const registrationCartCreate = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'CARTS_CREATE',
			  webhookHandler: (_topic, shop, body) => {
				console.log('received cart created webhook: ');
				const obj = JSON.parse(body);
				console.log(obj);
			  },
			});
			if (registrationCartCreate.success) {
				console.log('Successfully registered cart create webhook!');
			} else {
				console.log('Failed to register cart create webhook', registrationCartCreate.result);
			}
			
			/* Register webhook for cart update*/
			const registrationCartUpdate = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'CARTS_UPDATE',
			  webhookHandler: async (_topic, shop, body) => {
				console.log('received cart update webhook: ');
				const obj = JSON.parse(body);
				 console.log(obj);
			  },
			});
			if (registrationCartUpdate.success) {
				console.log('Successfully registered cart update webhook!');
			} else {
				console.log('Failed to register cart update webhook', registrationCartUpdate.result);
			}

scole954387 · March 21, 2021, 3:24pm

Perfect thanks! That’s what I was thinking but couldn’t seem to fit all the pieces together to get it to work. If you don’t mind can you show me the routes processing the individual webhooks received?

Thanks again!

nandezer · March 21, 2021, 3:34pm

The webhook handler in each individual webhook is what processes it:

webhookHandler: async (_topic, shop, body) => {
     console.log('webhook handler: ');
     const obj = JSON.parse(body);
     console.log(obj);
 },

The route for any of the webhooks is what I have posted on my question:

router.post("/webhooks", async (ctx) => {
     //.....
});

This will make sure to call the right webhookHandler function.

So basically the code you need is this:

/*Register webhook for uninstalled app */
			const registrationUninstalled = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: "/webhooks",
			  topic: "APP_UNINSTALLED",
			  webhookHandler: async (topic, shop, body) => {
				console.log('App uninstalled');
				const obj = JSON.parse(body);
				console.log(obj);
				delete ACTIVE_SHOPIFY_SHOPS[shop];
			  },
			});
			 if (registrationUninstalled.success) {
			  console.log('Successfully registered uninstalled app webhook!');
			} else {
			  console.log('Failed to register uninstalled app webhook', registrationUninstalled.result);
			}
			
			/* Register webhook for orders paid */
			const registrationOrderPaid = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'ORDERS_PAID',
			   webhookHandler: (_topic, shop, body) => {
				  console.log('received order paid webhook: ');
				  const obj = JSON.parse(body);
			  },
			});
			 if (registrationOrderPaid.success) {
			  console.log('Successfully registered Order Paid webhook!');
			} else {
			  console.log('Failed to register Order Paid webhook', registrationOrderPaid.result);
			}
				
			/* Register webhook for cart create */
			const registrationCartCreate = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'CARTS_CREATE',
			  webhookHandler: (_topic, shop, body) => {
				console.log('received cart created webhook: ');
				const obj = JSON.parse(body);
				console.log(obj);
			  },
			});
			if (registrationCartCreate.success) {
				console.log('Successfully registered cart create webhook!');
			} else {
				console.log('Failed to register cart create webhook', registrationCartCreate.result);
			}
			
			/* Register webhook for cart update*/
			const registrationCartUpdate = await Shopify.Webhooks.Registry.register({
			  shop,
			  accessToken,
			  path: '/webhooks',
			  topic: 'CARTS_UPDATE',
			  webhookHandler: async (_topic, shop, body) => {
				console.log('received cart update webhook: ');
				const obj = JSON.parse(body);
				 console.log(obj);
			  },
			});
			if (registrationCartUpdate.success) {
				console.log('Successfully registered cart update webhook!');
			} else {
				console.log('Failed to register cart update webhook', registrationCartUpdate.result);
			}
				

			router.post("/webhooks", async (ctx) => {
				try {
					//Process webhook
					await Shopify.Webhooks.Registry.process(ctx.req, ctx.res);
					console.log(`Webhook processed, returned status code 200`);
				} catch (error) {
					console.log(`Failed to process webhook: ${error}`);
				}
			});

scole954387 · March 21, 2021, 3:52pm

Awesome! Thanks. I actually figured it out after I replied once I got back on my computer and analyzed the code more. Your code had the missing pieces that I needed to put it together! I was thinking the route handled the actual processing of the specific webhook but now I see that the webhookHandler (makes sense now, LOL) does the processing.

webhookHandler: (_topic, shop, body) => {
				console.log('received cart created webhook: ');
				const obj = JSON.parse(body);
				console.log(obj);

I REALLY appreciate your help. I was hours and hours googling just to find an example of multiple webhooks being processed. Such a simple thing that took me forever to figure out.

Easy to tell just how new I am to this! LOL

Thanks again!

nandezer · March 21, 2021, 3:57pm

You and me both (in the hours and the being new!) haha

Happy I was able to help

rohit_martires · August 19, 2021, 10:01pm

hey i was trying the same thing but in the topic fields i was adding “carts/create” and “carts/update” then i saw this answer and switched the topic to CARTS_CREATE and CARTS_UPDATE and it worked, but my question is from where did u find these topics names ?

i’ve been using this link https://shopify.dev/api/admin/rest/reference/events/webhook are u referring to some other docs ?

Cheers

nandezer · August 20, 2021, 7:50am

Hey,

I’ve used the WebhookSubscriptionTopic enum. You can find it here.

ConspireAgency · November 10, 2021, 5:10am

Instead of writing redundant code to register the webhooks, you may want to write a function that just iterates through an array of all the topics for which you’d like to register webhooks.

Topic		Replies	Views
NOt able read or process webhook data for products/create Shopify Apps	2	177	May 6, 2022
Webhook registering Graphql Basics And Troubleshooting	6	69	May 2, 2023
Need help implementing webhooks in the newest remix template? Shopify Apps shopify-apps	21	104	October 10, 2023
Can I process a webhook in the app.post method Express JS? Shopify Apps webhooks	0	14	June 8, 2022
Webhooks management shopifyApp - shopify-app-express Technical Q&A	2	93	July 7, 2023

How to process webhooks in updated Node and React Shopify app?

Related topics