fix: merge with session fix

Author: austinzani

src/common/network.ts

@@ -8,19 +8,29 @@ import { ACH_IFRAME, CARD_IFRAME, CASH_IFRAME, ElementTypes } from './data';
 
 const sessionKey = self.crypto.randomUUID();
 
-export const getData = async (url: string, apiKey: string) => {
-  const options: RequestInit = {
-    method: 'GET',
-    mode: 'cors',
-    cache: 'no-cache',
-    headers: {
-      'x-api-key': apiKey,
-      'x-session-key': sessionKey,
-    },
-  };
-  /* global fetch */
-  const response = await fetch(url, options);
-  return await response.json();
+const sessionId = self.crypto.randomUUID();
+
+export const getData = async (url: string,
+                              apiKey: string,
+                              sessionKey: string | null) => {
+    // Validate that the session key is generated by crypto.randomUUID
+    // If it is not, set it to null
+    if (sessionKey && !sessionKey.match(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/)) {
+        sessionKey = null;
+    }
+
+    const options: RequestInit = {
+        method: 'GET',
+        mode: 'cors',
+        cache: 'no-cache',
+        headers: {
+            'x-api-key': apiKey,
+            'x-session-key': sessionKey || sessionId,
+        },
+    };
+    /* global fetch */
+    const response = await fetch(url, options);
+    return await response.json();
 };
 
 export const PARTNER = process.env.ENV;
@@ -35,22 +45,23 @@ export const hostedFieldsEndpoint = `https://${ENVIRONMENT}.tags.static.${STAGE}
 export const hostedCheckoutEndpoint = `https://${ENVIRONMENT}.checkout.${STAGE}.com`;
 
 export const fetchPtToken = async (
-  apiKey: string,
+    apiKey: string,
+    sessionKey?: string | null
 ): Promise<
-  | {
-      'pt-token': string;
-      origin: string;
-      challengeOptions: object;
-    }
-  | false
+    | {
+    'pt-token': string;
+    origin: string;
+    challengeOptions: object;
+}
+    | false
 > => {
-  for (let i = 0; i < 5; i++) {
-    const token = await getData(transactionEndpoint, apiKey);
-    if (token['pt-token']) {
-      return token;
+    for (let i = 0; i < 5; i++) {
+        const token = await getData(transactionEndpoint, apiKey, sessionKey);
+        if (token['pt-token']) {
+            return token;
+        }
     }
-  }
-  return false;
+    return false;
 };
 
 const sendTransactingMessageToField = (

src/common/pay_theory_types.ts

@@ -169,7 +169,7 @@ export type PayTheoryPaymentFieldsInput = {
   metadata?: { [key: string | number]: string | number | boolean };
   placeholders?: PlaceholderObject;
   elementIds?: typeof defaultElementIds;
-  session?: string;
+  session?: string; // This is used for internal use to connect a button and qr code to a hosted checkout page
   feeMode?: typeof MERCHANT_FEE | typeof SERVICE_FEE;
   amount?: number;
 };

src/components/pay-theory-hosted-field-transactional/index.ts

@@ -153,7 +153,7 @@ class PayTheoryHostedFieldTransactional extends PayTheoryHostedField {
     type: `pt-static:connection_token` | `pt-static:reset_host`,
   ): Promise<ErrorResponse | ReadyResponse> {
     try {
-      const ptToken = await common.fetchPtToken(this._apiKey!);
+      const ptToken = await common.fetchPtToken(this._apiKey!, this._session);
       if (ptToken) {
         this._challengeOptions = ptToken['challengeOptions'];
         const transactingIFrame = document.getElementById(