@paypal/checkout-components 5.0.308 → 5.0.309

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.308",
+  "version": "5.0.309",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/hosted-buttons/index.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import { getLogger } from "@paypal/sdk-client/src";
+
 import { getButtonsComponent } from "../zoid/buttons";
 
 import {
@@ -8,6 +10,10 @@ import {
   getHostedButtonDetails,
   renderForm,
   getMerchantID,
+  shouldRenderSDKButtons,
+  getFlexDirection,
+  appendButtonContainer,
+  getButtonColor,
 } from "./utils";
 import type {
   HostedButtonsComponent,
@@ -19,12 +25,14 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
   function HostedButtons({
     enableDPoP = false,
     hostedButtonId,
+    fundingSources = [],
   }: HostedButtonsComponentProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
     const render = async (selector) => {
       const merchantId = getMerchantID();
       const { html, htmlScript, style } = await getHostedButtonDetails({
         hostedButtonId,
+        fundingSources,
       });
 
       const { onInit, onClick } = renderForm({
@@ -34,24 +42,60 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
         selector,
       });
 
-      // $FlowFixMe
-      Buttons({
+      const createOrder = buildHostedButtonCreateOrder({
+        enableDPoP,
         hostedButtonId,
-        style,
-        onInit,
+        merchantId,
+      });
+      const onApprove = buildHostedButtonOnApprove({
+        enableDPoP,
+        hostedButtonId,
+        merchantId,
+      });
+
+      const buttonOptions = {
+        createOrder,
+        hostedButtonId,
+        merchantId,
+        onApprove,
         onClick,
-        createOrder: buildHostedButtonCreateOrder({
-          enableDPoP,
-          hostedButtonId,
-          merchantId,
-        }),
-        onApprove: buildHostedButtonOnApprove({
-          enableDPoP,
-          hostedButtonId,
-          merchantId,
-        }),
-      }).render(selector);
+        onInit,
+        style,
+      };
+
+      if (shouldRenderSDKButtons(fundingSources)) {
+        const { flexDirection } = getFlexDirection({ ...style });
+
+        appendButtonContainer({ flexDirection, selector });
+
+        // Only render 2 buttons max
+        // This will be refactored in https://paypal.atlassian.net/browse/DTPPCPSDK-2112 when NCPS team updates their API response
+        fundingSources.slice(0, 2).forEach((fundingSource, index) => {
+          // $FlowFixMe
+          const standaloneButton = Buttons({
+            ...buttonOptions,
+            fundingSource,
+            style: {
+              ...style,
+              color: getButtonColor(style.color, fundingSource),
+            },
+          });
+
+          if (standaloneButton.isEligible()) {
+            standaloneButton.render(
+              index === 0 ? "#ncp-primary-button" : "#ncp-secondary-button"
+            );
+          } else {
+            getLogger().error(`ncps_standalone_${fundingSource}_ineligible`);
+          }
+        });
+      } else {
+        // V1 Experience
+        // $FlowFixMe
+        Buttons(buttonOptions).render(selector);
+      }
     };
+
     return {
       render,
     };

package/src/hosted-buttons/index.test.js

@@ -73,14 +73,82 @@ describe("HostedButtons", () => {
     );
     await HostedButtons({
       hostedButtonId: "B1234567890",
+      fundingSources: [],
     }).render("#example");
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
         hostedButtonId: "B1234567890",
       })
     );
-    expect.assertions(1);
+    expect(Buttons).toHaveBeenCalledTimes(1);
+    expect.assertions(2);
   });
-});
 
+  describe("NCP V2", () => {
+    beforeEach(() => {
+      const containerId = "#container-id";
+      const selector = document.createElement("div");
+      selector.setAttribute("id", containerId.slice(1));
+      vi.spyOn(document, "querySelector").mockReturnValue(selector);
+    });
+
+    test("paypal.Buttons calls getHostedButtonDetails, invokes v5 of the SDK", async () => {
+      const renderMock = vi.fn();
+
+      const Buttons = vi.fn(() => ({
+        render: renderMock,
+        isEligible: vi.fn(() => true),
+      }));
+      // $FlowIssue
+      getButtonsComponent.mockImplementationOnce(() => Buttons);
+      const HostedButtons = getHostedButtonsComponent();
+      // $FlowIssue
+      request.mockImplementationOnce(() =>
+        // eslint-disable-next-line compat/compat
+        Promise.resolve(getHostedButtonDetailsResponse)
+      );
+      await HostedButtons({
+        hostedButtonId: "B1234567890",
+        fundingSources: ["paypal", "venmo"],
+      }).render("#example");
+      expect(Buttons).toHaveBeenCalledWith(
+        expect.objectContaining({
+          hostedButtonId: "B1234567890",
+        })
+      );
+      expect(Buttons).toHaveBeenCalledTimes(2);
+      expect(renderMock).toHaveBeenCalledTimes(2);
+      expect.assertions(3);
+    });
+  });
+
+  test("only eligible buttons are rendered", async () => {
+    const renderMock = vi.fn();
+
+    const Buttons = vi.fn(() => ({
+      render: renderMock,
+      isEligible: vi.fn(() => false),
+    }));
+    // $FlowIssue
+    getButtonsComponent.mockImplementationOnce(() => Buttons);
+    const HostedButtons = getHostedButtonsComponent();
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse)
+    );
+    await HostedButtons({
+      hostedButtonId: "B1234567890",
+      fundingSources: ["paypal", "venmo"],
+    }).render("#example");
+    expect(Buttons).toHaveBeenCalledWith(
+      expect.objectContaining({
+        hostedButtonId: "B1234567890",
+      })
+    );
+    expect(Buttons).toHaveBeenCalledTimes(2);
+    expect(renderMock).toHaveBeenCalledTimes(0);
+    expect.assertions(3);
+  });
+});
 /* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -1,8 +1,27 @@
 /* @flow */
 /* eslint-disable no-restricted-globals, promise/no-native */
 
