@paypal/checkout-components 5.0.294-alpha.0 → 5.0.294

package/__sdk__.js

@@ -86,8 +86,4 @@ module.exports = {
     entry: "./src/interface/card-fields",
     globals,
   },
-  "hosted-buttons": {
-    entry: "./src/interface/hosted-buttons",
-    globals,
-  },
 };

package/package.json

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

package/src/api/shopper-insights/component.js

@@ -125,10 +125,9 @@ export function getShopperInsightsComponent(): ShopperInsightsComponent {
     [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_INIT,
   });
 
-  validateMerchantConfig({ sdkToken, pageType, userIDToken, clientToken });
-
   const shopperInsights = {
     getRecommendedPaymentMethods: (merchantPayload) => {
+      validateMerchantConfig({ sdkToken, pageType, userIDToken, clientToken });
       validateMerchantPayload(merchantPayload);
 
       const requestPayload =

package/src/api/shopper-insights/component.test.js

@@ -1,9 +1,11 @@
 /* @flow */
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-import { getEnv, getBuyerCountry } from "@paypal/sdk-client/src";
+import { getEnv, getBuyerCountry, getSDKToken } from "@paypal/sdk-client/src";
 import { vi, describe, expect } from "vitest";
 import { request } from "@krakenjs/belter/src";
 
+import { ValidationError } from "../../lib";
+
 import { getShopperInsightsComponent } from "./component";
 
 vi.mock("@paypal/sdk-client/src", () => {
@@ -348,4 +350,27 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
       })
     );
   });
+
+  test("ensure sdk-token is passed when using the getRecommendedPaymentMethods", async () => {
+    // $FlowFixMe
+    getSDKToken.mockImplementationOnce(() => undefined);
+    // $FlowFixMe
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const error = new ValidationError(
+      `script data attribute sdk-client-token is required but was not passed`
+    );
+    await expect(
+      async () =>
+        await shopperInsightsComponent.getRecommendedPaymentMethods({
+          customer: {
+            email: "email@test.com",
+            phone: {
+              countryCode: "1",
+              nationalNumber: "2345678905",
+            },
+          },
+        })
+    ).rejects.toThrowError(error);
+    expect.assertions(1);
+  });
 });

package/src/connect/component.jsx

