feat: camelCase instead of kebab-case for params

BREAKING CHANGE: this is a breaking change for the TypeScript types.

Author: gregjopa

README.md

@@ -64,7 +64,7 @@ import { loadScript } from "@paypal/paypal-js";
 let paypal;
 
 try {
-    paypal = await loadScript({ "client-id": "test" });
+    paypal = await loadScript({ clientId: "test" });
 } catch (error) {
     console.error("failed to load the PayPal JS SDK script", error);
 }
@@ -83,7 +83,7 @@ if (paypal) {
 ```js
 import { loadScript } from "@paypal/paypal-js";
 
-loadScript({ "client-id": "test" })
+loadScript({ clientId: "test" })
     .then((paypal) => {
         paypal
             .Buttons()
@@ -99,14 +99,14 @@ loadScript({ "client-id": "test" })
 
 ### Passing Arguments
 
-The `loadScript` function accepts an object for configuring the JS SDK. It's used for setting query parameters and script attributes.
+The `loadScript` function accepts an object for configuring the JS SDK. It's used for setting query parameters and script attributes. It accepts parameters in camelCase or kebab-case.
 
 #### Query Parameters
 
 The following example adds `client-id` and `currency` as query string parameters:
 
 ```js
-loadScript({ "client-id": "YOUR_CLIENT_ID", currency: "EUR" });
+loadScript({ clientId: "YOUR_CLIENT_ID", currency: "EUR" });
 ```
 
 Which will load the following `<script>` asynchronously:
@@ -119,7 +119,7 @@ By default, the JS SDK only loads the buttons component. The `components` query
 
 ```js
 loadScript({
-    "client-id": "YOUR_CLIENT_ID",
+    clientId: "YOUR_CLIENT_ID",
     components: "buttons,marks,messages",
 });
 ```
@@ -134,12 +134,12 @@ View the [full list of supported query parameters](https://developer.paypal.com/
 
 #### Data Attributes
 
-All options prefixed with `data-` are considered attributes. The following example adds `data-page-type` as an attribute:
+All options prefixed with `data` are considered attributes. The following example adds `data-page-type` as an attribute:
 
 ```js
 loadScript({
-    "client-id": "YOUR_CLIENT_ID",
-    "data-page-type": "checkout",
+    clientId: "YOUR_CLIENT_ID",
+    dataPageType: "checkout",
 });
 ```
 
@@ -154,16 +154,16 @@ Which will load the following `<script>` asynchronously:
 
 View the [full list of supported script parameters](https://developer.paypal.com/sdk/js/configuration/#link-scriptparameters).
 
-#### Merchant ID Array
+#### Merchant Id Array
 
-The `merchant-id` option accepts an array to simplify the implementation for Multi-Seller Payments. With this approach the caller doesn't have to worry about managing the two different merchant id values (`data-merchant-id` and `merchant-id`).
+The `merchantId` option accepts an array to simplify the implementation for Multi-Seller Payments. With this approach the caller doesn't have to worry about managing the two different merchant id values (`data-merchant-id` and `merchant-id`).
 
-**Here's an example with multiple `merchant-id` values:**
+**Here's an example with multiple `merchantId` values:**
 
 ```js
 loadScript({
-    "client-id": "YOUR_CLIENT_ID",
-    "merchant-id": ["123", "456", "789"],
+    clientId: "YOUR_CLIENT_ID",
+    merchantId: ["123", "456", "789"],
 });
 ```
 
@@ -180,8 +180,8 @@ Which will load the following `<script>` and use `merchant-id=*` to properly con
 
 ```js
 loadScript({
-    "client-id": "YOUR_CLIENT_ID",
-    "merchant-id": ["123"],
+    clientId: "YOUR_CLIENT_ID",
+    merchantId: ["123"],
 });
 ```
 
@@ -191,14 +191,14 @@ When there's only one, the merchant-id is passed in using the query string.
 <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&merchant-id=123"></script>
 ```
 
-#### sdkBaseURL
+#### sdkBaseUrl
 
-For local development, the `sdkBaseURL` option can be used to set the base url of the JS SDK:
+For local development, the `sdkBaseUrl` option can be used to set the base url of the JS SDK:
 
 ```js
 loadScript({
-    "client-id": "YOUR_CLIENT_ID",
-    sdkBaseURL: "http://localhost.paypal.com:8000/sdk/js",
+    clientId: "YOUR_CLIENT_ID",
+    sdkBaseUrl: "http://localhost.paypal.com:8000/sdk/js",
 });
 ```
 
@@ -237,7 +237,7 @@ The paypal-js script is also available on the [unpkg CDN](https://unpkg.com/). T
     <body>
         <div id="paypal-buttons"></div>
         <script>
-            window.paypalLoadScript({ "client-id": "test" }).then((paypal) => {
+            window.paypalLoadScript({ clientId: "test" }).then((paypal) => {
                 paypal.Buttons().render("#paypal-buttons");
             });
         </script>

e2e-tests/browser-global.html

@@ -10,8 +10,8 @@ <h1>Demo with window.paypalLoadScript</h1>
         <script src="../../dist/iife/paypal-js.min.js"></script>
         <script>
             var options = {
-                "client-id": "test",
-                "data-page-type": "checkout",
+                clientId: "test",
+                dataPageType: "checkout",
             };
 
             window.paypalLoadScript(options).then(function (paypal) {

e2e-tests/load-cached-script.html

@@ -11,8 +11,8 @@ <h1>Load Cached Script</h1>
             import { loadScript } from "../../dist/esm/paypal-js.js";
 
             const options = {
-                "client-id": "test",
-                "data-page-type": "checkout",
+                clientId: "test",
+                dataPageType: "checkout",
             };
 
             // initial load and render

e2e-tests/reload-script.html

@@ -11,8 +11,8 @@ <h1>Reload Script Demo</h1>
             import { loadScript } from "../../dist/esm/paypal-js.js";
 
             const options = {
-                "client-id": "test",
-                "data-page-type": "checkout",
+                clientId: "test",
+                dataPageType: "checkout",
                 currency: document.querySelector("#currency").value,
             };
 

e2e-tests/validation-errors.html

@@ -34,7 +34,7 @@ <h1>Validation Errors</h1>
                 .addEventListener("click", () => {
                     // Error: client-id not recognized for either production or sandbox: invalid-client-id-value
                     loadScript({
-                        "client-id": "invalid-client-id-value",
+                        clientId: "invalid-client-id-value",
                     }).catch((err) => setErrorMessage(err));
                 });
         </script>

src/load-script.node.test.ts

@@ -5,7 +5,7 @@
 import { loadScript, loadCustomScript } from "./load-script";
 
 test("should still resolve when global window object does not exist", async () => {
-    await expect(loadScript({ "client-id": "test" })).resolves.toBeNull();
+    await expect(loadScript({ clientId: "test" })).resolves.toBeNull();
     await expect(
         loadCustomScript({ url: "https://www.example.com/index.js" })
     ).resolves.toBeUndefined();

src/load-script.test.ts

@@ -34,7 +34,7 @@ describe("loadScript()", () => {
     test("should insert <script> and resolve the promise", async () => {
         expect(window.paypal).toBe(undefined);
 
-        const response = await loadScript({ "client-id": "test" });
+        const response = await loadScript({ clientId: "test" });
         expect(insertScriptElementSpy).toHaveBeenCalledTimes(1);
         expect(response).toEqual(window.paypal);
     });
@@ -47,7 +47,7 @@ describe("loadScript()", () => {
             '<script src="https://www.paypal.com/sdk/js?client-id=test"></script>';
         window.paypal = paypalNamespace;
 
-        const response = await loadScript({ "client-id": "test" });
+        const response = await loadScript({ clientId: "test" });
         expect(insertScriptElementSpy).not.toHaveBeenCalled();
         expect(response).toEqual(window.paypal);
     });
@@ -59,8 +59,8 @@ describe("loadScript()", () => {
         expect(windowObject.paypal2).toBe(undefined);
 
         const response = await Promise.all([
-            loadScript({ "client-id": "test", "data-namespace": "paypal1" }),
-            loadScript({ "client-id": "test", "data-namespace": "paypal2" }),
+            loadScript({ clientId: "test", dataNamespace: "paypal1" }),
+            loadScript({ clientId: "test", dataNamespace: "paypal2" }),
         ]);
 
         expect(insertScriptElementSpy).toHaveBeenCalledTimes(2);
@@ -78,7 +78,7 @@ describe("loadScript()", () => {
         expect(window.paypal).toBe(undefined);
 
         try {
-            await loadScript({ "client-id": "test" });
+            await loadScript({ clientId: "test" });
         } catch (err) {
             expect(insertScriptElementSpy).toHaveBeenCalledTimes(1);
             const { message: errorMessage } = err as Record<string, string>;

src/utils.test.ts

@@ -21,10 +21,10 @@ describe("objectToQueryString()", () => {
 describe("processOptions()", () => {
     test("returns dataAttributes and url", () => {
         const options = {
-            "client-id": "test",
+            clientId: "test",
             currency: "USD",
-            "data-page-type": "checkout",
-            "some-random-key": "some-random-value",
+            dataPageType: "checkout",
+            someRandomKey: "some-random-value",
         };
 
         const { url, dataAttributes } = processOptions(options);
@@ -37,8 +37,8 @@ describe("processOptions()", () => {
 
     test("sets a custom base url", () => {
         const { url } = processOptions({
-            "client-id": "test",
-            sdkBaseURL: "http://localhost.paypal.com:8000/sdk/js",
+            clientId: "test",
+            sdkBaseUrl: "http://localhost.paypal.com:8000/sdk/js",
         });
 
         expect(url).toBe(
@@ -47,16 +47,16 @@ describe("processOptions()", () => {
     });
 
     test("default values when only client-id is passed in", () => {
-        const { url, dataAttributes } = processOptions({ "client-id": "test" });
+        const { url, dataAttributes } = processOptions({ clientId: "test" });
 
         expect(url).toBe("https://www.paypal.com/sdk/js?client-id=test");
         expect(dataAttributes).toEqual({});
     });
 
     test("supports passing an array of merchant ids", () => {
         const { url, dataAttributes } = processOptions({
-            "client-id": "test",
-            "merchant-id": ["123", "456", "789"],
+            clientId: "test",
+            merchantId: ["123", "456", "789"],
         });
 
         expect(url).toBe(
@@ -67,8 +67,8 @@ describe("processOptions()", () => {
 
     test("supports passing a single merchant id", () => {
         const { url, dataAttributes } = processOptions({
-            "client-id": "test",
-            "merchant-id": "123",
+            clientId: "test",
+            merchantId: "123",
         });
 
         expect(url).toBe(
@@ -77,8 +77,8 @@ describe("processOptions()", () => {
         expect(dataAttributes).toEqual({});
 
         const { url: url2, dataAttributes: dataAttributes2 } = processOptions({
-            "client-id": "test",
-            "merchant-id": ["123"],
+            clientId: "test",
+            merchantId: ["123"],
         });
 
         expect(url2).toBe(
@@ -87,16 +87,27 @@ describe("processOptions()", () => {
         expect(dataAttributes2).toEqual({});
     });
 
-    test("falls back to data-merchant-id when merchant-id is not set", () => {
+    test("supports passing options in kebab-case or camelCase format", () => {
         const { url, dataAttributes } = processOptions({
+            // @ts-expect-error ignore invalid arguments error
             "client-id": "test",
-            "data-merchant-id": "123,456,789",
+            "merchant-id": ["123", "456", "789"],
         });
 
         expect(url).toBe(
             "https://www.paypal.com/sdk/js?client-id=test&merchant-id=*"
         );
         expect(dataAttributes).toEqual({ "data-merchant-id": "123,456,789" });
+
+        const { url: url2, dataAttributes: dataAttributes2 } = processOptions({
+            clientId: "test",
+            merchantId: ["123", "456", "789"],
+        });
+
+        expect(url2).toBe(
+            "https://www.paypal.com/sdk/js?client-id=test&merchant-id=*"
+        );
+        expect(dataAttributes2).toEqual({ "data-merchant-id": "123,456,789" });
     });
 });