fix: failing typecheck (#408)

package.json

@@ -45,7 +45,7 @@
     },
     "homepage": "https://paypal.github.io/react-paypal-js/",
     "dependencies": {
-        "@paypal/paypal-js": "^7.0.0",
+        "@paypal/paypal-js": "^7.1.1",
         "@paypal/sdk-constants": "^1.0.122"
     },
     "devDependencies": {

src/types/payPalHostedFieldTypes.ts

@@ -2,9 +2,8 @@ import type { CSSProperties, ReactNode } from "react";
 import type { HostedFieldsHandler, Installments } from "@paypal/paypal-js";
 
 export type PayPalHostedFieldsNamespace = {
-    components: string | undefined;
-    [DATA_NAMESPACE: string]: string | undefined;
-};
+    components: string | string[] | undefined;
+} & { [DATA_NAMESPACE: string]: string | undefined };
 
 export type PayPalHostedFieldsRegistered = {
     [key: string]: PayPalHostedFieldOptions;

src/utils.test.ts

@@ -2,6 +2,7 @@ import { mock } from "jest-mock-extended";
 
 import { SDK_SETTINGS } from "./constants";
 import {
+    generateErrorMessage,
     getPayPalWindowNamespace,
     getBraintreeWindowNamespace,
     hashStr,
@@ -10,6 +11,31 @@ import {
 import type { PayPalNamespace } from "@paypal/paypal-js";
 import type { BraintreeNamespace } from "./types";
 
+describe("generateErrorMessage", () => {
+    const errorMessage =
+        "Unable to render <Example /> because window.customNamespace.Example is undefined.\nTo fix the issue, add 'example' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: 'hosted-fields,example'}}>`.";
+    test("sdkRequestedComponents as an array", () => {
+        expect(
+            generateErrorMessage({
+                reactComponentName: "Example",
+                sdkComponentKey: "example",
+                sdkRequestedComponents: ["hosted-fields"],
+                sdkDataNamespace: "customNamespace",
+            })
+        ).toBe(errorMessage);
+    });
+    test("sdkRequestedComponents as a string", () => {
+        expect(
+            generateErrorMessage({
+                reactComponentName: "Example",
+                sdkComponentKey: "example",
+                sdkRequestedComponents: "hosted-fields",
+                sdkDataNamespace: "customNamespace",
+            })
+        ).toBe(errorMessage);
+    });
+});
+
 describe("getPayPalWindowNamespace", () => {
     const mockPayPalNamespace = mock<PayPalNamespace>();
 

src/utils.ts

@@ -9,7 +9,7 @@ import type { BraintreeNamespace } from "./types";
 type ErrorMessageParams = {
     reactComponentName: string;
     sdkComponentKey: string;
-    sdkRequestedComponents?: string;
+    sdkRequestedComponents?: string | string[];
     sdkDataNamespace?: string;
 };
 
@@ -79,8 +79,12 @@ export function generateErrorMessage({
 
     // The JS SDK only loads the buttons component by default.
     // All other components like messages and marks must be requested using the "components" query parameter
-    if (!sdkRequestedComponents.includes(sdkComponentKey)) {
-        const expectedComponents = [sdkRequestedComponents, sdkComponentKey]
+    const requestedComponents =
+        typeof sdkRequestedComponents === "string"
+            ? sdkRequestedComponents
+            : sdkRequestedComponents.join(",");
+    if (!requestedComponents.includes(sdkComponentKey)) {
+        const expectedComponents = [requestedComponents, sdkComponentKey]
             .filter(Boolean)
             .join();