@@ -51,7 +51,7 @@ export function getSdkVersion(version: string | null): string {
 // $FlowFixMe
 export const getConnectComponent = async (merchantProps = {}) => {
   const cmid = getClientMetadataID() || getSessionID();
-  const clientID = getClientID();
+  const clientId = getClientID();
   const userIdToken = getUserIDToken();
   const env = getEnv();
   const cspNonce = getCSPNonce();
@@ -108,7 +108,7 @@ export const getConnectComponent = async (merchantProps = {}) => {
       platformOptions: {
         platform: "PPCP",
         userIdToken,
-        clientID,
+        clientId,
         fraudnet: collect,
         clientMetadataId: cmid,
         env,

package/src/ui/buttons/props.js

@@ -521,7 +521,6 @@ export type ButtonProps = {|
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
   createVaultSetupToken: CreateVaultSetupToken,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
-  hostedButtonId?: string,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type

package/src/zoid/buttons/component.jsx

@@ -158,13 +158,8 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         <PrerenderedButtons
           nonce={props.nonce}
           props={props}
-          onRenderCheckout={({ win, fundingSource, card, hostedButtonId }) => {
-            state.prerenderDetails = {
-              win,
-              fundingSource,
-              card,
-              hostedButtonId,
-            };
+          onRenderCheckout={({ win, fundingSource, card }) => {
+            state.prerenderDetails = { win, fundingSource, card };
           }}
         />
       ).render(dom({ doc }));
@@ -854,11 +849,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
-      hostedButtonId: {
-        type: "string",
-        required: false,
-      },
-
       displayOnly: {
         type: "array",
         queryParam: true,

package/src/zoid/buttons/prerender.jsx

@@ -27,7 +27,6 @@ type PrerenderedButtonsProps = {|
     win?: CrossDomainWindowType,
     fundingSource: $Values<typeof FUNDING>,
     card: ?$Values<typeof CARD>,
-    hostedButtonId?: string,
   |}) => void,
 |};
 
@@ -78,12 +77,7 @@ export function PrerenderedButtons({
 
       writeElementToWindow(win, spinner);
 
-      onRenderCheckout({
-        win,
-        fundingSource,
-        card,
-        hostedButtonId: props.hostedButtonId,
-      });
+      onRenderCheckout({ win, fundingSource, card });
     } else {
       onRenderCheckout({ fundingSource, card });
     }

package/src/zoid/checkout/component.jsx

@@ -317,11 +317,6 @@ export function getCheckoutComponent(): CheckoutComponent {
           queryParam: true,
           required: false,
         },
-
-        hostedButtonId: {
-          type: "string",
-          required: false,
-        },
       },
 
       dimensions: ({ props }) => {

package/src/hosted-buttons/index.js

@@ -1,62 +0,0 @@
-/* @flow */
-
-import { getMerchantID } from "@paypal/sdk-client/src";
-
-import { getButtonsComponent } from "../zoid/buttons";
-
-import {
-  buildHostedButtonCreateOrder,
-  buildHostedButtonOnApprove,
-  getHostedButtonDetails,
-  renderForm,
-} from "./utils";
-import type {
-  HostedButtonsComponent,
-  HostedButtonsComponentProps,
-  HostedButtonsInstance,
-} from "./types";
-
-export const getHostedButtonsComponent = (): HostedButtonsComponent => {
-  function HostedButtons({
-    hostedButtonId,
-  }: HostedButtonsComponentProps): HostedButtonsInstance {
-    const Buttons = getButtonsComponent();
-    const render = (selector) => {
-      // The SDK supports mutiple merchant IDs, but hosted buttons only
-      // have one merchant id as a query parameter to the SDK script.
-      // https://github.com/paypal/paypal-sdk-client/blob/c58e35f8f7adbab76523eb25b9c10543449d2d29/src/script.js#L144
-      const merchantId = getMerchantID()[0];
-
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ html, htmlScript, style }) => {
-          const { onInit, onClick } = renderForm({
-            hostedButtonId,
-            html,
-            htmlScript,
-            selector,
-          });
-
-          // $FlowFixMe
-          Buttons({
-            hostedButtonId,
-            style,
-            onInit,
-            onClick,
-            createOrder: buildHostedButtonCreateOrder({
-              hostedButtonId,
-              merchantId,
-            }),
-            onApprove: buildHostedButtonOnApprove({
-              hostedButtonId,
-              merchantId,
-            }),
-          }).render(selector);
-        }
-      );
-    };
-    return {
-      render,
-    };
-  }
-  return HostedButtons;
-};

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

@@ -1,84 +0,0 @@
-/* @flow */
-
-import { describe, test, expect, vi } from "vitest";
-import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise";
-
-import { getButtonsComponent } from "../zoid/buttons";
-
-import { getHostedButtonsComponent } from ".";
-
-vi.mock("@krakenjs/belter/src", async () => {
-  return {
-    ...(await vi.importActual("@krakenjs/belter/src")),
-    request: vi.fn(),
-  };
-});
-
-vi.mock("@paypal/sdk-client/src", async () => {
-  return {
-    ...(await vi.importActual("@paypal/sdk-client/src")),
-    getSDKHost: () => "example.com",
-    getClientID: () => "client_id_123",
-    getMerchantID: () => ["merchant_id_123"],
-  };
-});
-
-vi.mock("../zoid/buttons", async () => {
-  return {
-    ...(await vi.importActual("../zoid/buttons")),
-    getButtonsComponent: vi.fn(),
-  };
-});
-
-const getHostedButtonDetailsResponse = {
-  body: {
-    button_details: {
-      link_variables: [
-        {
-          name: "shape",
-          value: "rect",
-        },
-        {
-          name: "layout",
-          value: "vertical",
-        },
-        {
-          name: "color",
-          value: "gold",
-        },
-        {
-          name: "button_text",
-          value: "paypal",
-        },
-        {
-          name: "button_type",
-          value: "FIXED_PRICE",
-        },
-      ],
-    },
-  },
-};
-
-describe("HostedButtons", () => {
-  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", () => {
-    const Buttons = vi.fn(() => ({ render: vi.fn() }));
-    // $FlowIssue
-    getButtonsComponent.mockImplementationOnce(() => Buttons);
-    const HostedButtons = getHostedButtonsComponent();
-    // $FlowIssue
-    request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
-    );
-    HostedButtons({
-      hostedButtonId: "B1234567890",
-    }).render("#example");
-    expect(Buttons).toHaveBeenCalledWith(
-      expect.objectContaining({
-        hostedButtonId: "B1234567890",
-        hostedButtonType: "NO_CODE_FIXED_PRICE",
-      })
-    );
-    expect.assertions(1);
-  });
-});

