Add base url

Makefile

@@ -35,3 +35,7 @@ stop-ngrok:
 	@echo "Stopping ngrok..."
 	@pkill ngrok || true
 	@echo "Ngrok stopped."
+
+precommit:
+	npm run lint:fix
+	cd ./example && npm run lint:fix

lib/components/_common/frame.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { FRAME_BASE_URL } from '../../utils/constants';
 import { convertStylesToQueryString } from '../../utils/style';
 import { ElementsStyle } from '../../utils/shared-models';
 import { useOpenPayElements } from '../../hooks/use-openpay-elements';
@@ -12,7 +11,7 @@ type ElementFrameProps = {
 
 const ElementFrame: FC<ElementFrameProps> = (props) => {
   const { subPath, styles } = props;
-  const { formId, referer, formHeight, checkoutSecureToken, registerIframe } = useOpenPayElements();
+  const { formId, referer, formHeight, checkoutSecureToken, registerIframe, baseUrl } = useOpenPayElements();
 
   const [hasLoaded, setHasLoaded] = useState<boolean>(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -57,7 +56,7 @@ const ElementFrame: FC<ElementFrameProps> = (props) => {
   return (
     <iframe
       name={`${subPath}-element`}
-      src={`${FRAME_BASE_URL}/app/v1/${subPath}-element/?${queryString}`}
+      src={`${baseUrl}/app/v1/${subPath}-element/?${queryString}`}
       style={frameStyle}
       ref={iframeRef}
     />

lib/components/form.tsx

@@ -22,8 +22,10 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
     onCheckoutStarted,
     onCheckoutSuccess,
     onCheckoutError,
+    baseUrl,
   } = props;
 
+  const frameBaseUrl: string = baseUrl ?? FRAME_BASE_URL;
   const [referer, setReferer] = useState<string | undefined>(undefined);
   const [nonces, setNonces] = useState<string[]>([]);
   const [formHeight, setFormHeight] = useState<string>('1px');
@@ -52,7 +54,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
       // to a specific target, we need to ensure that messages are
       // originating from CDE.
       // https://html.spec.whatwg.org/multipage/web-messaging.html#authors
-      if (event.origin !== FRAME_BASE_URL) return;
+      if (event.origin !== frameBaseUrl) return;
 
       // MessageEvent.source is a non-null MessageEventSource for
       // messages sent via window.postMessage, but it is null for
@@ -127,7 +129,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
 
         if (!checkoutFired && (allTokenized || eventPayload.isReadyForCheckout)) {
           console.log('[form] Tokenized card is ready for checkout');
-          emitEvent(eventSource, formId, elementId, extraData);
+          emitEvent(eventSource, formId, elementId, extraData, frameBaseUrl);
           setCheckoutFired(true);
           setExtraData(undefined);
         } else {
@@ -173,6 +175,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
       onCheckoutSuccess,
       onCheckoutError,
       onValidationError,
+      frameBaseUrl,
     ]
   );
 
@@ -186,12 +189,12 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
 
     for (const [elementId, target] of Object.entries(eventTargets)) {
       if (!target) continue;
-      emitEvent(target, formId, elementId, extraData);
+      emitEvent(target, formId, elementId, extraData, frameBaseUrl);
     }
 
     extraData.type = EventType.enum.CHECKOUT;
     setExtraData(extraData);
-  }, [formRef, eventTargets, formId, onValidationError, sessionId]);
+  }, [formRef, eventTargets, formId, onValidationError, sessionId, frameBaseUrl]);
 
   const onBeforeUnload = useCallback(
     (e: BeforeUnloadEvent) => {
@@ -240,6 +243,7 @@ const ElementsForm: FC<ElementsFormProps> = (props) => {
     checkoutSecureToken,
     stripeContext,
     registerIframe,
+    baseUrl: frameBaseUrl,
   };
 
   return (

lib/hooks/context.ts

@@ -8,6 +8,7 @@ export type ElementsContextValue = {
   checkoutSecureToken?: string;
   stripeContext: StripeContext | null;
   registerIframe: (iframe: HTMLIFrameElement) => void;
+  baseUrl: string;
 };
 
 export const ElementsContext = createContext<ElementsContextValue>({
@@ -17,6 +18,7 @@ export const ElementsContext = createContext<ElementsContextValue>({
   checkoutSecureToken: undefined,
   stripeContext: null,
   registerIframe: () => {},
+  baseUrl: '',
 });
 
 export default { ElementsContext };

lib/utils/event.ts

@@ -1,5 +1,4 @@
 import { v4 as uuidv4 } from 'uuid';
-import { FRAME_BASE_URL } from './constants';
 import { ElementEvent, FieldName, EventType, EventPayload, SubmitEventPayload } from './shared-models';
 import { extractIssuesPerField } from './zod-errors';
 
@@ -50,7 +49,8 @@ export const emitEvent = (
   target: MessageEventSource,
   formId: string,
   elementId: string,
-  payload: EventPayload
+  payload: EventPayload,
+  baseUrl: string
 ): void => {
   const event: ElementEvent = {
     payload,
@@ -60,5 +60,6 @@ export const emitEvent = (
   };
 
   console.log(`[form ${formId}] Sending event to child ${elementId}:`, event);
-  target.postMessage(JSON.stringify(event), FRAME_BASE_URL);
+  // @ts-expect-error postMessage typing error?
+  target.postMessage(JSON.stringify(event), baseUrl);
 };

lib/utils/models.ts

@@ -22,4 +22,5 @@ export type ElementsFormProps = {
   onCheckoutStarted?: () => void;
   onCheckoutSuccess?: (invoiceUrls: string[]) => void;
   onCheckoutError?: (message: string) => void;
+  baseUrl?: string;
 };