How do I get the rawBody on Vercel Functions?

[hiroyukinuri]

I need to receive the rawBody on serverless functions as Stripe webhooks requires a signature verification.

Any advice on what I need to do?

[caenguidanos]

With micro buffer:

import { NowRequest, NowResponse } from '@vercel/node';

import { buffer } from 'micro'; // <--------

import { environment } from '../_config/env';
import { cors } from '../_config/cors';

import { stripeService } from '../_services/stripe.service';

const handler = async (req: NowRequest, res: NowResponse) => {
  if (req.method === 'POST') {
    // verify signature
    const sig = req.headers['stripe-signature'];

    const buf = await buffer(req); // <---- HERE
    const body: string = buf.toString(); // <---- HERE

    const hookSecret = environment.stripe.hookSecret;

    // take event
    stripeService
      .constructEvent(body, sig, hookSecret)
      .then((event: any) => event)
      // stuff
      .finally(() => res.status(200).send({ received: true }));
  } else {
    res.status(404).end()
  }
};

export default cors(handler);

[hiroyukinuri]

I just tried this solution, unfortunately for some reason, the socket is hanging up because of an invalid body. What version of Node & Vercel are you using?

[caenguidanos]

package.json

{
  "dependencies": {
    "micro": "^9.3.4",
    "stripe": "^8.96.0"
  },
  "devDependencies": {
    "@types/micro": "^7.3.3",
    "@vercel/node": "^1.8.2"
  },
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./api",
    "module": "commonjs",
    "target": "ES2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "strict": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noEmitOnError": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

vercel.json

{
  "functions": {
    "api/path/to-function1.js": {
      "memory": 1024,
      "maxDuration": 10
    },
    "api/path/to-function2.js": {
      "memory": 1024,
      "maxDuration": 10
    },
  "etc": "..."
  }
}

nodejs: 12

Vercel CLI 20.1.0

[hiroyukinuri]

Made it work somehow, I had to rename the extension of the file to ".ts" instead of ".tsx" and add

export const config = {
    api: {
      bodyParser: false,
    },
}

Here's the full code for other ones who might stumble upon that. I couldn't get it done without typescript.

// pages/api/endpoint-name.ts
import { NowRequest, NowResponse } from '@vercel/node';
import { buffer } from 'micro';

// Stripe requires the raw body to construct the event.
export const config = {
    api: {
      bodyParser: false,
    },
}

const webhookHandler = async (req: NowRequest, res: NowResponse) => {
    if (req.method === 'POST') {
        const buf = await buffer(req);
        const body = buf.toString();
        console.log(body);
        return res.status(200).end();
    }
}

export default webhookHandler;

NextJS: ^9.5.2
Node: 12.18.3
Vercel CLI: 20.1.0

[nikolaswise]

This runs in to the socket hangup problem when running as a Vercel Severless Function, sans Next.JS. Severless functions don't get the config export, and even when disabling the node helpers in vercel.json – no dice

Is Vercel really permanently trashing the raw body buffer with no way to access it at all?

[alexandre-vl]

nice

[nikolaswise]

I'm having the exact same problem in the exact same use case. However, Im not using Next.JS so I can't add that config option to my serverless function.

Is there any way to access the raw body in Vercel, or do I have to host my functions elsewhere?

[caenguidanos]

Only works if you don't sign the webhook...

import { NextApiRequest, NextApiResponse } from 'next';

// Stripe requires the raw body to construct the event.
export const config = { api: { bodyParser: false } };

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'POST') return res.status(404).end();

  try {
    const body = await req.body;
    const event = JSON.parse(JSON.stringify(body));

    if (!event) return res.status(400).end();

    // verify event type
    const isEventType = event.type === 'payment_intent.succeeded';
    if (!isEventType) return res.status(400).end();

    const obj: any = event.data.object;

    somethingCool();
  } catch (error) {
    console.log(error.message);
  } finally {
    res.json({ received: true });
  }
};

[colllin]

module.exports = async (req, res) => {
    let rawBody = await getRawBody(req);
    console.log(typeof rawBody, rawBody);
};

function getRawBody(req) {
    return new Promise((resolve, reject) => {
        let bodyChunks = [];
        req.on('end', () => {
            const rawBody = Buffer.concat(bodyChunks).toString('utf8');
            resolve(rawBody);
        });
        req.on('data', chunk => bodyChunks.push(chunk));
    });
}

[Djamilson]

const app = express();
app.use(express.raw({ type: '/' }));

[fourcolors]

I'm having the exact same problem. Is there no rawBody anywhere?

[leerob]

Update 2024: This is now much easier with the Web API signature support.

export async function POST(request: Request) {
  const rawBody = await request.text()
  return Response.json({ rawBody })
}

[dohomi]

Is this not only NextJS specific:

export const config = {
  api: {
    bodyParser: false,
  },
};

I don't seem to get the rawBody on vercel dev and with pure serverless function

For me only using micro as dependency works:

import {buffer} from 'micro'

(...)
const buf = await buffer(req)
const rawBody: string = buf.toString();