package/src/hosted-buttons/types.js

@@ -1,57 +0,0 @@
-/* @flow */
-
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-
-export type HostedButtonsComponentProps = {|
-  hostedButtonId: string,
-|};
-
-export type GetCallbackProps = {|
-  hostedButtonId: string,
-  merchantId: string,
-|};
-
-export type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
-|};
-
-export type HostedButtonDetailsParams =
-  (HostedButtonsComponentProps) => ZalgoPromise<{|
-    html: string,
-    htmlScript: string,
-    style: {|
-      layout: string,
-      shape: string,
-      color: string,
-      label: string,
-    |},
-  |}>;
-
-export type ButtonVariables = $ReadOnlyArray<{|
-  name: string,
-  value: string,
-|}>;
-
-export type CreateOrder = (data: {|
-  paymentSource: string,
-|}) => ZalgoPromise<string>;
-
-export type OnApprove = (data: {|
-  orderID: string,
-  paymentSource: string,
-|}) => ZalgoPromise<mixed>;
-
-export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
-
-export type HostedButtonsComponent =
-  (HostedButtonsComponentProps) => HostedButtonsInstance;
-
-export type RenderForm = ({|
-  hostedButtonId: string,
-  html: string,
-  htmlScript: string,
-  selector: string | HTMLElement,
-|}) => {|
-  onInit: (data: mixed, actions: mixed) => void,
-  onClick: (data: mixed, actions: mixed) => void,
-|};

package/src/hosted-buttons/utils.js

