How to use express.json and express.raw together?

Question

I am building a web application with a login form and stripe subscription functionality.

In order to receive JSON data I am using express.json as

app.use(express.json());

When I was using the above middleware to receive stripe webhook secret the server could not receive it.

So I had to add the express.raw

My middleware looked like this:

app.use(express.raw({ type: "application/json" }));
app.use(express.json());

But now I am unable to receive form JSON data.

Here is my stripe logic:

export const postStripeWebhook = async (req: ExtendedRequest, res: Response) => {
    let data;
    let eventType;
    let event = req.body;
    const webhookSecret = "web hook secret provided by stripe";
    if (webhookSecret) {
        let signature = req.headers["stripe-signature"];

        try {
            event = stripe.webhooks.constructEvent(req.body, signature , webhookSecret);
        } catch (err) {
            console.log(`⚠️  Webhook signature verification failed.`);  //This part is throwing the error
            return res.sendStatus(400);
        }
        
        data = event.data;
        eventType = event.type;
    } else {
       
       
        data = req.body.data;
        eventType = req.body.type;
    }
    let subscription;

    switch (eventType) {
         
       // Here webhook events are managed

    }

    res.sendStatus(200);
};

Here is the index.js code:

app.use(express.raw({ type: "application/json" }));
app.use(express.json());
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.post("/webhooks", postStripeWebhook);

Updated code-------------------------

index.js:

app.use(express.json());
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.post("/webhooks", postStripeWebhook);

Middleware code:

export const postStripeWebhook = async (req: ExtendedRequest, res: Response) => {
    let data;
    let eventType;
    let event = req.body;
    const webhookSecret = "web hook secret provided by stripe";
    if (webhookSecret) {
        let signature = req.headers["stripe-signature"];

        try {
            event = stripe.webhooks.constructEvent(JSON.stringify(req.body), signature , webhookSecret);     //updated this line
        } catch (err) {
            console.log(`⚠️  Webhook signature verification failed.`);  //This part is throwing the error
            return res.sendStatus(400);
        }
        
        data = event.data;
        eventType = event.type;
    } else {
       
       
        data = req.body.data;
        eventType = req.body.type;
    }
    let subscription;

    switch (eventType) {
         
       // Here webhook events are managed

    }

    res.sendStatus(200);
};

I updated the code but still, but the problem persists.

Please guide me on how to modify my middleware to receive both types of data.

Answer 1

All the other routes in my application required express.json and only /webhooks route required express.raw so I bypassed /wbhooks route from using express.json

Here is how I did it:

index.js

app.use((req, res, next) => {
    if (req.originalUrl === "/webhooks") {
        next();
    } else {
        express.json()(req, res, next);
    }
});

app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.post("/webhooks", express.raw({ type: "application/json" }), postStripeWebhook);