How to easily test react stripe elements using cypress

How to use react-stripe-elements#

I have already written about how to set up and use react-stripe-elements .

However, there is another easier way to test stripe implementation than mentioned in the article.

How to test react-stripe-elements#

Just use following function to your cypress test

function fillInStripeForm() {
  const input = [
    ['cardnumber', '4242424242424242'],
    ['exp-date', '1220'],
    ['cvc', '123'],
  ]
  cy.wait(1000)
  cy.get('.__PrivateStripeElement > iframe').each(($element, index, list) => {
    cy.get($element).then(($iframe) => {
      const body = $iframe.contents().find('body')
      cy.wrap(body)
        .find(`input[name=${input[index][0]}]`)
        .type(input[index][1], { delay: 10 })
    })
  })
}

and call it when tripe form needs to be filled.

Of course, const input can be extracted out and passed in as args if you want to test various cards available for stripe testing.