> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Handle Events with Webhooks for Self-hosting Without the JavaScript SDK
## Article: Handle Events with Webhooks for Self-hosting Without the JavaScript SDK
## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/webhooks/handle-events-with-webhooks-for-self-hosting-without-the-java-script-sdk.md
## Article Content:
# Handle Events with Webhooks for Self-hosting Without the JavaScript SDK
> **Notes:**
> This article explains how to handle events with webhooks for self-hosting without using the [JavaScript SDK](https://dev.wix.com/docs/sdk.md). If you're using the JavaScript SDK, instead read [Handle Events with Webhooks for Self-hosting Using the JavaScript SDK](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/webhooks/handle-events-with-webhooks-for-self-hosting-using-the-java-script-sdk.md).
> The webhook data structure differs depending on whether the JavaScript SDK is used. For the webhook data structure relevant to this implementation (without the SDK), refer to the documentation in our [REST reference](https://dev.wix.com/docs/api-reference/articles/work-with-wix-apis/platform/about-the-structure-of-webhooks.md).
To handle [events](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-events.md) with [webhooks](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-webhooks.md), you need to subscribe to the webhook and create a webhook handler. When you subscribe to a webhook in your app dashboard, you specify the endpoint where Wix should send webhook data. Then, when the event occurs, Wix sends a POST request to your handler containing event data and proceeds based on your response.
> **Notes:**
>
> - When building apps using Blocks, [handle events using Velo](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md) instead of webhooks.
> - When building apps using the CLI, [handle events using event extensions](https://dev.wix.com/docs/wix-cli/guides/extensions/backend-extensions/events/add-event-extensions.md).
This article outlines the process of subscribing to and processing the order canceled webhook from Wix eCommerce.
## Step 1 | Subscribe to a webhook
To subscribe to a webhook:
1. Go to the [**Webhooks** page in your app's dashboard](https://dev.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fwebhooks-page).
1. Click **+ Create Webhook**.
1. Select an **API Category**. For example, **eCommerce**.
1. Choose a webhook event from the available options. For example, **Order Canceled**.
__Tip:__
A simple code sample is provided that you can use to set up a server that handles the event. See [Step 3](#step-3--handle-the-event) for more information on handling the event.
Your public key is provided in the code sample. Even if you don't use the code sample, save the public key in a secure location for use later in this flow.
1. Enter your server **Callback URL**. This is where Wix sends the event data.
1. Add the relevant **Permissions**.
1. Click **Subscribe**.
Your app is set up to receive the webhook.
## Step 2 | Retrieve your public key
Webhook payloads are sent in [JSON web token (JWT)](https://jwt.io/) format. Your public key allows you to verify the signature in any webhook you receive.
Your public key was provided in the code sample in step 1, but if you need to retrieve it again, it's available on your app's [home page](https://manage.wix.com/app-selector) under View ID and Keys:
Save the public key in a secure location.
You need to use this public key in your handler to verify that the request is from Wix.
## Step 3 | Handle the event
The following steps demonstrate how to handle a webhook event.
> **Note:** The following instructions are for JavaScript without the SDK. When creating a webhook in the app dashboard you can also view a JavaScript example that does use the SDK, and Python and PHP examples.
1. Set up an Express server to handle incoming webhook requests:
Install the `express` package:
```bash
npm install express
```
Then add the following code:
```javascript
const express = require("express");
const app = express();
```
1. Install the `jsonwebtoken` package, which we use to verify the request.
```bash
npm install jsonwebtoken
```
Then add the following code:
```javascript
const jwt = require("jsonwebtoken");
```
1. Define a `POST` endpoint `/webhook` on your Express server to receive incoming webhook payloads.
```javascript
app.post("/webhook", express.text(), async (request, response) => {
//Verify the JWT and handle incoming webhook payloads.
response.status(200).send();
});
app.listen(3000, () => console.log("Server started on port 3000"));
```
__Important:__
You must return a 200 response upon successful receipt of the webhook.
1. Within the endpoint, verify the token and then handle incoming webhook payloads, specifically the payload from your event. For details about the payload, see [Webhook Structure](https://dev.wix.com/docs/api-reference/articles/work-with-wix-apis/platform/about-the-structure-of-webhooks.md).
```javascript
let event;
let eventData;
try {
const rawPayload = jwt.verify(request.body, PUBLIC_KEY);
event = JSON.parse(rawPayload.data);
eventData = JSON.parse(event.data);
} catch (err) {
console.error(err);
response.status(400).send(`Webhook error: ${err.message}`);
return;
}
switch (event.eventType) {
case "wix.ecom.v1.order_canceled":
console.log(`wix.ecom.v1.order_canceled event received with data:`, eventData);
console.log(`App instance ID:`, event.instanceId);
//
// handle your event here
//
break;
default:
console.log(`Received unknown event type: ${event.eventType}`);
break;
}
```
> **Note:** The app instance ID is sent along with the event data. Learn more [about app instances](https://dev.wix.com/docs/build-apps/develop-your-app/access/app-instances/about-app-instances.md).
Here's the complete code example:
```javascript
const jwt = require("jsonwebtoken");
const express = require("express");
const app = express();
const PUBLIC_KEY = ``;
app.post('/webhook', express.text(), (request, response) => {
let event;
let eventData;
try {
const rawPayload = jwt.verify(request.body, PUBLIC_KEY);
event = JSON.parse(rawPayload.data);
eventData = JSON.parse(event.data);
} catch (err) {
console.error(err);
response.status(400).send(`Webhook error: ${err.message}`);
return;
}
switch (event.eventType) {
case "wix.ecom.v1.order_canceled":
console.log(`wix.ecom.v1.order_canceled event received with data:`, eventData);
console.log(`App instance ID:`, event.instanceId);
//
// handle your event here
//
break;
default:
console.log(`Received unknown event type: ${event.eventType}`);
break;
}
response.status(200).send();
});
app.listen(3000, () => console.log("Server started on port 3000"));
```
> **Note:** Though not shown in this example, we recommend storing processed event IDs and checking against them before processing new webhooks to ensure you don't process the same event multiple times.
## See also
* [Test a Webhook Locally](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/webhooks/test-a-webhook-locally-for-self-hosting.md)
* [Webhook Structure](https://dev.wix.com/docs/api-reference/articles/work-with-wix-apis/platform/about-the-structure-of-webhooks.md)