feat: added support to change create payment and added env to cypress

Hyperswitch-React-Demo-App/src/Payment.js

@@ -8,6 +8,11 @@ function Payment() {
   const [hyperPromise, setHyperPromise] = useState(null);
   const [clientSecret, setClientSecret] = useState("");
 
+  const queryParams = new URLSearchParams(window.location.search);
+  const isCypressTestMode = queryParams.get("isCypressTestMode");
+  const publishableKeyQueryParam = queryParams.get("publishableKey");
+  const clientSecretQueryParam = queryParams.get("clientSecret");
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -45,9 +50,12 @@ function Payment() {
           setHyperPromise(
             new Promise((resolve) => {
               resolve(
-                window.Hyper(publishableKey, {
-                  customBackendUrl: serverUrl,
-                })
+                window.Hyper(
+                  isCypressTestMode ? publishableKeyQueryParam : publishableKey,
+                  {
+                    customBackendUrl: serverUrl,
+                  }
+                )
               );
             })
           );
@@ -81,7 +89,9 @@ function Payment() {
         <HyperElements
           hyper={hyperPromise}
           options={{
-            clientSecret,
+            clientSecret: isCypressTestMode
+              ? clientSecretQueryParam
+              : clientSecret,
             appearance: {
               labels: "floating",
             },

cypress-tests/cypress.env.json

@@ -0,0 +1,4 @@
+{
+    "HYPERSWITCH_PUBLISHABLE_KEY": "",
+    "HYPERSWITCH_SECRET_KEY": ""
+}

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

@@ -1,20 +1,28 @@
 import * as testIds from "../../../src/Utilities/TestUtils.bs";
-import { CLIENT_URL } from "../support/utils";
+import { getClientURL } from "../support/utils";
+
 
 describe("Card payment flow test", () => {
+
+  const publishableKey=Cypress.env('HYPERSWITCH_PUBLISHABLE_KEY')
+  const secretKey=Cypress.env('HYPERSWITCH_SECRET_KEY')
   let getIframeBody : () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
   let iframeSelector =
       "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
   beforeEach(() => {
     getIframeBody = () => cy.iframe(iframeSelector);
 
-    cy.visit(CLIENT_URL);
-  });
 
-  it("page loaded successfully", () => {
-    cy.visit(CLIENT_URL);
+    cy.createPaymentIntent(secretKey).then(()=>{
+     cy.getGlobalState("clientSecret").then((clientSecret)=>{
+
+      cy.visit(getClientURL(clientSecret,publishableKey));
+      });
+
+    })
   });
 
+
   it("title rendered correctly", () => {
     cy.contains("Hyperswitch Unified Checkout").should("be.visible");
   });
@@ -30,8 +38,6 @@ describe("Card payment flow test", () => {
 
   it('should check if cards are saved', () => {
     // Visit the page where the test will be performed
-    cy.visit(CLIENT_URL);
-
     getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`)
     .then($element => {
       if ($element.length > 0) {

cypress-tests/cypress/support/commands.ts

@@ -24,6 +24,7 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 import "cypress-iframe";
+import {createPaymentBody} from "./utils"
 import * as testIds from "../../../src/Utilities/TestUtils.bs";
 // commands.js or your custom support file
 const  iframeSelector =
@@ -145,37 +146,18 @@ Cypress.Commands.add(
   }
 );
 
-const request = {
-  currency: "USD",
-  amount: 6500,
-  authentication_type: "three_ds",
-  description: "Joseph First Crypto",
-  email: "[email protected]",
-  connector_metadata: {
-    noon: {
-      order_category: "applepay",
-    },
-  },
-  metadata: {
-    udf1: "value1",
-    new_customer: "true",
-    login_date: "2019-09-10T10:11:12Z",
-  },
-  //   customer_id: "hyperswitch_sdk_demo_test_id",
-  business_country: "US",
-  business_label: "default",
-};
-Cypress.Commands.add("createPaymentIntent", () => {
+
+Cypress.Commands.add("createPaymentIntent", (secretKey:string) => {
   return cy
     .request({
       method: "POST",
       url: "https://sandbox.hyperswitch.io/payments",
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
-        "api-key": "snd_c691ade6995743bd88c166ba509ff5da",
+        "api-key": secretKey,
       },
-      body: JSON.stringify(request),
+      body: JSON.stringify(createPaymentBody),
     })
     .then((response) => {
       expect(response.headers["content-type"]).to.include("application/json");
@@ -188,6 +170,6 @@ Cypress.Commands.add("createPaymentIntent", () => {
     });
 });
 
-Cypress.Commands.add("getGlobalState", (key: number) => {
+Cypress.Commands.add("getGlobalState", (key: any) => {
   return globalState[key];
 });

cypress-tests/cypress/support/types.ts

@@ -24,8 +24,8 @@ declare global {
             testDynamicFields(
                 customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean
             ): Chainable<JQuery<HTMLElement>>
-            createPaymentIntent(): Chainable<Response<any>>
-            getGlobalState(key: number): Chainable<Response<any>>
+            createPaymentIntent(secretKey:string): Chainable<Response<any>>
+            getGlobalState(key: string): Chainable<Response<any>>
         }
     }
 }

cypress-tests/cypress/support/utils.ts

@@ -1,25 +1,71 @@
-export const CLIENT_URL = "http://localhost:9060"
+export const CLIENT_BASE_URL = "http://localhost:9060"
 
-export const request = {
+
+
+export const getClientURL=(clientSecret,publishableKey)=>{
+  return `${CLIENT_BASE_URL}?isCypressTestMode=true&clientSecret=${clientSecret}&publishableKey=${publishableKey}`;
+}
+
+
+export const createPaymentBody ={
   currency: "USD",
-  amount: 6500,
+  amount: 2999,
+  order_details: [
+    {
+      product_name: "Apple iPhone 15",
+      quantity: 1,
+      amount: 2999,
+    },
+  ],
+  confirm: false,
+  capture_method: "automatic",
   authentication_type: "three_ds",
-  description: "Joseph First Crypto",
+  customer_id: "hyperswitch_sdk_demo_id",
   email: "[email protected]",
-  connector_metadata: {
-    noon: {
-      order_category: "applepay",
+  request_external_three_ds_authentication: false,
+  description: "Hello this is description",
+  shipping: {
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
+    },
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
     },
   },
   metadata: {
     udf1: "value1",
     new_customer: "true",
     login_date: "2019-09-10T10:11:12Z",
   },
-  //   customer_id: "hyperswitch_sdk_demo_test_id",
-  business_country: "US",
-  business_label: "default",
-};
+  profile_id: "pro_xsQ7wTCP89OLqmWNcnRq",
+  billing: {
+    email: "[email protected]",
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
+    },
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
+    },
+  },
+}
 
 export const confirmBody = {
   client_secret: "",