@paypal/checkout-components 5.0.289-alpha.0 → 5.0.289-alpha.43

package/__sdk__.js

@@ -64,7 +64,7 @@ module.exports = {
   },
   connect: {
     entry: "./src/connect/interface",
-    globals
+    globals,
   },
   // @deprecated - renamed to payment-fields to be removed
   fields: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.289-alpha.0",
+  "version": "5.0.289-alpha.43",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -33,6 +33,7 @@
     "percy-screenshot": "npx playwright install && babel-node ./test/percy/server/createButtonConfigs.js && percy exec -- playwright test --config=./test/percy/playwright.config.js --reporter=dot --pass-with-no-tests",
     "typecheck": "npm run flow-typed && npm run flow",
     "version": "./scripts/version.sh",
+    "vitest": "vitest",
     "webpack": "babel-node $(npm bin)/webpack",
     "webpack-size": "npm run webpack -- --config webpack.config.size",
     "prepare": "husky install",
@@ -109,7 +110,7 @@
     "@krakenjs/zoid": "^10.3.1",
     "@paypal/common-components": "^1.0.35",
     "@paypal/funding-components": "^1.0.31",
-    "@paypal/connect-loader-component": "^1.1.0",
+    "@paypal/connect-loader-component": "1.1.1",
     "@paypal/sdk-client": "^4.0.176",
     "@paypal/sdk-constants": "^1.0.133",
     "@paypal/sdk-logos": "^2.2.6"

package/src/connect/component.jsx

@@ -1,48 +1,79 @@
 /* @flow */
 import { loadAxo } from "@paypal/connect-loader-component";
+import { stringifyError } from "@krakenjs/belter/src";
 import {
   getClientID,
   getClientMetadataID,
   getUserIDToken,
+  getLogger,
 } from "@paypal/sdk-client/src";
 
