Allows button message amount type to be string (#545)

Author: danzhaaspaypal

.changeset/smooth-pets-scream.md

@@ -0,0 +1,6 @@
+---
+"@paypal/react-paypal-js": minor
+"@paypal/paypal-js": patch
+---
+
+Allows button message amount type to be string

packages/paypal-js/types/components/buttons.d.ts

@@ -273,7 +273,7 @@ export type PayPalButtonStyle = {
 };
 export type PayPalButtonDisplayOnly = DisplayOnlyOptions[];
 export type PayPalButtonMessage = {
-    amount?: number;
+    amount?: number | string;
     align?: "center" | "left" | "right";
     color?: "black" | "white";
     position?: "top" | "bottom";

packages/react-paypal-js/src/components/PayPalButtons.test.tsx

@@ -446,4 +446,21 @@ describe("<PayPalButtons />", () => {
         ).toBeFalsy();
         spyConsoleError.mockRestore();
     });
+
+    test("should accept button message amount as a string", async () => {
+        render(
+            <PayPalScriptProvider options={{ clientId: "test" }}>
+                <PayPalButtons
+                    message={{ amount: "100" }}
+                />
+            </PayPalScriptProvider>
+        );
+
+        await waitFor(() =>
+            expect(window.paypal?.Buttons).toHaveBeenCalledWith({
+                message: { amount: "100" },
+                onInit: expect.any(Function),
+            })
+        );
+    });
 });

packages/react-paypal-js/src/components/braintree/BraintreePayPalButtons.test.tsx

@@ -365,4 +365,27 @@ describe("render Braintree PayPal button component", () => {
             });
         });
     });
+
+    test("should accept button message amount as a string", async () => {
+        const options = {
+            clientId: "test",
+            dataClientToken: CLIENT_TOKEN,
+        };
+        render(
+            <PayPalScriptProvider options={ options }>
+                <BraintreePayPalButtons
+                    message={{ amount: "100" }}
+                />
+            </PayPalScriptProvider>
+        );
+
+        await waitFor(() => {
+        const mockButtons = (window.paypal &&
+            window.paypal.Buttons) as jest.Mock;
+        expect(mockButtons).toBeCalledWith({
+                message: { amount: "100" },
+                onInit: expect.any(Function),
+            })
+        });
+    });
 });