How to easily test react stripe elements using cypress

Wed, 27 May 2020 00:00:00 +0000

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.

Stripe on Aditya Naik | Personal Website

How to easily test react stripe elements using cypress

How to use react-stripe-elements

How to test react-stripe-elements