-// eslint-disable-next-line flowtype/no-weak-types
-export type ConnectComponent = any;
-// TODO: What's the expected structure/approach for this interface. It's not a zoid
-// scenario, so what do we return?
-// -> Looks like it returns a function that accepts the props
-// How do we define the input of merchant params here?
+import { sendCountMetric } from "./sendCountMetric";
+
 // $FlowFixMe
 export const getConnectComponent = async (merchantProps) => {
+  sendCountMetric({
+    name: "pp.app.paypal_sdk.connect.init.count",
+    dimensions: {},
+  });
+
   const cmid = getClientMetadataID();
   const clientID = getClientID();
   const userIdToken = getUserIDToken();
   const { metadata } = merchantProps;
-  // TODO: Sort out integration specifics for inputs
+
+  let loadResult = {};
   try {
-    const loadResult = await loadAxo({
+    loadResult = await loadAxo({
       platform: "PPCP",
       btSdkVersion: "3.97.3-connect-alpha.6.1",
-      minified: false,
+      minified: true,
       metadata,
     });
+  } catch (error) {
+    sendCountMetric({
+      name: "pp.app.paypal_sdk.connect.init.error.count",
+      event: "error",
+      dimensions: {
+        errorName: "connect_load_error",
+      },
+    });
+
+    getLogger().error("load_axo_error", { err: stringifyError(error) });
+
+    throw new Error(error);
+  }
 
-    // FPTI: sdkversion, fraudnet info
-    return await window.braintree.connect.create({
+  try {
+    const connect = await window.braintree.connect.create({
       ...loadResult.metadata, // returns a localeURL for assets
       ...merchantProps, // AXO specific props
       platformOptions: {
         platform: "PPCP",
-        userIdToken, // <merchant-specified-via-data-user-id-token>
-        clientID, // <merchant-specified-to-SDK-on-query-param>
-        clientMetadataID: cmid, // <merchant-specified-via-data-client-metadata-id>
-        fraudnet: () => {
-          return "";
-        }, // Pattern TBD
+        userIdToken,
+        clientID,
+        clientMetadataID: cmid,
       },
     });
+
+    sendCountMetric({
+      name: "pp.app.paypal_sdk.connect.init.success.count",
+      event: "success",
+      dimensions: {},
+    });
+
+    return connect;
   } catch (error) {
-    // FPTI Log here
-    return new Error(error);
+    sendCountMetric({
+      name: "pp.app.paypal_sdk.connect.init.error.count",
+      event: "error",
+      dimensions: {
+        errorName: "connect_init_error",
+      },
+    });
+
+    getLogger().error("init_axo_error", { err: stringifyError(error) });
+
+    throw new Error(error);
   }
 };

package/src/connect/component.test.js

@@ -9,36 +9,41 @@ import { loadAxo } from "@paypal/connect-loader-component";
 import { describe, expect, test, vi } from "vitest";
 
 import { getConnectComponent } from "./component";
+import { sendCountMetric } from "./sendCountMetric";
+
+vi.mock("@paypal/sdk-client/src", () => {
+  return {
+    getClientID: vi.fn(() => "mock-client-id"),
+    getClientMetadataID: vi.fn(() => "mock-cmid"),
+    getUserIDToken: vi.fn(() => "mock-uid"),
+    getLogger: vi.fn(() => ({ metric: vi.fn(), error: vi.fn() })),
+  };
+});
+
+vi.mock("@paypal/connect-loader-component", () => {
+  return {
+    loadAxo: vi.fn(),
+  };
+});
+
+vi.mock("./sendCountMetric", () => {
+  return {
+    sendCountMetric: vi.fn(),
+  };
+});
 
 describe("getConnectComponent: returns ConnectComponent", () => {
   const mockAxoMetadata = { someData: "data" };
   const mockProps = { someProp: "value" };
   beforeEach(() => {
+    vi.clearAllMocks();
     window.braintree = {
       connect: {
         create: vi.fn(),
       },
     };
 
-    vi.mock("@paypal/sdk-client/src", () => {
-      return {
-        getClientID: vi.fn(() => "mock-client-id"),
-        getClientMetadataID: vi.fn(() => "mock-cmid"),
-        getUserIDToken: vi.fn(() => "mock-uid"),
-      };
-    });
-
-    vi.mock("@paypal/connect-loader-component", () => {
-      return {
-        loadAxo: vi.fn(),
-      };
-    });
-
     loadAxo.mockResolvedValue({ metadata: mockAxoMetadata });
-
-    // getClientID.mockReturnValue("mock-client-id");
-    // getClientMetadataID.mockReturnValue("mock-cmid");
-    // getUserIDToken.mockReturnValue("mock-uid");
   });
 
   test("loadAxo and window.braintree.connect.create are called with proper data", async () => {
@@ -57,18 +62,28 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         clientID: "mock-client-id",
         clientMetadataID: "mock-cmid",
         userIdToken: "mock-uid",
-        fraudnet: expect.any(Function),
       },
     });
+    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("loadAxo failure is handled", async () => {
     const errorMessage = "Something went wrong";
     loadAxo.mockRejectedValue(errorMessage);
 
-    const error = await getConnectComponent(mockProps);
+    await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
+      errorMessage
+    );
+    expect(sendCountMetric).toHaveBeenCalledTimes(2);
+  });
+
+  test("connect create failure is handled", async () => {
+    const expectedError = "create failed";
+    window.braintree.connect.create.mockRejectedValue(expectedError);
 
-    expect(error).toBeInstanceOf(Error);
-    expect(error.message).toEqual(errorMessage);
+    await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
+      expectedError
+    );
+    expect(sendCountMetric).toBeCalledTimes(2);
   });
 });

package/src/connect/interface.js

@@ -2,11 +2,11 @@
 /* @flow */
 // flow-disable
 
-import { getConnectComponent, type ConnectComponent } from "./component";
+import { getConnectComponent } from "./component";
 
-type ConnectThing = (merchantProps: any) => ConnectComponent;
+type ConnectComponent = (merchantProps: any) => ConnectComponent;
 // $FlowFixMe
-export const Connect: ConnectThing = async (
+export const Connect: ConnectComponent = async (
   merchantProps: any
 ): ConnectComponent => {
   // $FlowFixMe

package/src/connect/sendCountMetric.js

@@ -0,0 +1,25 @@
+/* @flow */
+import { getLogger } from "@paypal/sdk-client/src";
+
+// TODO: This will be pulled in to a shared sdk-client util
+export const sendCountMetric = ({
+  dimensions,
+  event = "unused",
+  name,
+  value = 1,
+}: {|
+  event?: string,
+  name: string,
+  value?: number,
+  dimensions: {
+    [string]: mixed,
+  },
+  // $FlowIssue return type
+|}) =>
+  getLogger().metric({
+    dimensions,
+    metricEventName: event,
+    metricNamespace: name,
+    metricValue: value,
+    metricType: "counter",
+  });

package/src/hosted-buttons/index.js

@@ -0,0 +1,216 @@
+/* @flow */
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import { request, noop, memoize } from "@krakenjs/belter/src";
+import { getSDKHost, getClientID, getMerchantID } from "@paypal/sdk-client/src";
+
+import { getButtonsComponent } from "../zoid/buttons";
+
+type HostedButtonsComponentProps = {|
+  hostedButtonId: string,
+|};
+
+type GetCallbackProps = {|
+  buttonType: string,
+  hostedButtonId: string,
+  merchantId: string,
+|};
+
+type HostedButtonsInstance = {|
+  render: (string | HTMLElement) => void,
+|};
+
+type HostedButtonDetailsParams =
+  (HostedButtonsComponentProps) => ZalgoPromise<{|
+    buttonType: string,
+    html: string,
+    htmlScript: string,
+    style: {|
+      layout: string,
+      shape: string,
+      color: string,
+      label: string,
+    |},
+  |}>;
+
+type ButtonVariables = $ReadOnlyArray<{|
+  name: string,
+  value: string,
+|}>;
+
+type CreateOrder = (data: {| paymentSource: string |}) => ZalgoPromise<string>;
+
+type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
+
+type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
+
+export type HostedButtonsComponent =
+  (HostedButtonsComponentProps) => HostedButtonsInstance;
+
+const entryPoint = "SDK";
+const baseUrl = `https://${getSDKHost()}`;
+
+const getHeaders = (accessToken?: string) => ({
+  ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+  "Content-Type": "application/json",
+  "PayPal-Entry-Point": entryPoint,
+});
+
+const getButtonVariable = (variables: ButtonVariables, key: string): string =>
+  variables?.find((variable) => variable.name === key)?.value ?? "";
+
+const getFundingSource = (paymentSource) => {
+  if (paymentSource === "credit") {
+    return `PAY_WITH_PAYPAL_CREDIT`;
+  }
+  return `PAY_WITH_${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.button_variables;
+    return {
+      buttonType: getButtonVariable(variables, "button_type"),
+      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,
+    };
+  });
+};
+
+const createAccessToken = memoize<CreateAccessToken>((clientId) => {
+  return request({
+    url: `${baseUrl.replace("www", "api")}/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);
+});
+
+export const getHostedButtonCreateOrder = ({
+  buttonType,
+  hostedButtonId,
+  merchantId,
+}: GetCallbackProps): CreateOrder => {
+  return (data) => {
+    const userInputs = window.__pp_form_fields?.getUserInputs?.() || {};
+    return createAccessToken(getClientID()).then((accessToken) => {
+      return request({
+        url: `${baseUrl.replace("www", "api")}/v1/ncp/orders`,
+        headers: getHeaders(accessToken),
+        method: "POST",
+        body: JSON.stringify({
+          button_type: buttonType,
+          entry_point: entryPoint,
+          funding_source: getFundingSource(data.paymentSource),
+          hosted_button_id: hostedButtonId,
+          merchant_id: merchantId,
+          ...userInputs,
+        }),
+      }).then(({ body }) => body.order_id);
+    });
+  };
+};
+
+export const getHostedButtonOnApprove = ({
+  buttonType,
+  hostedButtonId,
+  merchantId,
+}: GetCallbackProps): OnApprove => {
+  return (data) => {
+    return createAccessToken(getClientID()).then((accessToken) => {
+      return request({
+        url: `${baseUrl.replace("www", "api")}/v1/ncp/orders/${
+          data.orderID
+        }/capture`,
+        headers: getHeaders(accessToken),
+        method: "POST",
+        body: JSON.stringify({
+          button_type: buttonType,
+          entry_point: entryPoint,
+          hosted_button_id: hostedButtonId,
+          merchant_id: merchantId,
+          id: data.orderID,
+        }),
+      }).then(noop);
+    });
+  };
+};
+
+/**
+ * Attaches form fields (html) to the given selector, and
+ * initializes window.__pp_form_fields (htmlScript).
+ */
+const renderForm = ({ 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);
+  }
+};
+
+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(
+        ({ buttonType, html, htmlScript, style }) => {
+          renderForm({ html, htmlScript, selector });
+
+          // $FlowFixMe
+          Buttons({
+            style,
+            hostedButtonId,
+            onInit(data, actions) {
+              // disable the button, listen for input changes,
+              // and enable the button when the form is valid
+              // using actions.disable() and actions.enable()
+              window.__pp_form_fields?.onInit?.(data, actions);
+            },
+            onClick(data, actions) {
+              // render form errors, if present
+              window.__pp_form_fields?.onClick?.(data, actions);
+            },
+            createOrder: getHostedButtonCreateOrder({
+              buttonType,
+              hostedButtonId,
+              merchantId,
+            }),
+            onApprove: getHostedButtonOnApprove({
+              buttonType,
+              hostedButtonId,
+              merchantId,
+            }),
+          }).render(selector);
+        }
+      );
+    };
+    return {
+      render,
+    };
+  }
+  return HostedButtons;
+};

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

