Controlling a Stripe payent popup with Cypress.io

populate_stripe_input.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')
  })
})