[DEMO CODE] Subscription purchase process

cypress.json

@@ -1,3 +1,5 @@
 {
-  "baseUrl": "http://localhost:3001"
+	"baseUrl": "http://localhost:3001",
+	"chromeWebSecurity": false
+
 }

cypress/integration/registeredUserCanPurchaseASubscription.feature.js

@@ -0,0 +1,71 @@
+describe('Registered and logged in user can purchase a subscription', () => {
+  beforeEach(() => {
+    cy.server();
+    cy.route({
+      method: "GET",
+      url: "http://localhost:3000/api/articles",
+      response: "fixture:articles_index.json"
+    });
+    cy.route({
+      method: "GET",
+      url: "http://localhost:3000/api/articles/2",
+      response: "fixture:specific_article_2.json"
+    });
+
+    cy.route({
+      method: 'POST',
+      url: "http://localhost:3000/api/subscriptions",
+      response: { status: 'paid' }
+    }).as('purchase')
+
+    cy.visit("/");
+    cy.window()
+      .then(window => {
+        window.store.dispatch(
+          {
+            type: "AUTHENTICATE",
+            payload: { currentUser: { email: '[email protected]', role: '' } }
+          }
+        )
+      })
+    cy.get("#2")
+      .last()
+      .within(() => {
+        cy.get("button")
+          .contains("Read More")
+          .click();
+      });
+  });
+
+  it('by clicking Buy Subscription', () => {
+    cy.get('button').contains('Buy Subscription').click()
+    cy.get('form[id="subscription-form"]')
+      .should('be.visible')
+    cy.get('form[id="subscription-form"]').within(() => {
+
+      cy.typeInStripeElement('cardnumber', '4242424242424242')
+      cy.typeInStripeElement('exp-date', '1220')
+      cy.typeInStripeElement('cvc', '123')
+
+      cy.get('button').contains('Submit payment').click()
+    })
+    cy.wait('@purchase')
+    cy.get('h2[id="message"]').should('contain', "Thank you for your business!")
+
+    cy.get("#2")
+      .last()
+      .within(() => {
+        cy.get("button")
+          .contains("Read More")
+          .click();
+      });
+    cy.get(".article")
+      .within(() => {
+        cy.get(".spec-title").should("contain", "Premium Article");
+      })
+    cy.get(".article")
+      .should("not.contain", "...")
+      .and("not.contain", 'This article require a premium membership.')
+
+  });
+});

cypress/integration/userCanOnlySeeValidContent.feature.js

@@ -1,148 +1,147 @@
 describe("Aricle view:", () => {
-  beforeEach(() => {
-    cy.server();
-    cy.route({
-      method: "GET",
-      url: "http://localhost:3000/api/articles",
-      response: "fixture:articles_index.json"
-    });
-    cy.route({
-      method: "GET",
-      url: "http://localhost:3000/api/articles/2",
-      response: "fixture:specific_article_2.json"
-    });
-    cy.route({
-      method: "GET",
-      url: "http://localhost:3000/api/articles/1",
-      response: "fixture:specific_article_1.json"
-    });
-    cy.visit("/");
-  });
+	beforeEach(() => {
+		cy.server();
+		cy.route({
+			method: "GET",
+			url: "http://localhost:3000/api/articles",
+			response: "fixture:articles_index.json"
+		});
+		cy.route({
+			method: "GET",
+			url: "http://localhost:3000/api/articles/2",
+			response: "fixture:specific_article_2.json"
+		});
+		cy.route({
+			method: "GET",
+			url: "http://localhost:3000/api/articles/1",
+			response: "fixture:specific_article_1.json"
+		});
+		cy.visit("/");
+	});
 
-  it("Not logged will be able to read free articles but not premium articles", () => {
-    cy.get("#1")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Free Article");
-      })
-    cy.get(".article")
-      .should("not.contain", "...")
-      .and("not.contain", 'This article require a premium membership.')
+	it("Not logged will be able to read free articles but not premium articles", () => {
+		cy.get("#1")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Free Article");
+			})
+		cy.get(".article")
+			.should("not.contain", "...")
+			.and("not.contain", 'This article require a premium membership.')
 
-    cy.get('button')
-      .contains("Back")
-      .click()
+		cy.get('button')
+			.contains("Back")
+			.click()
 
-    cy.get("#2")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Premium Article");
-        cy.get(".spec-content").should("contain", "...");
-        cy.get('p').should("contain", 'This article require a premium membership.')
-      })
-  });
+		cy.get("#2")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Premium Article");
+				cy.get(".spec-content").should("contain", "...");
+				cy.get('p').should("contain", 'This article require a premium membership.')
+			})
+	});
 