@@ -1,157 +0,0 @@
-/* @flow */
-
-import { request, memoize, popup } from "@krakenjs/belter/src";
-import { getSDKHost, getClientID } from "@paypal/sdk-client/src";
-
-import { DEFAULT_POPUP_SIZE } from "../zoid/checkout";
-
-import type {
-  ButtonVariables,
-  CreateAccessToken,
-  CreateOrder,
-  GetCallbackProps,
-  HostedButtonDetailsParams,
-  OnApprove,
-  RenderForm,
-} from "./types";
-
-const entryPoint = "SDK";
-const baseUrl = `https://${getSDKHost()}`;
-const apiUrl = baseUrl.replace("www", "api");
-
-const getHeaders = (accessToken?: string) => ({
-  ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
-  "Content-Type": "application/json",
-  "PayPal-Entry-Point": entryPoint,
-});
-
-export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
-  (clientId) => {
-    return request({
-      url: `${apiUrl}/v1/oauth2/token`,
-      method: "POST",
-      body: "grant_type=client_credentials",
-      headers: {
-        Authorization: `Basic ${btoa(clientId)}`,
-        "Content-Type": "application/json",
-      },
-    }).then((response) => response.body.access_token);
-  }
-);
-
-const getButtonVariable = (variables: ButtonVariables, key: string): string =>
-  variables?.find((variable) => variable.name === key)?.value ?? "";
-
-const getFundingSource = (paymentSource) => {
-  if (paymentSource === "credit") {
-    return `CARD`;
-  }
-  return paymentSource.toUpperCase();
-};
-
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
-  hostedButtonId,
-}) => {
-  return request({
-    url: `${baseUrl}/ncp/api/form-fields/${hostedButtonId}`,
-    headers: getHeaders(),
-  }).then(({ body }) => {
-    const variables = body.button_details.link_variables;
-    return {
-      style: {
-        layout: getButtonVariable(variables, "layout"),
-        shape: getButtonVariable(variables, "shape"),
-        color: getButtonVariable(variables, "color"),
-        label: getButtonVariable(variables, "button_text"),
-      },
-      html: body.html,
-      htmlScript: body.html_script,
-    };
-  });
-};
-
-/**
- * Attaches form fields (html) to the given selector, and
- * initializes window.__pp_form_fields (htmlScript).
- */
-export const renderForm: RenderForm = ({
-  hostedButtonId,
-  html,
-  htmlScript,
-  selector,
-}) => {
-  const elm =
-    typeof selector === "string" ? document.querySelector(selector) : selector;
-  if (elm) {
-    elm.innerHTML = html + htmlScript;
-    const newScriptEl = document.createElement("script");
-    const oldScriptEl = elm.querySelector("script");
-    newScriptEl.innerHTML = oldScriptEl?.innerHTML ?? "";
-    oldScriptEl?.parentNode?.replaceChild(newScriptEl, oldScriptEl);
-  }
-  return {
-    // disable the button, listen for input changes,
-    // and enable the button when the form is valid
-    // using actions.disable() and actions.enable()
-    onInit: window[`__pp_form_fields_${hostedButtonId}`]?.onInit,
-    // render form errors, if present
-    onClick: window[`__pp_form_fields_${hostedButtonId}`]?.onClick,
-  };
-};
-
-export const buildHostedButtonCreateOrder = ({
-  hostedButtonId,
-  merchantId,
-}: GetCallbackProps): CreateOrder => {
-  return (data) => {
-    const userInputs =
-      window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          entry_point: entryPoint,
-          funding_source: getFundingSource(data.paymentSource),
-          merchant_id: merchantId,
-          ...userInputs,
-        }),
-      }).then(({ body }) => {
-        return body.context_id;
-      });
-    });
-  };
-};
-
-export const buildHostedButtonOnApprove = ({
-  hostedButtonId,
-  merchantId,
-}: GetCallbackProps): OnApprove => {
-  return (data) => {
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          entry_point: entryPoint,
-          merchant_id: merchantId,
-          context_id: data.orderID,
-        }),
-      }).then((response) => {
-        // The "Debit or Credit Card" button does not open a popup
-        // so we need to open a new popup for buyers who complete
-        // a checkout via "Debit or Credit Card".
-        if (data.paymentSource === "card") {
-          const url = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
-          popup(url, {
-            width: DEFAULT_POPUP_SIZE.WIDTH,
-            height: DEFAULT_POPUP_SIZE.HEIGHT,
-          });
-        }
-        return response;
-      });
-    });
-  };
-};

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

