Verify Stripe webhooks in Remix on Cloudflare Pages

PUBLIC_STRIPE_KEY=<your-stripe-public-key>
PRIVATE_STRIPE_SECRET=<your-stripe-secret>

import Stripe from "stripe";

export function initServerStripe({ stripeSecret }: { stripeSecret: string }) {
  return new Stripe(stripeSecret, {
    apiVersion: "2022-08-01",
    httpClient: Stripe.createFetchHttpClient(), // <-- important for Worker support
  });
}

import type { ActionArgs } from "@remix-run/cloudflare";

export async function action({ request, context }: ActionArgs) {
  const stripeSecret = context.PRIVATE_STRIPE_SECRET as string;
  const stripe = initServerStripe({ stripeSecret });
  // more code to come
}

export const webCrypto = Stripe.createSubtleCryptoProvider();

export async function action({ request, context }: ActionArgs) {
  const stripeSecret = context.PRIVATE_STRIPE_SECRET as string;
  const webhookSecret = context.PRIVATE_STRIPE_WEBHOOK_SECRET as string;
  // Retrieve the event by verifying the signature using the raw body and secret.
  let event;
  let signature = request.headers.get("stripe-signature") as string;
  const payload = await request.text();
  const stripe = initServerStripe({ stripeSecret });

  try {
    event = await stripe.webhooks.constructEventAsync(
      payload,
      signature,
      webhookSecret,
      undefined,
      webCrypto, // <-- this is where you override the crypto implementation
    );
  } catch (err) {
    return json(null, 400);
  }
  // Extract the object from the event.
  const data = event.data;
  const eventType = event.type;
  // handle the Stripe event data based on type. The rest should be more or less like the official Stripe docs
  // don't forget to return a success response to Stripe so they don't disconnect the webhook.
}

/**
 * A manual implementation of Stripe's signature verification. Works with Workers.
 * @param payload the request payload (derived from request.text())
 * @param signature the provided webhook signature from the request headers
 * @param webhookSecret the webhook secret provided by Stripe.
 * @returns reconstructed payload
 */
async function constructEventAsync(
  payload: string,
  signature: string,
  webhookSecret: string
) {
  const elements = signature.split(","); // split the signature on the comma (,) to get each element. You then go on to split it on = to get the key value pairs. I used a forEach because I find them more readable than Array.reduce, but if that's more your thing, go for it.
  const parts: Record<string, string> = {}; // you can type this out more strictly if you like. It does the trick though.
  elements.forEach((element: string) => {
    // get the key value pairs and build out the parts object
    const elementParts = element.split("="); 
    parts[elementParts[0]] = elementParts[1];
  });
  // prepare the payload for signing. The payload should be a string of the request payload. It should be prefixed by the provided timestamp and separated by a dot (.).
  const signedPayload = `${parts.t}.${payload}`;
  // now verify the payload.
  const verified = await verifyData(signedPayload, webhookSecret, parts.v1);
  // Calculate how much time has passed. Feel free to change this up to match your needs.
  const elapsed = Math.floor(Date.now() / 1000) - Number(parts.t);
  const tolerance = 300; // tolerance value for how much time you tolerate to have passed since the webhook was signed and sent.
  // if the webhook is verified and within time tolerance parse and return the JSON payload.
  if (verified && !(tolerance && elapsed > tolerance)) {
    const jsonPayload = JSON.parse(payload);
    return jsonPayload;
  }
  // otherwise throw an error
  throw new Error("Couldn't verify signature");
}

/**
 * @param secret webhook secret. used to import the key to sign and verify the webhook signature
 */
async function importKey(secret: string) {
  // You'll use WebCrypto which is supported by Workers, it doesn't even require an import statement.
  return await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(secret),
    { name: "HMAC", hash: "SHA-256" }, 
    false,
    ["sign", "verify"]
  );
}

/**
 * Verifies the provided signature by signing the payload with the timestamp provided 
 * and comparing the signature to the provided signature.
 * @param signedPayload the payload from Stripe prefixed with the timestamp and `.`
 * @param secret Webhook secret.
 * @param providedSig Webhook signature provided by the caller
 * @returns boolean
 */
async function verifyData(
  signedPayload: string,
  secret: string,
  providedSig: string
) {
  const key = await importKey(secret);
  // the verify function returns a Promise<boolean>
  const verified = await crypto.subtle.verify(
    "HMAC",
    key,
    hexToUint8Array(providedSig), // transform the provided signature to a Uint8 Array
    new TextEncoder().encode(signedPayload) // encode the signed payload
  );
  return verified;
}

/**
 * Transforms a hex into a Uint8Array
 * @param hex a hex string to turn into Uint8Array
 * @returns
 */
function hexToUint8Array(hex: string) {
  const bytes = new Uint8Array(Math.ceil(hex.length / 2));
  for (let i = 0; i < bytes.length; i++)
    bytes[i] = parseInt(hex.substring(i * 2, i * 2 + 2), 16);
  return bytes;
}

import type { ActionArgs } from "@remix-run/cloudflare";
import { json } from "@remix-run/cloudflare";

export async function action({ request, context }: ActionArgs) {
  const webhookSecret = context.PRIVATE_STRIPE_WEBHOOK_SECRET as string;
  // Retrieve the event by verifying the signature using the raw body and secret.
  let event;
  let signature = request.headers.get("stripe-signature") as string;
  const payload = await request.text();

  try {
    event = await constructEventAsync(payload, signature, webhookSecret);
  } catch (err: any) {
    return json({ error: JSON.stringify(err), message: err.message }, 400);
  }
  // Extract the object from the event.
  const data = event.data;
  const eventType = event.type;

  // handle stripe event
  return json(null, 200);
}