
> All the code from this tutorial here: [https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/stripe](https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/stripe)

### Introduction

Stripe Checkout is a prebuilt, hosted payment page optimized for conversion. It connects automatically to your Stripe Account being able to create complete eCommerce products without having to code or maintain a checkout.

Like every other part of your app you can also test Stripe Checkout with Cypress!

For this tutorial we will use the staging demo environments created directly by using Stripe APIs that we found out by playing with the official demo page:

- [checkout stripe devi api demo-session](https://checkout.stripe.dev/api/demo-session?country=us&billingPeriod=monthly&hasBgColor=false&hasBillingAndShipping=false&hasCoupons=false&hasFreeTrial=false&hasShippingRate=false&hasTaxes=false&mode=payment&wallet=googlePay&hasPolicies=false&billingType=flat)

### Inserting Credit Card Info and Billing

```javascript
describe("Stripe Checkout", () => {
  it("Stripe Checkout test mode works!", () => {
    cy.request(
      "https://checkout.stripe.dev/api/demo-session?country=us&billingPeriod=monthly&hasBgColor=false&hasBillingAndShipping=false&hasCoupons=false&hasFreeTrial=false&hasShippingRate=false&hasTaxes=false&mode=payment&wallet=googlePay&hasPolicies=false&billingType=flat"
    ).then((response) => {
      expect(response.status).to.eq(200)
      expect(response.body).to.have.property("url")
      cy.visit(response.body.url)
      cy.url().should("contains", "https://checkout.stripe.com/pay/")

      cy.get("#email").type("SatoshiNakamoto@email.com")
      cy.get("#cardNumber").type("4242424242424242")
      cy.get("#cardCvc").type("123")
      cy.get("#cardExpiry").type(
        "12" + (new Date().getFullYear() + 10).toString().substr(-2)
      )
      cy.get("#billingName").type("Satoshi Nakamoto")
      cy.get("#billingPostalCode").type("94043")

      cy.wait(1000)
      cy.get(".SubmitButton").should(($div) => {
        expect($div.text()).to.include("Pay")
      })
      cy.get(".SubmitButton").click()
      cy.get(".SubmitButton").should(($div) => {
        expect($div.text()).to.include("Processing")
      })
    })
  })
})
```

In the first 3 lines from 3 to 5 we fetch a new demo URL from the stripe API that we will use just for this demo, in a real environment you will just use
cy.visit to load your checkout page after the previous user steps.

```javascript
cy.request(
  "https://checkout.stripe.dev/api/demo-session?country=us&billingPeriod=monthly&hasBgColor=false&hasBillingAndShipping=false&hasCoupons=false&hasFreeTrial=false&hasShippingRate=false&hasTaxes=false&mode=payment&wallet=googlePay&hasPolicies=false&billingType=flat"
).then((response) => {
  expect(response.status).to.eq(200)
  expect(response.body).to.have.property("url")
  cy.visit(response.body.url)
  cy.url().should("contains", "https://checkout.stripe.com/pay/")
})
```

The beauty of testing Stripe Checkout is that you don’t need to learn to use iFrames or other plugins like you would have to do with Stripe Elements.
([Stripe Elements use iFrame inserted in your page making the testing a bit harder](https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/stripe#stripe-elements))

```javascript
cy.get("#email").type("SatoshiNakamoto@email.com")
cy.get("#cardNumber").type("4242424242424242")
cy.get("#cardCvc").type("123")
cy.get("#cardExpiry").type(
  "12" + (new Date().getFullYear() + 10).toString().substr(-2)
)
cy.get("#billingName").type("Satoshi Nakamoto")
cy.get("#billingPostalCode").type("94043")
```

In this case we will simply be able to run the lines from 11 to 18 inserting the different fields like “email” or “cardNumber”, etc.

As the final step we wait 1 seconds or 1000 milliseconds before continuing the steps, we do this to let Stripe Api process the input cause Cypress tends to execute the previous steps too fast compared to a human and in many occasions Stripe could be still loading or validating the fields.
And then we conclude the Checkout process by clicking the “SubmitButton”!

```javascript
cy.wait(1000)
cy.get(".SubmitButton").should(($div) => {
  expect($div.text()).to.include("Pay")
})
cy.get(".SubmitButton").click()
cy.get(".SubmitButton").should(($div) => {
  expect($div.text()).to.include("Processing")
})
```

### Conclusion

There is no right or wrong way to build an E2E test. The only thing you should care about is building a proper test that will automate your manual actions.

> #### Less time to do a manual test and more time to have fun building other things!

Let us know in the comments which kind of test you would like to see next!

### Resources

- Stripe Checkout example: [https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/stripe/cypress/integration/stripe-checkout.ts](https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/stripe/cypress/integration/stripe-checkout.ts)

- cypress example directory: [cypress-for-everything#examples](https://github.com/riccardogiorato/cypress-for-everything#examples)

- Stripe Elements example: [https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/stripe/cypress/integration/stripe-elements.ts](https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/stripe/cypress/integration/stripe-elements.ts)

- Stripe examples: [https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/stripe](https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/stripe)

##


In this article we will look into how we can test a website that uses Stripe Checkout bringing more testing to your eCommerce!

How to test your Stripe Checkout with Cypress


> All the code from this tutorial here: [https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/http-response-status](https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/http-response-status)

### Why making an E2E test for a Http Responses?

The under users of your app will always visit your website from specific urls or maybe in many occasions they will make a spell error in the URL maybe forgetting the “s” in “https://” or not adding the “www” to the URLs.

With Cypress you can test all sort of these things usually done with 300 or 301 redirects from the Servers or also testing responses to 404 pages or 500 forbidden pages from unauthenticated users.

For this tutorial, we choose to use Cypress.io cause it’s one of the most used E2E tools on the web.

### Redirects 301 code

Redirects usually are done with the code 301 “Moved Permanently”, they are used when you a specific page or url has been reorganized or moved to a different one.

```javascript
const baseUrlTesla = "https://www.tesla.com/"
const urlHttp = "http://tesla.com"
it(urlHttp + " end location", () => {
  cy.visit(urlHttp)
  cy.url().should("eq", baseUrlTesla)
})
it(urlHttp + " redirect", () => {
  cy.request({
    url: urlHttp,
    followRedirect: false, // turn off following redirects
  }).then((resp) => {
    // redirect status code is 301
    expect(resp.status).to.eq(301)
    expect(resp.redirectedToUrl).to.eq(baseUrlTesla)
  })
})
```

### Found Page 200 code

The “200” response code is used for all found pages, when the server exactly finds the resource at the URL you specified in your request.

```javascript
const baseUrlTesla = "https://www.tesla.com/"
const urlHttpsWww = "https://www.tesla.com/"
it(urlHttpsWww + " end location", () => {
  cy.visit(urlHttpsWww)
  cy.url().should("eq", baseUrlTesla)
})
it("200 homepage response", () => {
  cy.request({
    url: urlHttpsWww,
    followRedirect: false,
  }).then((resp) => {
    expect(resp.status).to.eq(200)
    expect(resp.redirectedToUrl).to.eq(undefined)
  })
})
```

### Not Found Page 404 code

When you don’t find a page you will get the most beautiful and common code 404 also know “not found”!

```javascript
const baseUrlTesla = "https://www.tesla.com/"
const url404test = "https://www.tesla.com/not-a-real-page"
it("404 'not found' response", () => {
  cy.request({
    url: url404test,
    followRedirect: false,
    failOnStatusCode: false,
  }).then((resp) => {
    expect(resp.status).to.eq(404)
    expect(resp.redirectedToUrl).to.eq(undefined)
  })
  cy.visit(url404test, { failOnStatusCode: false })
  cy.get(".error-code").should("contain", "404")
  cy.get(".error-text").should("contain", "Page not found")
})
```

### Conclusion

There is no right or wrong way to build an E2E test. The only thing you should care about is building a proper test that will automate your manual actions.

With this tutorial, we won’t ever need to check again the usual pages we have for 404, we will always be able to check all the redirects we implemented and more!

> #### Less time to do a manual test and more time to have fun building other things!

Let us know in the comments which kind of test you would like to see next!

### Resources

- Testing Tesla Http Responses: [https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/http-response-status/cypress/integration/tesla-http.ts](https://github.com/riccardogiorato/cypress-for-everything/blob/main/examples/http-response-status/cypress/integration/tesla-http.ts)

- Cypress Example directory: [cypress-for-everything#examples](https://github.com/riccardogiorato/cypress-for-everything#examples)

- Http Response examples: [https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/http-response-status](https://github.com/riccardogiorato/cypress-for-everything/tree/main/examples/http-response-status)


All sites have different Http Codes like 200, 404, 500, 300 and we can test them easily to always send back the right response!

How to Test HTTP Responses and Redirects with Cypress


### What do I want to help or improve?

I would love to improve in a few areas:

1. Deep Work sessions on highly impactful projects or activites
2. Fitness related to posture, strenght, and movement

### Deep Work sessions

How can I improve my deep work sessions?

1. timeblocking before work, before work I always go walking but I lose extra time waiting in front of my computer doing other things.

2. timeblocking during work, I don't usually follow pomodoros sessions but I can do it also because I should do more activites during the 9to5 hours like 10 pushups every 25 minutes!

3. timeblocking after work, most of the time I will have to "cook"/"buy grocieries"/"work on personal project or learning"/"just chill?"

4. tasks planning with Jira at work and Trello for personal stuff, removing distractions and planning which specific tasks will I work on without more context switching


I'm Riccardo, a founder, maker and AI automation engineer.

Together AI

Teero

GitHub

Writing

How to test your Stripe Checkout with Cypress ->

How to Test HTTP Responses and Redirects with Cypress ->

What could help me do more deep work or fitness? ->