@@ -1,121 +0,0 @@
-/* @flow */
-
-import { test, expect, vi } from "vitest";
-import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-
-import {
-  getHostedButtonDetails,
-  buildHostedButtonCreateOrder,
-  buildHostedButtonOnApprove,
-} from "./utils";
-
-vi.mock("@krakenjs/belter/src", async () => {
-  return {
-    ...(await vi.importActual("@krakenjs/belter/src")),
-    request: vi.fn(),
-  };
-});
-
-vi.mock("@paypal/sdk-client/src", async () => {
-  return {
-    ...(await vi.importActual("@paypal/sdk-client/src")),
-    getSDKHost: () => "example.com",
-    getClientID: () => "client_id_123",
-    getMerchantID: () => ["merchant_id_123"],
-  };
-});
-
-const getHostedButtonDetailsResponse = {
-  body: {
-    button_details: {
-      link_variables: [
-        {
-          name: "business",
-          value: "M1234567890",
-        },
-        {
-          name: "shape",
-          value: "rect",
-        },
-        {
-          name: "layout",
-          value: "vertical",
-        },
-        {
-          name: "color",
-          value: "gold",
-        },
-        {
-          name: "button_text",
-          value: "paypal",
-        },
-      ],
-    },
-  },
-};
-
-test("getHostedButtonDetails", async () => {
-  // $FlowIssue
-  request.mockImplementationOnce(() =>
-    ZalgoPromise.resolve(getHostedButtonDetailsResponse)
-  );
-  await getHostedButtonDetails({
-    hostedButtonId: "B1234567890",
-  }).then(({ style }) => {
-    expect(style).toEqual({
-      layout: "vertical",
-      shape: "rect",
-      color: "gold",
-      label: "paypal",
-    });
-  });
-  expect.assertions(1);
-});
-
-test("buildHostedButtonCreateOrder", async () => {
-  const createOrder = buildHostedButtonCreateOrder({
-    hostedButtonId: "B1234567890",
-    merchantId: "M1234567890",
-  });
-
-  // $FlowIssue
-  request.mockImplementation(() =>
-    ZalgoPromise.resolve({
-      body: {
-        link_id: "B1234567890",
-        merchant_id: "M1234567890",
-        context_id: "EC-1234567890",
-        status: "CREATED",
-      },
-    })
-  );
-  const orderID = await createOrder({ paymentSource: "paypal" });
-  expect(orderID).toBe("EC-1234567890");
-  expect.assertions(1);
-});
-
-test("buildHostedButtonOnApprove", async () => {
-  const onApprove = buildHostedButtonOnApprove({
-    hostedButtonId: "B1234567890",
-    merchantId: "M1234567890",
-  });
-
-  // $FlowIssue
-  request.mockImplementation(() =>
-    ZalgoPromise.resolve({
-      body: {},
-    })
-  );
-  await onApprove({ orderID: "EC-1234567890", paymentSource: "paypal" });
-  expect(request).toHaveBeenCalledWith(
-    expect.objectContaining({
-      body: JSON.stringify({
-        entry_point: "SDK",
-        merchant_id: "M1234567890",
-        context_id: "EC-1234567890",
-      }),
-    })
-  );
-  expect.assertions(1);
-});

package/src/interface/hosted-buttons.js

@@ -1,29 +0,0 @@
-/* @flow */
-
-import { getHostedButtonsComponent } from "../hosted-buttons";
-import type { HostedButtonsComponent } from "../hosted-buttons/types";
-import { getButtonsComponent } from "../zoid/buttons";
-import {
-  getCardFormComponent,
-  type CardFormComponent,
-} from "../zoid/card-form";
-import { getCheckoutComponent, type CheckoutComponent } from "../zoid/checkout";
-import type { LazyExport, LazyProtectedExport } from "../types";
-import { protectedExport } from "../lib";
-
-export const HostedButtons: LazyExport<HostedButtonsComponent> = {
-  __get__: () => getHostedButtonsComponent(),
-};
-
-export const Checkout: LazyProtectedExport<CheckoutComponent> = {
-  __get__: () => protectedExport(getCheckoutComponent()),
-};
-
-export const CardForm: LazyProtectedExport<CardFormComponent> = {
-  __get__: () => protectedExport(getCardFormComponent()),
-};
-
-export function setup() {
-  getButtonsComponent();
-  getCheckoutComponent();
-}