@paypal/checkout-components 5.0.297 → 5.0.299-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.297",
+  "version": "5.0.299-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -102,6 +102,7 @@
     "vitest": "^0.25.3"
   },
   "dependencies": {
+    "@krakenjs/beaver-logger": "^5.7.0",
     "@krakenjs/belter": "^2.0.0",
     "@krakenjs/cross-domain-utils": "^3.0.0",
     "@krakenjs/jsx-pragmatic": "^3",
@@ -111,8 +112,8 @@
     "@paypal/common-components": "^1.0.35",
     "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
-    "@paypal/sdk-client": "^4.0.180",
-    "@paypal/sdk-constants": "^1.0.133",
+    "@paypal/sdk-client": "^4.0.181",
+    "@paypal/sdk-constants": "^1.0.141",
     "@paypal/sdk-logos": "^2.2.6"
   },
   "lint-staged": {

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { sendCountMetric } from "@paypal/sdk-client/src";
+import { getLogger } from "@paypal/sdk-client/src";
 
 import {
   SHOPPER_INSIGHTS_METRIC_NAME,
@@ -21,9 +21,10 @@ export function validateMerchantConfig({
   userIDToken,
   clientToken,
 }: MerchantConfigParams) {
+  const logger = getLogger();
   if (!sdkToken) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",
@@ -37,8 +38,8 @@ export function validateMerchantConfig({
   }
 
   if (!pageType) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",
@@ -52,8 +53,8 @@ export function validateMerchantConfig({
   }
 
   if (userIDToken) {
-    sendCountMetric({
-      name: SHOPPER_INSIGHTS_METRIC_NAME,
+    logger.metricCounter({
+      namespace: SHOPPER_INSIGHTS_METRIC_NAME,
       event: "error",
       dimensions: {
         errorType: "merchant_configuration_validation_error",

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

@@ -5,7 +5,9 @@ import { validateMerchantConfig, validateMerchantPayload } from "./validation";
 
 vi.mock("@paypal/sdk-client/src", () => {
   return {
-    sendCountMetric: vi.fn(),
+    getLogger: () => ({
+      metricCounter: vi.fn().mockReturnThis(),
+    }),
   };
 });
 

package/src/connect/component.jsx

@@ -15,8 +15,6 @@ import {
 } from "@paypal/sdk-client/src";
 import { FPTI_KEY } from "@paypal/sdk-constants";
 
-import { sendCountMetric } from "./sendCountMetric";
-
 const MIN_MAJOR_VERSION = 3;
 const MIN_MINOR_VERSION = 97;
 export const MIN_BT_VERSION = `${MIN_MAJOR_VERSION}.${MIN_MINOR_VERSION}.3-connect-alpha.6.1`; // Minimum for supporting AXO
@@ -33,8 +31,8 @@ export function getSdkVersion(version: string | null): string {
     majorVersion < MIN_MAJOR_VERSION ||
     (majorVersion === MIN_MAJOR_VERSION && minorVersion < MIN_MINOR_VERSION)
   ) {
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.error.count",
+    getLogger().metricCounter({
+      namespace: "connect.init.count",
       event: "error",
       dimensions: {
         errorName: "braintree_version_not_supported_error",
@@ -42,7 +40,7 @@ export function getSdkVersion(version: string | null): string {
     });
 
     throw new Error(
-      `The braintree version used does not support Connect. Please use version ${MIN_BT_VERSION} or above`
+      `The braintree version: ${version} does not support Connect. Please use version ${MIN_BT_VERSION} or above`
     );
   }
 
@@ -65,9 +63,9 @@ export const getConnectComponent = async (merchantProps = {}) => {
     // queryStringParams = {}, // TODO: what do we need here in this case?
   });
 
-  sendCountMetric({
-    name: "pp.app.paypal_sdk.connect.init.count",
-    dimensions: {},
+  getLogger().metricCounter({
+    namespace: "connect.init.count",
+    event: "init",
   });
 
   const debugEnabled = getDebug() || false;
@@ -82,21 +80,20 @@ export const getConnectComponent = async (merchantProps = {}) => {
       metadata,
     });
   } catch (error) {
-    sendCountMetric({
-      name: "pp.app.paypal_sdk.connect.init.error.count",
-      event: "error",
-      dimensions: {
-        errorName: "connect_load_error",
-      },
-    });
-
     getLogger()
+      .error("load_connect_error", { err: stringifyError(error) })
       .track({
         [FPTI_KEY.CONTEXT_TYPE]: "CMID",
         [FPTI_KEY.CONTEXT_ID]: cmid,
         [FPTI_KEY.EVENT_NAME]: `ppcp_axo_failure`,
       })
-      .error("load_connect_error", { err: stringifyError(error) })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "error",
+        dimensions: {
+          errorName: "connect_load_error",
+        },
+      })
       .flush();
 
     throw new Error(error);
@@ -121,23 +118,14 @@ export const getConnectComponent = async (merchantProps = {}) => {
         [FPTI_KEY.CONTEXT_ID]: cmid,
         [FPTI_KEY.EVENT_NAME]: `ppcp_connect_success`,
       })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "success",
+      })
       .flush();
-    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()
       .track({
         [FPTI_KEY.CONTEXT_TYPE]: "CMID",
@@ -145,6 +133,13 @@ export const getConnectComponent = async (merchantProps = {}) => {
         [FPTI_KEY.EVENT_NAME]: `ppcp_connect_failure`,
       })
       .error("init_connect_error", { err: stringifyError(error) })
+      .metricCounter({
+        namespace: "connect.init.count",
+        event: "error",
+        dimensions: {
+          errorName: "connect_init_error",
+        },
+      })
       .flush();
 
     throw new Error(error);

package/src/connect/component.test.js

@@ -9,7 +9,6 @@ import {
   getSdkVersion,
   MIN_BT_VERSION,
 } from "./component";
-import { sendCountMetric } from "./sendCountMetric";
 
 vi.mock("@paypal/sdk-client/src", () => {
   return {
@@ -23,6 +22,7 @@ vi.mock("@paypal/sdk-client/src", () => {
       error: vi.fn().mockReturnThis(),
       track: vi.fn().mockReturnThis(),
       flush: vi.fn().mockReturnThis(),
+      metricCounter: vi.fn().mockReturnThis(),
     })),
     getEnv: vi.fn().mockReturnValue("mock-env"),
     getCSPNonce: vi.fn(),
@@ -36,15 +36,10 @@ vi.mock("@paypal/connect-loader-component", () => {
   };
 });
 
-vi.mock("./sendCountMetric", () => {
-  return {
-    sendCountMetric: vi.fn(),
-  };
-});
-
 describe("getConnectComponent: returns ConnectComponent", () => {
   const mockAxoMetadata = { someData: "data" };
   const mockProps = { someProp: "value" };
+
   beforeEach(() => {
     vi.clearAllMocks();
     window.braintree = {
@@ -76,7 +71,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         env: "mock-env",
       },
     });
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("uses sdk token if present", async () => {
@@ -99,7 +93,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         env: "mock-env",
       },
     });
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("loadAxo failure is handled", async () => {
@@ -109,7 +102,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
       errorMessage
     );
-    expect(sendCountMetric).toHaveBeenCalledTimes(2);
   });
 
   test("connect create failure is handled", async () => {
@@ -119,7 +111,6 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
       expectedError
     );
-    expect(sendCountMetric).toBeCalledTimes(2);
   });
 
   test("minified is set according to debug value", async () => {

package/src/constants/api.js

@@ -15,8 +15,7 @@ export const FPTI_TRANSITION = {
   SHOPPER_INSIGHTS_API_ERROR: "sdk_shopper_insights_recommended_error",
 };
 
-export const SHOPPER_INSIGHTS_METRIC_NAME =
-  "pp.app.paypal_sdk.api.shopper_insights.count";
+export const SHOPPER_INSIGHTS_METRIC_NAME = "shopper_insights.count";
 
 export type MerchantPayloadData = {|
   email?: string,

package/src/hosted-buttons/index.js

@@ -17,38 +17,40 @@ import type {
 
 export const getHostedButtonsComponent = (): HostedButtonsComponent => {
   function HostedButtons({
+    enableDPoP = false,
     hostedButtonId,
   }: HostedButtonsComponentProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
-    const render = (selector) => {
+    const render = async (selector) => {
       const merchantId = getMerchantID();
+      const { html, htmlScript, style } = await getHostedButtonDetails({
+        hostedButtonId,
+      });
 
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ html, htmlScript, style }) => {
-          const { onInit, onClick } = renderForm({
-            hostedButtonId,
-            html,
-            htmlScript,
-            selector,
-          });
+      const { onInit, onClick } = renderForm({
+        hostedButtonId,
+        html,
+        htmlScript,
+        selector,
+      });
 
-          // $FlowFixMe
-          Buttons({
-            hostedButtonId,
-            style,
-            onInit,
-            onClick,
-            createOrder: buildHostedButtonCreateOrder({
-              hostedButtonId,
-              merchantId,
-            }),
-            onApprove: buildHostedButtonOnApprove({
-              hostedButtonId,
-              merchantId,
-            }),
-          }).render(selector);
-        }
-      );
+      // $FlowFixMe
+      Buttons({
+        hostedButtonId,
+        style,
+        onInit,
+        onClick,
+        createOrder: buildHostedButtonCreateOrder({
+          enableDPoP,
+          hostedButtonId,
+          merchantId,
+        }),
+        onApprove: buildHostedButtonOnApprove({
+          enableDPoP,
+          hostedButtonId,
+          merchantId,
+        }),
+      }).render(selector);
     };
     return {
       render,

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

@@ -1,8 +1,8 @@
 /* @flow */
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 import { describe, test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
@@ -61,16 +61,17 @@ const getHostedButtonDetailsResponse = {
 };
 
 describe("HostedButtons", () => {
-  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", () => {
+  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", async () => {
     const Buttons = vi.fn(() => ({ render: vi.fn() }));
     // $FlowIssue
     getButtonsComponent.mockImplementationOnce(() => Buttons);
     const HostedButtons = getHostedButtonsComponent();
     // $FlowIssue
     request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse)
     );
-    HostedButtons({
+    await HostedButtons({
       hostedButtonId: "B1234567890",
     }).render("#example");
     expect(Buttons).toHaveBeenCalledWith(
@@ -81,3 +82,5 @@ describe("HostedButtons", () => {
     expect.assertions(1);
   });
 });
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -1,22 +1,22 @@
 /* @flow */
-
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
 |};
 
 export type GetCallbackProps = {|
+  enableDPoP?: boolean,
   hostedButtonId: string,
   merchantId?: string,
 |};
 
 export type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
+  render: (string | HTMLElement) => Promise<void>,
 |};
 
 export type HostedButtonDetailsParams =
-  (HostedButtonsComponentProps) => ZalgoPromise<{|
+  (HostedButtonsComponentProps) => Promise<{|
     html: string,
     htmlScript: string,
     style: {|
@@ -34,14 +34,17 @@ export type ButtonVariables = $ReadOnlyArray<{|
 
 export type CreateOrder = (data: {|
   paymentSource: string,
-|}) => ZalgoPromise<string | void>;
+|}) => Promise<string | void>;
 
 export type OnApprove = (data: {|
   orderID: string,
   paymentSource: string,
-|}) => ZalgoPromise<mixed>;
+|}) => Promise<mixed>;
 
-export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
+export type CreateAccessToken = ({|
+  clientId: string,
+  enableDPoP?: boolean,
+|}) => Promise<{| accessToken: string, nonce: string |}>;
 
 export type HostedButtonsComponent =
   (HostedButtonsComponentProps) => HostedButtonsInstance;
@@ -55,3 +58,22 @@ export type RenderForm = ({|
   onInit: (data: mixed, actions: mixed) => void,
   onClick: (data: mixed, actions: mixed) => void,
 |};
+
+type Request = {|
+  url: string,
+  headers: {|
+    [key: string]: string,
+    Authorization?: string,
+  |},
+  method: string,
+  body: string,
+|};
+
+type Response = {|
+  status: number,
+  headers: { [string]: string },
+  body: Object,
+|};
+
+export type RequestWithDPoP = (Request) => Response;
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/utils.js

@@ -2,6 +2,7 @@
 
 import { request, memoize } from "@krakenjs/belter/src";
 import {
+  buildDPoPHeaders,
   getSDKHost,
   getClientID,
   getMerchantID as getSDKMerchantID,
@@ -15,6 +16,7 @@ import type {
   HostedButtonDetailsParams,
   OnApprove,
   RenderForm,
+  RequestWithDPoP,
 } from "./types";
 
 const entryPoint = "SDK";
@@ -38,9 +40,43 @@ export const getMerchantID = (): string | void => {
   return merchantIds[0];
 };
 
+export const requestWithDPoP: RequestWithDPoP = async ({
+  url,
+  headers,
+  method,
+  body,
+}) => {
+  let accessToken, nonce;
+  if (!headers.Authorization?.match(/Basic/)) {
+    // eslint-disable-next-line no-use-before-define
+    const response = await createAccessToken({
+      clientId: getClientID(),
+    });
+    accessToken = response.accessToken;
+    nonce = response.nonce;
+  }
+  const DPoPHeaders = await buildDPoPHeaders({
+    method,
+    uri: url,
+    accessToken,
+    nonce,
+  });
+  // $FlowIssue request() returns ZalgoPromise
+  return request({
+    url,
+    method,
+    body,
+    headers: {
+      ...headers,
+      ...DPoPHeaders,
+    },
+  });
+};
+
 export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
-  (clientId) => {
-    return request({
+  async ({ clientId, enableDPoP }) => {
+    const requestFn = enableDPoP ? requestWithDPoP : request;
+    const response = await requestFn({
       url: `${apiUrl}/v1/oauth2/token`,
       method: "POST",
       body: "grant_type=client_credentials",
@@ -48,32 +84,40 @@ export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
         Authorization: `Basic ${btoa(clientId)}`,
         "Content-Type": "application/json",
       },
-    }).then((response) => response.body.access_token);
+    });
+    // $FlowIssue request returns ZalgoPromise
+    const { access_token: accessToken, nonce } = response.body;
+    return {
+      accessToken,
+      nonce,
+    };
   }
 );
 
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables?.find((variable) => variable.name === key)?.value ?? "";
 
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
+export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
   hostedButtonId,
 }) => {
-  return request({
+  const response = await 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,
-    };
   });
+
+  // $FlowIssue request returns ZalgoPromise
+  const { body } = response;
+  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,
+  };
 };
 
 /**
@@ -106,15 +150,21 @@ export const renderForm: RenderForm = ({
 };
 
 export const buildHostedButtonCreateOrder = ({
+  enableDPoP,
   hostedButtonId,
   merchantId,
 }: GetCallbackProps): CreateOrder => {
-  return (data) => {
+  return async (data) => {
     const userInputs =
       window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
     const onError = window[`__pp_form_fields_${hostedButtonId}`]?.onError;
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
+    const { accessToken } = await createAccessToken({
+      clientId: getClientID(),
+      enableDPoP,
+    });
+    try {
+      const requestFn = enableDPoP ? requestWithDPoP : request;
+      const response = await requestFn({
         url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
         headers: getHeaders(accessToken),
         method: "POST",
@@ -124,29 +174,36 @@ export const buildHostedButtonCreateOrder = ({
           merchant_id: merchantId,
           ...userInputs,
         }),
-      })
-        .then(({ body }) => body.context_id || onError(body.name))
-        .catch(() => onError("REQUEST_FAILED"));
-    });
+      });
+      // $FlowIssue request returns ZalgoPromise
+      const { body } = response;
+      return body.context_id || onError(body.name);
+    } catch (e) {
+      return onError("REQUEST_FAILED");
+    }
   };
 };
 
 export const buildHostedButtonOnApprove = ({
+  enableDPoP,
   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,
-        }),
-      });
+  return async (data) => {
+    const { accessToken } = await createAccessToken({
+      clientId: getClientID(),
+      enableDPoP,
+    });
+    const requestFn = enableDPoP ? requestWithDPoP : request;
+    return requestFn({
+      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,
+      }),
     });
   };
 };