Use paypal-sdk-constants for Stand Alone Buttons & Marks (#17)

Author: gregjopa

__mocks__/@paypal/paypal-js.js

@@ -0,0 +1,8 @@
+import { loadScript as loadScriptOriginal } from "@paypal/paypal-js";
+
+export function loadScript(options) {
+    return new Promise((resolve) => {
+        loadScriptOriginal(options);
+        process.nextTick(() => resolve({}));
+    });
+}

package-lock.json

@@ -28,7 +28,8 @@
         "url": "git://github.com/paypal/react-paypal-js.git"
     },
     "dependencies": {
-        "@paypal/paypal-js": "^1.0.0",
+        "@paypal/paypal-js": "^1.0.3",
+        "@paypal/sdk-constants": "^1.0.75",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {

package.json

@@ -1,25 +1,18 @@
 import React from "react";
 import { render, waitFor } from "@testing-library/react";
-import * as payPalJS from "@paypal/paypal-js";
 import { ScriptProvider, useScriptReducer } from "./ScriptContext";
 
 describe("<ScriptProvider />", () => {
-    let loadScriptBackup = payPalJS.loadScript;
-
     beforeEach(() => {
         document.head.innerHTML = "";
-
-        // eslint-disable-next-line no-import-assign
-        payPalJS.loadScript = jest.fn().mockImplementation((options) => {
-            return new Promise((resolve) => {
-                loadScriptBackup(options);
-                process.nextTick(() => resolve());
-            });
-        });
     });
 
     test("should add the JS SDK <script> to the DOM", () => {
-        render(<ScriptProvider options={{ "client-id": "sb" }} />);
+        render(
+            <ScriptProvider options={{ "client-id": "sb" }}>
+                <></>
+            </ScriptProvider>
+        );
 
         const script = document.querySelector("head script");
         expect(script).toBeTruthy();

src/ScriptContext.test.js

@@ -54,6 +54,11 @@ PayPalButtons.propTypes = {
      * Sets up a subscription. Called when the buyer clicks the PayPal button.
      */
     createSubscription: PropTypes.func,
+    /**
+     * The individual button to render. Use the `FUNDING` constant exported by this library to set this value. The full list can be found [here](https://developer.paypal.com/docs/checkout/integration-features/standalone-buttons/#complete-your-integration).
+     */
+    fundingSource: PropTypes.string,
+
     /**
      * Approved styling options for customizing layout, color, shape, and labels.
      */

src/components/PayPalButtons.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import { ScriptProvider } from "../ScriptContext";
+import PayPalButtons from "./PayPalButtons";
+import { FUNDING } from "@paypal/sdk-constants";
+
+describe("<PayPalButtons />", () => {
+    beforeEach(() => {
+        window.paypal = {
+            Buttons: function () {
+                return {
+                    close: jest.fn(),
+                    isEligible: jest.fn(),
+                    render: jest.fn(),
+                };
+            },
+        };
+    });
+
+    test("should pass props to window.paypal.Buttons()", async () => {
+        const spyOnButtons = jest.spyOn(window.paypal, "Buttons");
+
+        render(
+            <ScriptProvider options={{ "client-id": "sb" }}>
+                <PayPalButtons
+                    fundingSource={FUNDING.CREDIT}
+                    style={{ layout: "horizontal" }}
+                    shippingPreference="GET_FROM_FILE"
+                />
+            </ScriptProvider>
+        );
+
+        await waitFor(() =>
+            expect(spyOnButtons).toHaveBeenCalledWith({
+                shippingPreference: "GET_FROM_FILE",
+                style: { layout: "horizontal" },
+                fundingSource: FUNDING.CREDIT,
+            })
+        );
+    });
+});

src/components/PayPalButtons.test.js

@@ -9,25 +9,27 @@ import { useScriptReducer } from "../ScriptContext";
  *     <PayPalMarks />
  * ```
  *
- * It can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/checkout/integration-features/standalone-buttons/) approach using the `fundingSource` prop.
+ * This component can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/checkout/integration-features/standalone-buttons/) approach.
+ * A `FUNDING` object is exported by this library which has a key for every available funding source option.
+ *
+ * ```js
+ *     import { FUNDING } from '@paypal/react-paypal-js'
+ * ```
+ *
+ * Use this `FUNDING` constant to set the `fundingSource` prop.
  *
  * ```jsx
- *     <PayPalMarks fundingSource="paypal"/>
+ *     <PayPalMarks fundingSource={FUNDING.PAYPAL}/>
  * ```
  */
-export default function Marks({ fundingSource }) {
+export default function Marks(props) {
     const [{ isLoaded }] = useScriptReducer();
     const markContainerRef = useRef(null);
     const mark = useRef(null);
 
     useEffect(() => {
         if (isLoaded && !mark.current) {
-            // support either key or value for funding source
-            if (window.paypal.FUNDING[fundingSource]) {
-                fundingSource = window.paypal.FUNDING[fundingSource];
-            }
-
-            mark.current = window.paypal.Marks({ fundingSource });
+            mark.current = window.paypal.Marks({ ...props });
 
             if (mark.current.isEligible()) {
                 mark.current.render(markContainerRef.current);
@@ -40,7 +42,7 @@ export default function Marks({ fundingSource }) {
 
 Marks.propTypes = {
     /**
-     * The individual mark to render. The full list can be found [here](https://developer.paypal.com/docs/checkout/integration-features/standalone-buttons/#complete-your-integration).
+     * The individual mark to render. Use the `FUNDING` constant exported by this library to set this value. The full list can be found [here](https://developer.paypal.com/docs/checkout/integration-features/standalone-buttons/#complete-your-integration).
      */
     fundingSource: PropTypes.string,
 };

src/components/PayPalMarks.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import { ScriptProvider } from "../ScriptContext";
+import PayPalMarks from "./PayPalMarks";
+import { FUNDING } from "@paypal/sdk-constants";
+
+describe("<PayPalMarks />", () => {
+    beforeEach(() => {
+        window.paypal = {
+            Marks: function () {
+                return {
+                    isEligible: jest.fn(),
+                    render: jest.fn(),
+                };
+            },
+        };
+    });
+
+    test("should pass props to window.paypal.Marks()", async () => {
+        const spyOnMarks = jest.spyOn(window.paypal, "Marks");
+
+        render(
+            <ScriptProvider options={{ "client-id": "sb" }}>
+                <PayPalMarks fundingSource={FUNDING.CREDIT} />
+            </ScriptProvider>
+        );
+
+        await waitFor(() =>
+            expect(spyOnMarks).toHaveBeenCalledWith({
+                fundingSource: FUNDING.CREDIT,
+            })
+        );
+    });
+});

src/components/PayPalMarks.test.js

@@ -5,3 +5,5 @@ export {
     ScriptProvider as PayPalScriptProvider,
     useScriptReducer as usePayPalScriptReducer,
 } from "./ScriptContext";
+
+export { FUNDING } from "@paypal/sdk-constants";

src/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { PayPalScriptProvider, PayPalButtons } from "../index";
+import { FUNDING, PayPalScriptProvider, PayPalButtons } from "../index";
 
 export default {
     title: "Example/PayPalButtons",
@@ -73,3 +73,14 @@ CustomStyle.parameters = {
         },
     },
 };
+
+export const StandAlone = Template.bind({});
+StandAlone.args = { fundingSource: FUNDING.PAYLATER };
+
+StandAlone.parameters = {
+    docs: {
+        source: {
+            code: "<PayPalButtons fundingSource={FUNDING.PAYLATER} />",
+        },
+    },
+};

src/stories/PayPalButtons.stories.js

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { PayPalScriptProvider, PayPalMarks, PayPalButtons } from "../index";
+import {
+    PayPalScriptProvider,
+    PayPalMarks,
+    PayPalButtons,
+    FUNDING,
+} from "../index";
 
 export default {
     title: "Example/PayPalMarks",
@@ -9,7 +14,10 @@ export default {
 function Template(args) {
     return (
         <PayPalScriptProvider
-            options={{ "client-id": "sb", components: "marks" }}
+            options={{
+                "client-id": "sb",
+                components: "buttons,marks,funding-eligibility",
+            }}
         >
             <PayPalMarks {...args} />
         </PayPalScriptProvider>
@@ -20,10 +28,10 @@ export const Default = Template.bind({});
 Default.args = {};
 
 export const StandAlone = Template.bind({});
-StandAlone.args = { fundingSource: "paypal" };
+StandAlone.args = { fundingSource: FUNDING.PAYPAL };
 
 function RadioButtonTemplate() {
-    const [fundingSource, setFundingSource] = useState("paypal");
+    const [fundingSource, setFundingSource] = useState(FUNDING.PAYPAL);
 
     function onClick(event) {
         setFundingSource(event.target.value);
@@ -42,7 +50,7 @@ function RadioButtonTemplate() {
                         onClick={onClick}
                         type="radio"
                         name="fundingSource"
-                        value="paypal"
+                        value={FUNDING.PAYPAL}
                         defaultChecked
                     />
                     <PayPalMarks fundingSource="paypal" />
@@ -53,19 +61,19 @@ function RadioButtonTemplate() {
                         onClick={onClick}
                         type="radio"
                         name="fundingSource"
-                        value="card"
+                        value={FUNDING.CARD}
                     />
-                    <PayPalMarks fundingSource="card" />
+                    <PayPalMarks fundingSource={FUNDING.CARD} />
                 </label>
 
                 <label className="mark">
                     <input
                         onClick={onClick}
                         type="radio"
                         name="fundingSource"
-                        value="credit"
+                        value={FUNDING.CREDIT}
                     />
-                    <PayPalMarks fundingSource="credit" />
+                    <PayPalMarks fundingSource={FUNDING.CREDIT} />
                 </label>
             </form>
             <PayPalButtons fundingSource={fundingSource} />