Cypress 12.8.1 not working with Stripe Elements iframe

I have been stuck on this for ages and can’t figure out how to get Cypress 12.8.1 to work with Stripe elements to enter credit card details and create a payment.

I have scoured the internet but none of the solutions seem to work.

Any help is greatly appreciated.

I have tried:

  1. Using xpath Handling Frames and iFrames in Cypress | BrowserStack this does not work for me. See error: Receiving cy.xpath is not a function · Issue #24764 · cypress-io/cypress · GitHub enter image description here
  2. Tried this plugin but it does not work anymore. javascript - How to get stripe element in cypress - Stack Overflow GitHub - dbalatero/cypress-plugin-stripe-elements: A small Cypress plugin that assists you in filling in Stripe Elements inputs
  3. Tried a few versions of adding the custom Cypress command “iframeLoaded” but I can’t figure out how to add these in the new Cypress 12 typescript format and just get errors. Testing Stripe Elements with Cypress | by Michael Bahr | Medium Cypress Testing Stripe Elements - Bionic Julia

My code in support/commands.ts

// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
declare namespace Cypress {
  interface Chainable<Subject = any> {
    iframeLoaded($iframe: any): typeof iframeLoaded;

function iframeLoaded($iframe: any): Promise<any> {
  const contentWindow = $iframe.prop('contentWindow')
  return new Promise(resolve => {
    if (contentWindow && contentWindow.document.readyState === 'complete') {
    } else {
      $iframe.on('load', () => {

Cypress.Commands.add('iframeLoaded', {prevSubject: 'element'}, iframeLoaded);

enter image description here


Solution here: