test: card cypress test added

Hyperswitch-React-Demo-App/.env

@@ -1,7 +1,7 @@
 STATIC_DIR=./dist
-HYPERSWITCH_PUBLISHABLE_KEY=
-HYPERSWITCH_SECRET_KEY=
-HYPERSWITCH_SERVER_URL=
-HYPERSWITCH_CLIENT_URL=
-SELF_SERVER_URL=
-PROFILE_ID=""
+HYPERSWITCH_PUBLISHABLE_KEY="pk_snd_3dbcd4a313b248f78f046dfe0090636e"
+HYPERSWITCH_SECRET_KEY="snd_6jXxdUbFxGW4EulF5hl0fWpJ3ABRuSDyI1vFfGaG26SdR43k6MYisvvWIqoSeKJh"
+HYPERSWITCH_SERVER_URL="https://sandbox.hyperswitch.io"
+HYPERSWITCH_CLIENT_URL="http://localhost:9050"
+SELF_SERVER_URL=""
+PROFILE_ID="pro_ka4Uc7Cj4b3hjUXxRSZY"

Hyperswitch-React-Demo-App/server.js

@@ -51,7 +51,7 @@ const paymentData = {
   ],
   confirm: false,
   capture_method: "automatic",
-  authentication_type: "three_ds",
+  authentication_type: "no_three_ds",
   customer_id: "hyperswitch_sdk_demo_id",
   email: "hyperswitch_sdk_demo_id@gmail.com",
   description: "Hello this is description",

cypress-tests/cypress.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
+  watchForFileChanges:true,
   projectId: "6r9ayw",
   chromeWebSecurity: false,
   e2e: {

cypress-tests/cypress/e2e/3ds-card-test.cy.ts

@@ -0,0 +1,49 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { CLIENT_URL } from "../support/utils";
+
+describe("Card payment flow test", () => {
+  // Define the type for getIframeBody function
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  const iframeSelector = "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+  beforeEach(() => {
+    // Initialize the getIframeBody function
+    getIframeBody = () => cy.iframe(iframeSelector);
+
+    // Visit the page with the payment form
+    cy.visit(CLIENT_URL);
+  });
+
+  it("page loaded successfully", () => {
+    cy.visit(CLIENT_URL);
+  });
+
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(iframeSelector)
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+
+  it("should complete the card payment successfully", () => {
+    // Visit the page with the payment form
+    cy.visit(CLIENT_URL);
+
+    // Wait for iframe to load and get its body
+    getIframeBody().find('[data-testid=cardNoInput]').type('4000000000003220'); // Example card number
+    getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month
+    getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year
+    getIframeBody().find('[data-testid=cvvInput]').type('123'); // CVV
+
+    // Click on the submit button
+    getIframeBody().get("#submit").click();
+
+    // Wait for the response and assert payment success message
+    cy.wait(3000); // Adjust wait time based on actual response time
+    cy.url().should('include', 'hooks.stripe.com/3d_secure_2');
+  });
+});

cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts

@@ -45,3 +45,4 @@ describe("Card payment flow test", () => {
     });
   });
 });
+

cypress-tests/cypress/e2e/no3ds-card-test.cy.ts

@@ -0,0 +1,85 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { CLIENT_URL } from "../support/utils";
+
+// Define a type for the getIframeBody function
+type GetIframeBody = () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+
+describe("Card payment flow test", () => {
+  let getIframeBody: GetIframeBody;
+  const iframeSelector = "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+  before(() => {
+    // Initialize the getIframeBody function
+    getIframeBody = () => cy.iframe(iframeSelector);
+    cy.visit(CLIENT_URL);
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(iframeSelector)
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+
+  it("should complete the card payment successfully", () => {
+    // Visit the page with the payment form
+    cy.visit(CLIENT_URL);
+
+    // Wait for iframe to load and get its body
+    getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Example card number
+    getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month
+    getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year
+    getIframeBody().find('[data-testid=cvvInput]').type('123'); // CVV
+
+    // Click on the submit button
+    getIframeBody().get("#submit").click();
+
+    // Wait for the response and assert payment success message
+    cy.wait(3000); // Adjust wait time based on actual response time
+    cy.contains("Thanks for your order!").should("be.visible");
+  });
+
+  it("should fail with an invalid card number", () => {
+    cy.visit(CLIENT_URL);
+
+    getIframeBody().find('[data-testid=cardNoInput]').type('1234567812345678'); // Invalid card number
+    getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month
+    getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year
+    getIframeBody().find('[data-testid=cvvInput]').type('123'); // CVV
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); // Adjust wait time based on actual response time
+    cy.contains("Please enter valid details").should("be.visible"); // Adjust based on actual error message
+  });
+
+  it("should show error for expired card year", () => {
+    cy.visit(CLIENT_URL);
+
+    getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Valid card number
+    getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month
+    getIframeBody().find('[data-testid=expiryInput]').type('20'); // Expiration year
+    getIframeBody().find('[data-testid=cvvInput]').type('123'); // CVV
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); // Adjust wait time based on actual response time
+    getIframeBody().find('.Error.pt-1').should('be.visible')
+      .and('contain.text', "Your card's expiration year is in the past.");
+  });
+
+  it("should show error for incomplete card CVV", () => {
+    cy.visit(CLIENT_URL);
+
+    getIframeBody().find('[data-testid=cardNoInput]').type('4242424242424242'); // Valid card number
+    getIframeBody().find('[data-testid=expiryInput]').type('12'); // Expiration month
+    getIframeBody().find('[data-testid=expiryInput]').type('25'); // Expiration year
+    getIframeBody().find('[data-testid=cvvInput]').type('12'); // Incomplete CVV
+
+    getIframeBody().get("#submit").click();
+
+    cy.wait(3000); // Adjust wait time based on actual response time
+    getIframeBody().find('.Error.pt-1').should('be.visible')
+      .and('contain.text', "Your card's security code is incomplete.");
+  });
+});

cypress-tests/cypress/support/commands.ts

@@ -72,7 +72,6 @@ Cypress.Commands.add(
     if (isThreeDSEnabled) {
       mapping[testIds.cardNoInputTestId] = customerData.threeDSCardNo;
     }
-    let publishableKey = "pk_snd_3b33cd9404234113804aa1accaabe22f";
     let clientSecret:string;
     cy.request({
       method: "GET",
@@ -148,7 +147,7 @@ Cypress.Commands.add(
 const request = {
   currency: "USD",
   amount: 6500,
-  authentication_type: "three_ds",
+  authentication_type: "no_three_ds",
   description: "Joseph First Crypto",
   email: "hyperswitch_sdk_demo_id@gmail.com",
   connector_metadata: {
@@ -173,7 +172,6 @@ Cypress.Commands.add("createPaymentIntent", () => {
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
-        "api-key": "snd_c691ade6995743bd88c166ba509ff5da",
       },
       body: JSON.stringify(request),
     })

cypress-tests/cypress/support/utils.ts

@@ -3,7 +3,7 @@ export const CLIENT_URL = "http://localhost:9060"
 export const request = {
   currency: "USD",
   amount: 6500,
-  authentication_type: "three_ds",
+  authentication_type: "no_three_ds",
   description: "Joseph First Crypto",
   email: "hyperswitch_sdk_demo_id@gmail.com",
   connector_metadata: {