@@ -0,0 +1,149 @@
+/* @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 {
+  getHostedButtonDetails,
+  getHostedButtonCreateOrder,
+  getHostedButtonOnApprove,
+  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: {
+      button_variables: [
+        {
+          name: "business",
+          value: "M1234567890",
+        },
+        {
+          name: "shape",
+          value: "rect",
+        },
+        {
+          name: "layout",
+          value: "vertical",
+        },
+        {
+          name: "color",
+          value: "gold",
+        },
+        {
+          name: "button_text",
+          value: "paypal",
+        },
+      ],
+    },
+  },
+};
+
+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).toHaveBeenCalled();
+    expect.assertions(1);
+  });
+
+  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("getHostedButtonCreateOrder", async () => {
+    const createOrder = getHostedButtonCreateOrder({
+      buttonType: "FIXED_PRICE",
+      hostedButtonId: "B1234567890",
+      merchantId: "M1234567890",
+    });
+
+    // $FlowIssue
+    request.mockImplementation(() =>
+      ZalgoPromise.resolve({
+        body: {
+          hosted_button_id: "B1234567890",
+          merchant_id: "M1234567890",
+          order_id: "EC-1234567890",
+          status: "PAYER_ACTION_REQUIRED",
+        },
+      })
+    );
+    const orderID = await createOrder({ paymentSource: "paypal" });
+    expect(orderID).toBe("EC-1234567890");
+    expect.assertions(1);
+  });
+
+  test("getHostedButtonOnApprove", async () => {
+    const onApprove = getHostedButtonOnApprove({
+      buttonType: "FIXED_PRICE",
+      hostedButtonId: "B1234567890",
+      merchantId: "M1234567890",
+    });
+
+    // $FlowIssue
+    request.mockImplementation(() => ZalgoPromise.resolve({}));
+    await onApprove({ orderID: "EC-1234567890" });
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: JSON.stringify({
+          button_type: "FIXED_PRICE",
+          entry_point: "SDK",
+          hosted_button_id: "B1234567890",
+          id: "EC-1234567890",
+          merchant_id: "M1234567890",
+        }),
+      })
+    );
+    expect.assertions(1);
+  });
+});

package/src/interface/button.js

@@ -33,11 +33,19 @@ import {
   getModalComponent,
   type ModalComponent,
 } from "../zoid/modal/component";
+import {
+  getHostedButtonsComponent,
+  type HostedButtonsComponent,
+} from "../hosted-buttons";
 
 export const Buttons: LazyExport<ButtonsComponent> = {
   __get__: () => getButtonsComponent(),
 };
 
+export const HostedButtons: LazyExport<HostedButtonsComponent> = {
+  __get__: () => getHostedButtonsComponent(),
+};
+
 export const Checkout: LazyProtectedExport<CheckoutComponent> = {
   __get__: () => protectedExport(getCheckoutComponent()),
 };

package/src/zoid/buttons/component.jsx

@@ -834,6 +834,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
+      hostedButtonId: {
+        type: "string",
+        required: false,
+        queryParam: true,
+      },
+
       displayOnly: {
         type: "array",
         queryParam: true,