SubtleCryptoProvider cannot be used in a synchronous context

[eyaleizenberg]

Describe the bug

After upgrading some modules in my project, the following error started popping up during tests:
SubtleCryptoProvider cannot be used in a synchronous context.

To Reproduce

1. I am using cypress to test a next.js project.
2. the following code:

const stripeHeader = client.webhooks.generateTestHeaderString({
  payload: payloadString,
  secret,
});

Throws the following:

SubtleCryptoProvider cannot be used in a synchronous context.


    at SubtleCryptoProvider.computeHMACSignature (webpack://web/../../node_modules/stripe/cjs/crypto/SubtleCryptoProvider.js:20:0)
    at Object.generateTestHeaderString (webpack://web/../../node_modules/stripe/cjs/Webhooks.js:47:0)
    at ./drivers/installers/stripe-webhook.driver.ts (webpack://web/./drivers/installers/stripe-webhook.driver.ts:33:0)
    at __webpack_require__ (webpack://web/webpack/bootstrap:19:0)
    at eval (webpack://web/./cypress/e2e/installers/stripe-webhook.cy.ts:6:30)
    at eval (:3000/__cypress/tests?p=cypress/e2e/installers/stripe-webhook.cy.ts:427598:3)
    at eval (:3000/__cypress/tests?p=cypress/e2e/installers/stripe-webhook.cy.ts:427600:12)
    at eval (<anonymous>)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (:3000/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (:3000/__cypress/runner/cypress_runner.js:1239:17)
    at Promise.then (:3000/__cypress/runner/cypress_runner.js:1132:17)
    at runScriptsFromUrls (:3000/__cypress/runner/cypress_runner.js:110750:136)
    at Object.runScripts (:3000/__cypress/runner/cypress_runner.js:110791:12)
    at $Cypress.onSpecWindow (:3000/__cypress/runner/cypress_runner.js:40862:67)

3. Using the following related packages:

    "@stripe/react-stripe-js": "^2.3.0",
    "@stripe/stripe-js": "^1.54.2",
    "cypress": "^12.17.2",
    "next": "^13.4.9",

Expected behavior

Not to throw an error.

Code snippets

No response

OS

Mac OS Ventura

Node version

18.17.0

Library version

Stripe ^11.18.0

API version

2022-11-15

Additional context

This started happening without changing any other code.

[eyaleizenberg]

I found the solution. The problem was that my code was running when the module was imported. Because this is run under cypress, it threw that specific error. The solution is to wrap it all in an async function:

export const generateStripeHeader = async () => {...}

and then use a then statement in the cypress test:

  it("should update the company", () => {
    generateStripeHeader().then(() => {      
       ... the rest of your test

[zzzej]

I had a similar problem when handling a stripe webhook from a cloudflare worker. In case someone has the problem here is an example:

https://github.com/stripe-samples/stripe-node-cloudflare-worker-template/blob/main/src/index.js