paypal · gregjopa · Jun 1, 2023 · May 30, 2023
@@ -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>

@@ -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) {

@@ -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

@@ -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,
  };
 

@@ -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>

@@ -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();

@@ -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>;

@@ -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" });
  });
 });