-  it('Authenticated user that is NOT a SUBSCRIBER can only read free articles but not premium articles', () => {
-    cy.window()
-      .then(window => {
-        window.store.dispatch(
-          {
-            type: "AUTHENTICATE",
-            payload: { currentUser: { email: '[email protected]', role: '' } }
-          }
-        )
-      })
+	it('Authenticated user that is NOT a SUBSCRIBER can only read free articles but not premium articles', () => {
+		cy.window()
+			.then(window => {
+				window.store.dispatch(
+					{
+						type: "AUTHENTICATE",
+						payload: { currentUser: { email: '[email protected]', role: '' } }
+					}
+				)
+			})
 
-    cy.get("#1")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Free Article");
-      })
-    cy.get(".article")
-      .should("not.contain", "...")
-      .and("not.contain", 'This article require a premium membership.')
+		cy.get("#1")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Free Article");
+			})
+		cy.get(".article")
+			.should("not.contain", "...")
+			.and("not.contain", 'This article require a premium membership.')
 
-    cy.get('button')
-      .contains("Back")
-      .click()
+		cy.get('button')
+			.contains("Back")
+			.click()
 
-    cy.get("#2")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Premium Article");
-        cy.get(".spec-content").should("contain", "...");
-        cy.get('p').should("contain", 'This article require a premium membership.')
-      })
-  });
+		cy.get("#2")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Premium Article");
+				cy.get(".spec-content").should("contain", "...");
+				cy.get('p').should("contain", 'This article require a premium membership.')
+			})
+	});
 
-  it('Authenticated user that is a SUBSCRIBER can se full length of all articles', () => {
-    cy.window()
-      .then(window => {
-        window.store.dispatch(
-          {
-            type: "AUTHENTICATE",
-            payload: { currentUser: { email: '[email protected]', role: 'subscriber' } }
-          })
-      })
+	it('Authenticated user that is a SUBSCRIBER can se full length of all articles', () => {
+		cy.window()
+			.then(window => {
+				window.store.dispatch(
+					{
+						type: "AUTHENTICATE",
+						payload: { currentUser: { email: '[email protected]', role: 'subscriber' } }
+					})
+			})
 
-    cy.get("#1")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Free Article");
-      })
-    cy.get(".article")
-      .should("not.contain", "...")
-      .and("not.contain", 'This article require a premium membership.')
+		cy.get("#1")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Free Article");
+			})
+		cy.get(".article")
+			.should("not.contain", "...")
+			.and("not.contain", 'This article require a premium membership.')
 
-    cy.get('button')
-      .contains("Back")
-      .click()
-
-    cy.get("#2")
-      .last()
-      .within(() => {
-        cy.get("button")
-          .contains("Read More")
-          .click();
-      });
-    cy.get(".article")
-      .within(() => {
-        cy.get(".spec-title").should("contain", "Premium Article");
-      })
-    cy.get(".article")
-      .should("not.contain", "...")
-      .and("not.contain", 'This article require a premium membership.')
-  });
+		cy.get('button')
+			.contains("Back")
+			.click()
+		cy.get("#2")
+			.last()
+			.within(() => {
+				cy.get("button")
+					.contains("Read More")
+					.click();
+			});
+		cy.get(".article")
+			.within(() => {
+				cy.get(".spec-title").should("contain", "Premium Article");
+			})
+		cy.get(".article")
+			.should("not.contain", "...")
+			.and("not.contain", 'This article require a premium membership.')
+	});
 
 
 });

cypress/support/commands.js

@@ -23,3 +23,13 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('typeInStripeElement', (element, value) => {
+  cy.get(`#${element} div iframe`)
+    .then($iframe => {
+      const $body = $iframe.contents().find("body");
+      cy.wrap($body)
+        .find(`input[name^="${element}"]`)
+        .type(value, { delay: 10 });
+    });
+})

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.0",
+    "react-stripe-elements": "^6.1.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.0.1"

public/index.html

@@ -23,7 +23,8 @@
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+		-->
+		<script src="https://js.stripe.com/v3/"></script>
     <title>React App</title>
   </head>
   <body>