@paypal/checkout-components 5.0.287-alpha.19 → 5.0.287

package/__sdk__.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.287-alpha.19",
+  "version": "5.0.287",
   "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,6 +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/sdk-client": "^4.0.176",
     "@paypal/sdk-constants": "^1.0.133",
     "@paypal/sdk-logos": "^2.2.6"

package/src/connect/component.jsx

@@ -0,0 +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";
+
+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;
+
+  let loadResult = {};
+  try {
+    loadResult = await loadAxo({
+      platform: "PPCP",
+      btSdkVersion: "3.97.3-connect-alpha.6.1",
+      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);
+  }
+
+  try {
+    const connect = await window.braintree.connect.create({
+      ...loadResult.metadata, // returns a localeURL for assets
+      ...merchantProps, // AXO specific props
+      platformOptions: {
+        platform: "PPCP",
+        userIdToken,
+        clientID,
+        clientMetadataID: cmid,
+      },
+    });
+
+    sendCountMetric({
+      name: "pp.app.paypal_sdk.connect.init.success.count",
+      event: "success",
+      dimensions: {},
+    });
+
+    return connect;
+  } catch (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

@@ -0,0 +1,89 @@
+/* @flow */
+
+import {
+  getClientID,
+  getClientMetadataID,
+  getUserIDToken,
+} from "@paypal/sdk-client/src";
+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(),
+      },
+    };
+
+    loadAxo.mockResolvedValue({ metadata: mockAxoMetadata });
+  });
+
+  test("loadAxo and window.braintree.connect.create are called with proper data", async () => {
+    await getConnectComponent(mockProps);
+
+    expect(getClientID).toHaveBeenCalled();
+    expect(getClientMetadataID).toHaveBeenCalled();
+    expect(getUserIDToken).toHaveBeenCalled();
+    expect(loadAxo).toHaveBeenCalled();
+
+    expect(window.braintree.connect.create).toHaveBeenCalledWith({
+      ...mockAxoMetadata,
+      ...mockProps,
+      platformOptions: {
+        platform: "PPCP",
+        clientID: "mock-client-id",
+        clientMetadataID: "mock-cmid",
+        userIdToken: "mock-uid",
+      },
+    });
+    expect(sendCountMetric).toBeCalledTimes(2);
+  });
+
+  test("loadAxo failure is handled", async () => {
+    const errorMessage = "Something went wrong";
+    loadAxo.mockRejectedValue(errorMessage);
+
+    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);
+
+    await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
+      expectedError
+    );
+    expect(sendCountMetric).toBeCalledTimes(2);
+  });
+});

package/src/connect/interface.js

@@ -0,0 +1,16 @@
+/* eslint-disable flowtype/no-weak-types */
+/* @flow */
+// flow-disable
+
+import { getConnectComponent } from "./component";
+
+type ConnectComponent = (merchantProps: any) => ConnectComponent;
+// $FlowFixMe
+export const Connect: ConnectComponent = async (
+  merchantProps: any
+): ConnectComponent => {
+  // $FlowFixMe
+  return await getConnectComponent(merchantProps);
+};
+
+/* eslint-enable flowtype/no-weak-types */

package/src/connect/interface.test.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import { describe, expect, vi } from "vitest";
+
+import { getConnectComponent } from "./component";
+import { Connect } from "./interface";
+
+describe("interface.js", () => {
+  vi.mock("./component", () => {
+    return {
+      getConnectComponent: vi.fn(),
+    };
+  });
+  it("should call getConnectComponent with merchant props", async () => {
+    const merchantProps = { props: "someProps" };
+    await Connect(merchantProps);
+    expect(getConnectComponent).toBeCalledWith(merchantProps);
+  });
+});

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/interface/button.js