+export type Color = string;
+export type FlexDirection = string;
+export type Layout = string;
+
+export type FundingSources = string;
+export interface GetFlexDirection {
+  flexDirection: FlexDirection;
+}
+
+export interface GetFlexDirectionArgs {
+  layout: Layout;
+}
+
+export interface BuildButtonContainerArgs {
+  flexDirection: FlexDirection;
+  selector: string | HTMLElement;
+}
+
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
+  fundingSources: $ReadOnlyArray<FundingSources>,
 |};
 
 export type GetCallbackProps = {|

package/src/hosted-buttons/utils.js

@@ -17,6 +17,11 @@ import type {
   HostedButtonDetailsParams,
   OnApprove,
   RenderForm,
+  GetFlexDirectionArgs,
+  GetFlexDirection,
+  BuildButtonContainerArgs,
+  Color,
+  FundingSources,
 } from "./types";
 
 const entryPoint = "SDK";
@@ -30,9 +35,10 @@ const getHeaders = (accessToken?: string) => ({
 });
 
 export const getMerchantID = (): string | void => {
-  // The SDK supports mutiple merchant IDs, but hosted buttons only
-  // have one merchant id as a query parameter to the SDK script.
+  // The SDK supports Multi-Seller Payments (MSP, i.e sending multiple merchant IDs), but hosted buttons
+  // does not support this. Only one merchant id can be passed as a query parameter to the SDK script
   // https://github.com/paypal/paypal-sdk-client/blob/c58e35f8f7adbab76523eb25b9c10543449d2d29/src/script.js#L144
+  // https://developer.paypal.com/docs/multiparty/checkout/multiseller-payments/
   const merchantIds = getSDKMerchantID();
   if (merchantIds.length > 1) {
     throw new Error("Multiple merchant-ids are not supported.");
@@ -97,6 +103,14 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
   };
 };
 
+export function getElementFromSelector(
+  selector: string | HTMLElement
+): HTMLElement | null {
+  return typeof selector === "string"
+    ? document.querySelector(selector)
+    : selector;
+}
+
 /**
  * Attaches form fields (html) to the given selector, and
  * initializes window.__pp_form_fields (htmlScript).
@@ -107,8 +121,7 @@ export const renderForm: RenderForm = ({
   htmlScript,
   selector,
 }) => {
-  const elm =
-    typeof selector === "string" ? document.querySelector(selector) : selector;
+  const elm = getElementFromSelector(selector);
   if (elm) {
     elm.innerHTML = html + htmlScript;
     const newScriptEl = document.createElement("script");
@@ -225,3 +238,81 @@ export const buildHostedButtonOnApprove = ({
     });
   };
 };
+
+export function getFlexDirection({
+  layout,
+}: GetFlexDirectionArgs): GetFlexDirection {
+  return { flexDirection: layout === "horizontal" ? "row" : "column" };
+}
+
+export function getButtonColor(
+  color: Color,
+  fundingSource: FundingSources
+): Color {
+  const colorMap = {
+    gold: {
+      paypal: "gold",
+      venmo: "blue",
+      paylater: "gold",
+    },
+    blue: {
+      paypal: "blue",
+      venmo: "silver",
+      paylater: "blue",
+    },
+    black: {
+      paypal: "black",
+      venmo: "black",
+      paylater: "black",
+    },
+    white: {
+      paypal: "white",
+      venmo: "white",
+      paylater: "white",
+    },
+    silver: {
+      paypal: "silver",
+      venmo: "blue",
+      paylater: "silver",
+    },
+  };
+
+  return colorMap[color][fundingSource];
+}
+
+export function shouldRenderSDKButtons(
+  fundingSources: $ReadOnlyArray<FundingSources>
+): boolean {
+  return Boolean(fundingSources.length);
+}
+
+export function appendButtonContainer({
+  flexDirection,
+  selector,
+}: BuildButtonContainerArgs) {
+  const elm = getElementFromSelector(selector);
+
+  if (!elm) {
+    throw new Error("PayPal button container selector was not found");
+  }
+
+  const buttonContainer = document.createElement("div");
+
+  buttonContainer.setAttribute(
+    "style",
+    `display: flex; flex-wrap: nowrap; gap: 16px; max-width: 750px; flex-direction: ${flexDirection}`
+  );
+
+  const primaryButton = document.createElement("div");
+  primaryButton.setAttribute("id", `ncp-primary-button`);
+  primaryButton.setAttribute("style", "flex-grow: 1");
+
+  const secondaryButton = document.createElement("div");
+  secondaryButton.setAttribute("id", `ncp-secondary-button`);
+  secondaryButton.setAttribute("style", "flex-grow: 1");
+
+  buttonContainer.appendChild(primaryButton);
+  buttonContainer.appendChild(secondaryButton);
+
+  elm?.appendChild(buttonContainer);
+}

package/src/hosted-buttons/utils.test.js

@@ -8,6 +8,11 @@ import {
   buildHostedButtonOnApprove,
   createAccessToken,
   getHostedButtonDetails,
+  getFlexDirection,
+  getButtonColor,
+  shouldRenderSDKButtons,
+  appendButtonContainer,
+  getElementFromSelector,
 } from "./utils";
 
 vi.mock("@krakenjs/belter/src", async () => {
@@ -77,6 +82,7 @@ test("getHostedButtonDetails", async () => {
   );
   await getHostedButtonDetails({
     hostedButtonId,
+    fundingSources: [],
   }).then(({ style }) => {
     expect(style).toEqual({
       layout: "vertical",
@@ -309,4 +315,99 @@ describe("buildHostedButtonOnApprove", () => {
   });
 });
 
+test("getFlexDirection", () => {
+  expect(getFlexDirection({ layout: "horizontal" })).toStrictEqual({
+    flexDirection: "row",
+  });
+  expect(getFlexDirection({ layout: "vertical" })).toStrictEqual({
+    flexDirection: "column",
+  });
+});
+
+test("getButtonColor", () => {
+  const colors = ["gold", "blue", "silver", "white", "black"];
+  const fundingSources = ["paypal", "venmo", "paylater"];
+  const colorMap = {
+    gold: {
+      paypal: "gold",
+      venmo: "blue",
+      paylater: "gold",
+    },
+    blue: {
+      paypal: "blue",
+      venmo: "silver",
+      paylater: "blue",
+    },
+    black: {
+      paypal: "black",
+      venmo: "black",
+      paylater: "black",
+    },
+    white: {
+      paypal: "white",
+      venmo: "white",
+      paylater: "white",
+    },
+    silver: {
+      paypal: "silver",
+      venmo: "blue",
+      paylater: "silver",
+    },
+  };
+
+  colors.forEach((color) => {
+    fundingSources.forEach((fundingSource) => {
+      expect(getButtonColor(color, fundingSource)).toBe(
+        colorMap[color][fundingSource]
+      );
+    });
+  });
+});
+
+test("shouldRenderSDKButtons", () => {
+  expect(shouldRenderSDKButtons([])).toBe(false);
+  expect(shouldRenderSDKButtons(["paypal"])).toBe(true);
+  expect(shouldRenderSDKButtons(["paypal", "venmo"])).toBe(true);
+});
+
+test("buildButtonContainer", () => {
+  const containerId = "#container-id";
+  const selector = document.createElement("div");
+
+  selector.setAttribute("id", containerId.slice(1));
+
+  vi.spyOn(document, "querySelector").mockReturnValueOnce(selector);
+
+  expect(() =>
+    appendButtonContainer({ flexDirection: "row", selector: containerId })
+  ).not.toThrow();
+
+  expect(() =>
+    appendButtonContainer({ flexDirection: "row", selector })
+  ).not.toThrow();
+
+  expect(() =>
+    appendButtonContainer({
+      flexDirection: "row",
+      selector: `${containerId}-not-found`,
+    })
+  ).toThrow("PayPal button container selector was not found");
+});
+
+test("getElementFromSelector", () => {
+  const containerId = "#container-id";
+  const selector = document.createElement("div");
+
+  selector.setAttribute("id", containerId.slice(1));
+
+  const mockQuerySelector = vi
+    .spyOn(document, "querySelector")
+    .mockReturnValueOnce(selector);
+
+  expect(getElementFromSelector(containerId)).toBe(selector);
+  expect(getElementFromSelector(selector)).toBe(selector);
+  expect(mockQuerySelector).toBeCalledTimes(1);
+  expect(mockQuerySelector).toHaveBeenCalledWith(containerId);
+});
+
 /* eslint-enable no-restricted-globals, promise/no-native */