feat: update loadCoreSdkScript to handle dataNamespace option (#719)

* add data-namespace attribute handling

* add tests and update options validation

* add changeset

Author: EvanReinstein

.changeset/shiny-wasps-start.md

@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": patch
+---
+
+Update loadCoreSdkScript function to handle data-namespace attribute.

packages/paypal-js/src/v6/index.test.ts

@@ -49,7 +49,52 @@ describe("loadCoreSdkScript()", () => {
         expect(mockedInsertScriptElement).toHaveBeenCalledTimes(1);
     });
 
-    test("should error due to unvalid input", async () => {
+    describe("dataNamespace option", () => {
+        test("should support custom data-namespace attribute", async () => {
+            const customNamespace = "myCustomNamespace";
+
+            // Update mock to set the custom namespace instead of window.paypal
+            mockedInsertScriptElement.mockImplementationOnce(
+                ({ onSuccess }: ScriptElement) => {
+                    vi.stubGlobal(customNamespace, { version: "6" });
+                    process.nextTick(() => onSuccess());
+                },
+            );
+
+            const result = await loadCoreSdkScript({
+                dataNamespace: customNamespace,
+            });
+
+            expect(mockedInsertScriptElement.mock.calls[0][0].url).toEqual(
+                "https://www.sandbox.paypal.com/web-sdk/v6/core",
+            );
+            expect(
+                mockedInsertScriptElement.mock.calls[0][0].attributes,
+            ).toEqual({
+                "data-namespace": customNamespace,
+            });
+            expect(mockedInsertScriptElement).toHaveBeenCalledTimes(1);
+            expect(result).toBeDefined();
+        });
+
+        test("should error when dataNamespace is an empty string", async () => {
+            expect(async () => {
+                await loadCoreSdkScript({ dataNamespace: "" });
+            }).rejects.toThrowError(
+                'The "dataNamespace" option cannot be an empty string',
+            );
+        });
+
+        test("should error when dataNamespace is only whitespace", async () => {
+            expect(async () => {
+                await loadCoreSdkScript({ dataNamespace: "   " });
+            }).rejects.toThrowError(
+                'The "dataNamespace" option cannot be an empty string',
+            );
+        });
+    });
+
+    test("should error due to invalid input", async () => {
         expect(async () => {
             // @ts-expect-error invalid arguments
             await loadCoreSdkScript(123);

packages/paypal-js/src/v6/index.ts

@@ -8,7 +8,8 @@ const version = "__VERSION__";
 
 function loadCoreSdkScript(options: LoadCoreSdkScriptOptions = {}) {
     validateArguments(options);
-    const { environment, debug } = options;
+    const { environment, debug, dataNamespace } = options;
+    const attributes: Record<string, string> = {};
 
     const baseURL =
         environment === "production"
@@ -20,16 +21,27 @@ function loadCoreSdkScript(options: LoadCoreSdkScriptOptions = {}) {
         url.searchParams.append("debug", "true");
     }
 
+    if (dataNamespace) {
+        attributes["data-namespace"] = dataNamespace;
+    }
+
     return new Promise<PayPalV6Namespace>((resolve, reject) => {
         insertScriptElement({
             url: url.toString(),
+            attributes,
             onSuccess: () => {
-                if (!window.paypal) {
+                const namespace = dataNamespace ?? "paypal";
+                const paypalSDK = Reflect.get(
+                    window,
+                    namespace,
+                ) as PayPalV6Namespace;
+
+                if (!paypalSDK) {
                     return reject(
-                        "The window.paypal global variable is not available",
+                        `The window.${namespace} global variable is not available`,
                     );
                 }
-                return resolve(window.paypal as unknown as PayPalV6Namespace);
+                return resolve(paypalSDK);
             },
             onError: () => {
                 const defaultError = new Error(
@@ -46,7 +58,7 @@ function validateArguments(options: unknown) {
     if (typeof options !== "object" || options === null) {
         throw new Error("Expected an options object");
     }
-    const { environment } = options as LoadCoreSdkScriptOptions;
+    const { environment, dataNamespace } = options as LoadCoreSdkScriptOptions;
 
     if (
         environment &&
@@ -57,6 +69,10 @@ function validateArguments(options: unknown) {
             'The "environment" option must be either "production" or "sandbox"',
         );
     }
+
+    if (dataNamespace !== undefined && dataNamespace.trim() === "") {
+        throw new Error('The "dataNamespace" option cannot be an empty string');
+    }
 }
 
 export { loadCoreSdkScript, version };

packages/paypal-js/types/v6/index.d.ts

@@ -171,10 +171,14 @@ export interface BaseInstance {
     updateLocale: (locale: string) => void;
 }
 
-export type LoadCoreSdkScriptOptions = {
+interface CoreSdkScriptDataAttributes {
+    dataNamespace?: string;
+}
+
+export interface LoadCoreSdkScriptOptions extends CoreSdkScriptDataAttributes {
     environment?: "production" | "sandbox";
     debug?: boolean;
-};
+}
 
 export function loadCoreSdkScript(
     options: LoadCoreSdkScriptOptions,