@@ -33,19 +33,11 @@ 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,12 +834,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
-      hostedButtonId: {
-        type: "string",
-        required: false,
-        queryParam: true,
-      },
-
       displayOnly: {
         type: "array",
         queryParam: true,

package/src/hosted-buttons/index.js

@@ -1,182 +0,0 @@
-/* @flow */
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-import { request, noop } from "@krakenjs/belter/src";
-import { getSDKHost, getClientID } from "@paypal/sdk-client/src";
-
-import { getButtonsComponent } from "../zoid/buttons";
-
-type HostedButtonsProps = {|
-  buttonType?: string,
-  hostedButtonId: string,
-  merchantId?: string,
-|};
-
-type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
-|};
-
-type HostedButtonDetailsParams = (HostedButtonsProps) => ZalgoPromise<{|
-  buttonType: string,
-  merchantId: 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>;
-
-export type HostedButtonsComponent =
-  (HostedButtonsProps) => HostedButtonsInstance;
-
-const getHeaders = () => ({
-  "PayPal-Entry-Point": "SDK",
-  "Content-Type": "application/json",
-  Authorization: `Basic ${btoa(getClientID())}`,
-});
-
-const nocodeApiUrl = `https://${getSDKHost()}/ncp/api`;
-const entryPoint = "SDK";
-
-const getButtonVariable = (variables: ButtonVariables, key: string): string =>
-  variables.find((variable) => variable.name === key)?.value ?? "";
-
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
-  hostedButtonId,
-}) => {
-  return request({
-    url: `${nocodeApiUrl}/form-fields/${hostedButtonId}`,
-    headers: getHeaders(),
-  }).then(({ body }) => {
-    const button_details = body.button_details;
-    return {
-      buttonType: getButtonVariable(
-        button_details.button_variables,
-        "button_type"
-      ),
-      merchantId: getButtonVariable(
-        button_details.button_variables,
-        "business"
-      ),
-      style: {
-        layout: getButtonVariable(button_details.button_variables, "layout"),
-        shape: getButtonVariable(button_details.button_variables, "shape"),
-        color: getButtonVariable(button_details.button_variables, "color"),
-        label: getButtonVariable(
-          button_details.button_variables,
-          "button_text"
-        ),
-      },
-      html: body.html,
-      htmlScript: body.html_script,
-    };
-  });
-};
-
-export const getHostedButtonCreateOrder = ({
-  buttonType,
-  hostedButtonId,
-  merchantId,
-}: HostedButtonsProps): CreateOrder => {
-  return (data) => {
-    const userInputs = window.__pp_form_fields?.getUserInputs?.() || {};
-    return request({
-      url: `${nocodeApiUrl}/create-order`,
-      headers: getHeaders(),
-      method: "POST",
-      body: JSON.stringify({
-        button_type: buttonType,
-        hosted_button_id: hostedButtonId,
-        merchant_id: merchantId,
-        entry_point: entryPoint,
-        funding_source: `PAY_WITH_${data.paymentSource.toUpperCase()}`,
-        ...userInputs,
-      }),
-    }).then(({ body }) => body.order_id);
-  };
-};
-
-export const getHostedButtonOnApprove = ({
-  buttonType,
-  hostedButtonId,
-  merchantId,
-}: HostedButtonsProps): OnApprove => {
-  return (data) => {
-    return request({
-      url: `${nocodeApiUrl}/capture-order`,
-      headers: getHeaders(),
-      method: "POST",
-      body: JSON.stringify({
-        button_type: buttonType,
-        hosted_button_id: hostedButtonId,
-        id: data.orderID,
-        merchant_id: merchantId,
-        entry_point: entryPoint,
-      }),
-    }).then(noop);
-  };
-};
-
-const renderForm = (selector, html, htmlScript) => {
-  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,
-  }: HostedButtonsProps): HostedButtonsInstance {
-    const Buttons = getButtonsComponent();
-    const render = (selector) => {
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ buttonType, style, html, htmlScript, merchantId }) => {
-          renderForm(selector, html, htmlScript);
-
-          // $FlowFixMe
-          Buttons({
-            style,
-            hostedButtonId,
-            onInit(data, actions) {
-              window.__pp_form_fields?.onInit?.(data, actions);
-            },
-            onClick(data, actions) {
-              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

@@ -1,146 +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 {
-  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",
-  };
-});
-
-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(({ merchantId, style }) => {
-      expect(merchantId).toBe("M1234567890");
-      expect(style).toEqual({
-        layout: "vertical",
-        shape: "rect",
-        color: "gold",
-        label: "paypal",
-      });
-    });
-    expect.assertions(2);
-  });
-
-  test("getHostedButtonCreateOrder", async () => {
-    const createOrder = getHostedButtonCreateOrder({
-      hostedButtonId: "B1234567890",
-      merchantId: "M1234567890",
-    });
-
-    // $FlowIssue
-    request.mockImplementationOnce(() =>
-      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({
-      hostedButtonId: "B1234567890",
-      merchantId: "M1234567890",
-    });
-
-    // $FlowIssue
-    request.mockImplementationOnce(() => ZalgoPromise.resolve({}));
-    await onApprove({ orderID: "EC-1234567890" });
-    expect(request).toHaveBeenCalledWith(
-      expect.objectContaining({
-        body: JSON.stringify({
-          hosted_button_id: "B1234567890",
-          id: "EC-1234567890",
-          merchant_id: "M1234567890",
-          entry_point: "SDK",
-        }),
-      })
-    );
-    expect.assertions(1);
-  });
-});