Adding dataSdkIntegrationSource to the script tag for analytics purpose (#822)

* Adding dataSdkIntegrationSource to the script tag for analytics purpose

* updating changeset

* removing merchant control on the dataSdkIntegrationSource

Author: nityasp

.changeset/eighty-yaks-juggle.md

@@ -0,0 +1,5 @@
+---
+"@paypal/paypal-js": minor
+---
+
+Adding dataSdkIntegrationSource to the script tag for analytics purpose

.changeset/forty-pots-open.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": minor
+---
+
+Adding dataSdkIntegrationSource to the script tag for analytics purpose

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

@@ -94,6 +94,43 @@ describe("loadCoreSdkScript()", () => {
         });
     });
 
+    describe("dataSdkIntegrationSource option", () => {
+        test("should support custom data-sdk-integration-source attribute", async () => {
+            const integrationSource = "react-paypal-js";
+
+            const result = await loadCoreSdkScript({
+                dataSdkIntegrationSource: integrationSource,
+            });
+
+            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-sdk-integration-source": integrationSource,
+            });
+            expect(mockedInsertScriptElement).toHaveBeenCalledTimes(1);
+            expect(result).toBeDefined();
+        });
+
+        test("should error when dataSdkIntegrationSource is an empty string", async () => {
+            expect(async () => {
+                await loadCoreSdkScript({ dataSdkIntegrationSource: "" });
+            }).rejects.toThrowError(
+                'The "dataSdkIntegrationSource" option cannot be an empty string',
+            );
+        });
+
+        test("should error when dataSdkIntegrationSource is only whitespace", async () => {
+            expect(async () => {
+                await loadCoreSdkScript({ dataSdkIntegrationSource: "   " });
+            }).rejects.toThrowError(
+                'The "dataSdkIntegrationSource" option cannot be an empty string',
+            );
+        });
+    });
+
     test("should return PayPal namespace with version property", async () => {
         const result = await loadCoreSdkScript();
         expect(result).toBeDefined();

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

@@ -22,7 +22,8 @@ function loadCoreSdkScript(options: LoadCoreSdkScriptOptions = {}) {
         return Promise.resolve(window.paypal as unknown as PayPalV6Namespace);
     }
 
-    const { environment, debug, dataNamespace } = options;
+    const { environment, debug, dataNamespace, dataSdkIntegrationSource } =
+        options;
     const attributes: Record<string, string> = {};
 
     const baseURL =
@@ -39,6 +40,10 @@ function loadCoreSdkScript(options: LoadCoreSdkScriptOptions = {}) {
         attributes["data-namespace"] = dataNamespace;
     }
 
+    if (dataSdkIntegrationSource) {
+        attributes["data-sdk-integration-source"] = dataSdkIntegrationSource;
+    }
+
     return new Promise<PayPalV6Namespace>((resolve, reject) => {
         insertScriptElement({
             url: url.toString(),
@@ -71,7 +76,8 @@ function validateArguments(options: unknown) {
     if (typeof options !== "object" || options === null) {
         throw new Error("Expected an options object");
     }
-    const { environment, dataNamespace } = options as LoadCoreSdkScriptOptions;
+    const { environment, dataNamespace, dataSdkIntegrationSource } =
+        options as LoadCoreSdkScriptOptions;
 
     if (
         environment &&
@@ -86,6 +92,15 @@ function validateArguments(options: unknown) {
     if (dataNamespace !== undefined && dataNamespace.trim() === "") {
         throw new Error('The "dataNamespace" option cannot be an empty string');
     }
+
+    if (
+        dataSdkIntegrationSource !== undefined &&
+        dataSdkIntegrationSource.trim() === ""
+    ) {
+        throw new Error(
+            'The "dataSdkIntegrationSource" option cannot be an empty string',
+        );
+    }
 }
 
 export { loadCoreSdkScript, version };

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

@@ -223,6 +223,7 @@ export interface BaseInstance {
 
 interface CoreSdkScriptDataAttributes {
     dataNamespace?: string;
+    dataSdkIntegrationSource?: string;
 }
 
 export interface LoadCoreSdkScriptOptions extends CoreSdkScriptDataAttributes {

packages/react-paypal-js/src/v6/components/PayPalProvider.test.tsx

@@ -138,6 +138,7 @@ describe("PayPalProvider", () => {
             expect(loadCoreSdkScript).toHaveBeenCalledWith({
                 environment: "sandbox",
                 debug: false,
+                dataSdkIntegrationSource: "react-paypal-js",
             });
 
             await waitFor(() => expectResolvedState(state));
@@ -180,6 +181,7 @@ describe("PayPalProvider", () => {
                 expect(loadCoreSdkScript).toHaveBeenCalledWith({
                     environment,
                     debug: false,
+                    dataSdkIntegrationSource: "react-paypal-js",
                 });
 
                 await waitFor(() => {

packages/react-paypal-js/src/v6/components/PayPalProvider.tsx

@@ -29,7 +29,7 @@ type PayPalProviderProps = Omit<
     CreateInstanceOptions<readonly [Components, ...Components[]]>,
     "components" | "clientToken"
 > &
-    LoadCoreSdkScriptOptions & {
+    Omit<LoadCoreSdkScriptOptions, "dataSdkIntegrationSource"> & {
         components?: Components[];
         eligibleMethodsResponse?: FindEligiblePaymentMethodsResponse;
         children: React.ReactNode;
@@ -118,7 +118,10 @@ export const PayPalProvider: React.FC<PayPalProviderProps> = ({
     >(undefined);
     const [isHydrated, setIsHydrated] = useState(false);
     // Ref to hold script options to avoid re-running effect
-    const loadCoreScriptOptions = useRef(scriptOptions);
+    const loadCoreScriptOptions = useRef({
+        ...scriptOptions,
+        dataSdkIntegrationSource: "react-paypal-js",
+    });
 
     // Set hydrated state after initial client render to prevent hydration mismatch
     useIsomorphicLayoutEffect(() => {
@@ -170,6 +173,8 @@ export const PayPalProvider: React.FC<PayPalProviderProps> = ({
                     environment: loadCoreScriptOptions.current.environment,
                     debug: loadCoreScriptOptions.current.debug,
                     dataNamespace: loadCoreScriptOptions.current.dataNamespace,
+                    dataSdkIntegrationSource:
+                        loadCoreScriptOptions.current.dataSdkIntegrationSource,
                 });
 
                 if (paypal) {