Controlling a Stripe payent popup with Cypress.io

some_test.js

// for this to work you need to set `"chromeWebSecurity": false` in cypress.json

describe('Make Stripe Payment', function() {
  before(function() {
    cy.visit('http://localhost:3000/en/stripe/checkout/')
    Cypress.Cookies.preserveOnce('sessionid')
  })

  it('should enter credit card details and finalise payment', function() {
    cy.get('[data-test="button-FormStripeCart-PayWithCreditCard"]').click()
    // there are better ways to get the iFrame in a promise, I think, and there is
    // a new API coming up soon to deal with iFrames, but I was lazy and just put a
    // wait here - 6secs is usually enough to let the Stripe popup load fully
    cy.wait(6000)
    cy.get('iframe').then($iframe => {
      const doc = $iframe.contents()
      let input = doc.find('input')[0]
      // super weird stuff here, if you just input '4242424242424242', the value
      // that you end up seing in the input element is jumbled up a little,
      // probably because of the way how Stripe inserts spaces while you are
      // typing. By luck I found out that this issue can get worked around if
      // you just chain-call type()
      cy
        .wrap(input)
        .type('4242')
        .type('4242')
        .type('4242')
        .type('4242')
      input = doc.find('input')[1]
      cy
        .wrap(input)
        .clear()
        .type('12')
        .type('20')
      input = doc.find('input')[2]
      cy
        .wrap(input)
        .type('123')
        .type('{enter}')
    })
    cy.url({ timeout: 20000 }).should('contain', '/en/profile/my-orders/')
    Cypress.Cookies.preserveOnce('sessionid')
  })
})

There is another complication, we have our own receipt and invoice generated after the transaction is made, so if we stub the response, we cannot check our invoice and We do not visit, when you click on the button it goes to a redirect (it's not the old stripe popup) but the new stripe checkout is not API, but it's a redirect github.com/stripe-samples/checkout-one-time-payments

I've created a more stable way to test Stripe Elements and released it as an npm package.

The API is fairly simple to use and abstracts away waiting for any <iframe>s. It also does not add time to your tests with cy.wait.

    cy.get('#card-element').within(() => {
      cy.fillElementsInput('cardNumber', '4242424242424242');
      cy.fillElementsInput('cardExpiry', '1025'); // MMYY
      cy.fillElementsInput('cardCvc', '123');
      cy.fillElementsInput('postalCode', '90210');
    });

Nice @dbalatero, thanks for sharing!

Thanks @dbalatero, exactly what i needed

If anyone is interested in testing stripe 3dsecure flows server side, I wrote this gist a few months back. I thought it was worth sharing here since everyone here is in the market for help testing stripe!

I found another method for handling Stripe's SCA/3DS popup. Inspired both by the comments here and recently implementing puppeteer to handle an azure login (big props to this blog post ) I realised if you have the URL source of the frame, you can just browse to it.

I've created a gist here.

My Stripe form after clicking the 'Submit' button results in Cypress showing 'Whoops, There are no Tests to Run'.

Does anyone has any idea why?

Thanks @dbalatero, very helpful. It worked on my end.

cy.get("#braint-hosted-number")
.its("0.contentDocument.body")
.then(cy.wrap)
.invoke("val", "4005519200000004")
.click()
.type("4005519200000004");

For the 3D secure I cleaned it up a bit and made it into a utility, so I can both confirm and deny it. Hope it helps someone Note the __privateStripeFrame does not have the number, it could fail on you randomly otherwise :)

function confirm3DSecureDialog (confirm = true) {
    cy.wait(5000)
    cy.get('iframe[name^=__privateStripeFrame]')
      .then(($firstIFrame) => {
        cy.wrap($firstIFrame.contents().find('iframe#challengeFrame'))
          .then(($secondIFrame) => {
            // authorise
            const target = confirm ? '#test-source-authorize-3ds' : '#test-source-fail-3ds'
            cy.wrap($secondIFrame.contents().find(target)).click()
          })
      })
  }

About testing 3DS, has anybody had an issue that after confirming 3ds modal your next code not running?