@paypal/checkout-components 5.0.292-alpha.11 → 5.0.293-alpha.11

package/package.json

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

package/src/api/api.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import { getPartnerAttributionID, getSessionID } from "@paypal/sdk-client/src";
-import { request } from "@krakenjs/belter/src";
+import { inlineMemoize, request } from "@krakenjs/belter/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import { HEADERS } from "../constants/api";
@@ -52,3 +52,16 @@ export function callRestAPI({
     return body;
   });
 }
+
+export function callMemoizedRestAPI({
+  accessToken,
+  method,
+  url,
+  data,
+}: RestAPIParams): ZalgoPromise<Object> {
+  return inlineMemoize(
+    callMemoizedRestAPI,
+    () => callRestAPI({ accessToken, method, url, data }),
+    [accessToken, method, url, JSON.stringify(data)]
+  );
+}

package/src/api/shopper-insights/{component.jsx → component.js}

@@ -17,7 +17,7 @@ import { FPTI_KEY } from "@paypal/sdk-constants/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { stringifyError } from "@krakenjs/belter/src";
 
-import { callRestAPI } from "../api";
+import { callMemoizedRestAPI } from "../api";
 import {
   ELIGIBLE_PAYMENT_METHODS,
   FPTI_TRANSITION,
@@ -134,7 +134,7 @@ export function getShopperInsightsComponent(): ShopperInsightsComponent {
       const requestPayload =
         createRecommendedPaymentMethodsRequestPayload(merchantPayload);
 
-      return callRestAPI({
+      return callMemoizedRestAPI({
         method: "POST",
         url: `${getPayPalAPIDomain()}/${ELIGIBLE_PAYMENT_METHODS}`,
         data: requestPayload,

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

@@ -2,8 +2,7 @@
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { getEnv, getBuyerCountry } from "@paypal/sdk-client/src";
 import { vi, describe, expect } from "vitest";
-
-import { callRestAPI } from "../api";
+import { request } from "@krakenjs/belter/src";
 
 import { getShopperInsightsComponent } from "./component";
 
@@ -25,23 +24,22 @@ vi.mock("@paypal/sdk-client/src", () => {
   };
 });
 
-vi.mock("../api", async () => {
-  const actual = await vi.importActual("../api");
+vi.mock("@krakenjs/belter/src", async () => {
+  const actual = await vi.importActual("@krakenjs/belter/src");
   return {
     ...actual,
-    callRestAPI: vi.fn(() =>
+    request: vi.fn(() =>
       ZalgoPromise.resolve({
-        eligible_methods: {
-          paypal: {
-            can_be_vaulted: true,
-            eligible_in_paypal_network: true,
-            recommended: true,
-            recommended_priority: 1,
-          },
-          venmo: {
-            can_be_vaulted: true,
-            eligible_in_paypal_network: true,
-            recommended: false,
+        status: 200,
+        headers: {},
+        body: {
+          eligible_methods: {
+            paypal: {
+              can_be_vaulted: false,
+              eligible_in_paypal_network: true,
+              recommended: true,
+              recommended_priority: 1,
+            },
           },
         },
       })
@@ -67,7 +65,7 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
         },
       });
 
-    expect(callRestAPI).toHaveBeenCalled();
+    expect(request).toHaveBeenCalled();
     expect(recommendedPaymentMethods).toEqual({
       isPayPalRecommended: true,
       isVenmoRecommended: false,
@@ -75,12 +73,79 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     expect.assertions(2);
   });
 
+  test("should get recommended payment methods from memoized request for the exact same payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const payload = {
+      customer: {
+        email: "email-1.0@test.com",
+        phone: {
+          countryCode: "1",
+          nationalNumber: "2345678901",
+        },
+      },
+    };
+    const response1 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods(payload);
+    expect(request).toHaveBeenCalled();
+    expect(request).toHaveBeenCalledTimes(1);
+    const response2 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods(payload);
+
+    expect(request).toHaveBeenCalled();
+    // This should not change as the payload is same
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(response1).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect(response2).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect.assertions(6);
+  });
+
+  test("should not get recommended payment methods from memoized request for a different payload", async () => {
+    const shopperInsightsComponent = getShopperInsightsComponent();
+    const response1 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods({
+        customer: {
+          email: "email-1.1@test.com",
+        },
+      });
+    expect(request).toHaveBeenCalled();
+    expect(request).toHaveBeenCalledTimes(1);
+    const response2 =
+      await shopperInsightsComponent.getRecommendedPaymentMethods({
+        customer: {
+          email: "email-1.2@test.com",
+        },
+      });
+
+    expect(request).toHaveBeenCalled();
+    // This must change to 2 as the payload is different
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(response1).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect(response2).toEqual({
+      isPayPalRecommended: true,
+      isVenmoRecommended: false,
+    });
+    expect.assertions(6);
+  });
+
   test("catch errors from the API", async () => {
     // $FlowFixMe
-    callRestAPI.mockImplementationOnce(() =>
-      ZalgoPromise.reject({
-        name: "ERROR",
-        message: "This is an API error",
+    request.mockImplementationOnce(() =>
+      ZalgoPromise.resolve({
+        status: 400,
+        headers: {},
+        body: {
+          name: "ERROR",
+          message: "This is an API error",
+        },
       })
     );
 
@@ -92,12 +157,16 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
           email: "email@test.com",
           phone: {
             countryCode: "1",
-            nationalNumber: "2345678901",
+            nationalNumber: "2345678905",
           },
         },
       })
-    ).rejects.toThrow("This is an API error");
-    expect(callRestAPI).toHaveBeenCalled();
+    ).rejects.toThrow(
+      new Error(
+        `https://api.paypal.com/v2/payments/find-eligible-methods returned status 400\n\n{"name":"ERROR","message":"This is an API error"}`
+      )
+    );
+    expect(request).toHaveBeenCalled();
     expect.assertions(2);
   });
 
@@ -105,22 +174,22 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email10@test.com",
         phone: {
           countryCode: "1",
-          nationalNumber: "2345678901",
+          nationalNumber: "2345678906",
         },
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.objectContaining({
-            email: "email@test.com",
+            email: "email10@test.com",
             phone: expect.objectContaining({
               country_code: "1",
-              national_number: "2345678901",
+              national_number: "2345678906",
             }),
           }),
         }),
@@ -132,15 +201,15 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email2@test.com",
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.objectContaining({
-            email: "email@test.com",
+            email: "email2@test.com",
           }),
         }),
       })
@@ -151,7 +220,7 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email5@test.com",
         phone: {
           countryCode: "1",
           nationalNumber: "2345678901",
@@ -159,9 +228,9 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.objectContaining({
             phone: expect.objectContaining({
               country_code: "1",
@@ -177,13 +246,13 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email6@test.com",
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           purchase_units: expect.arrayContaining([
             expect.objectContaining({
               amount: expect.objectContaining({
@@ -203,13 +272,13 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email7@test.com",
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.objectContaining({
             country_code: "US",
           }),
@@ -227,13 +296,13 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email9@test.com",
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.objectContaining({
             country_code: "US",
           }),
@@ -250,9 +319,9 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           customer: expect.not.objectContaining({
             country_code: expect.anything(),
           }),
@@ -265,13 +334,13 @@ describe("shopper insights component - getRecommendedPaymentMethods()", () => {
     const shopperInsightsComponent = getShopperInsightsComponent();
     await shopperInsightsComponent.getRecommendedPaymentMethods({
       customer: {
-        email: "email@test.com",
+        email: "email9@test.com",
       },
     });
 
-    expect(callRestAPI).toHaveBeenCalledWith(
+    expect(request).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: expect.objectContaining({
+        json: expect.objectContaining({
           preferences: expect.objectContaining({
             include_account_details: true,
           }),

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

@@ -1,13 +1,12 @@
 /* @flow */
 
-import type { LazyProtectedExport } from "../../types";
-import { protectedExport } from "../../lib";
+import type { LazyExport } from "../../types";
 
 import {
   getShopperInsightsComponent,
   type ShopperInsightsComponent,
 } from "./component";
 
-export const ShopperInsights: LazyProtectedExport<ShopperInsightsComponent> = {
-  __get__: () => protectedExport(getShopperInsightsComponent()),
+export const ShopperInsights: LazyExport<ShopperInsightsComponent> = {
+  __get__: () => getShopperInsightsComponent(),
 };

package/src/connect/component.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 import { loadAxo } from "@paypal/connect-loader-component";
-import { stringifyError, getCurrentScriptUID } from "@krakenjs/belter/src";
+import { stringifyError } from "@krakenjs/belter/src";
 import {
   getClientID,
   getClientMetadataID,
@@ -10,14 +10,47 @@ import {
   loadFraudnet,
   getCSPNonce,
   getDebug,
+  getSessionID,
 } 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
+
+export function getSdkVersion(version: string | null): string {
+  if (!version) {
+    return MIN_BT_VERSION;
+  }
+  const versionSplit = version.split(".");
+  const majorVersion = Number(versionSplit[0]);
+  const minorVersion = Number(versionSplit[1]);
+
+  if (
+    majorVersion < MIN_MAJOR_VERSION ||
+    (majorVersion === MIN_MAJOR_VERSION && minorVersion < MIN_MINOR_VERSION)
+  ) {
+    sendCountMetric({
+      name: "pp.app.paypal_sdk.connect.init.error.count",
+      event: "error",
+      dimensions: {
+        errorName: "braintree_version_not_supported_error",
+      },
+    });
+
+    throw new Error(
+      `The braintree version used does not support Connect. Please use version ${MIN_BT_VERSION} or above`
+    );
+  }
+
+  return version;
+}
+
 // $FlowFixMe
 export const getConnectComponent = async (merchantProps = {}) => {
-  const cmid = getClientMetadataID();
+  const cmid = getClientMetadataID() || getSessionID();
   const clientID = getClientID();
   const userIdToken = getUserIDToken();
   const env = getEnv();
@@ -25,7 +58,7 @@ export const getConnectComponent = async (merchantProps = {}) => {
 
   const { collect } = loadFraudnet({
     env,
-    clientMetadataID: cmid || getCurrentScriptUID(),
+    clientMetadataID: cmid,
     cspNonce,
     appName: "ppcp-sdk-connect",
     // queryStringParams = {}, // TODO: what do we need here in this case?
@@ -43,7 +76,7 @@ export const getConnectComponent = async (merchantProps = {}) => {
   try {
     loadResult = await loadAxo({
       platform: "PPCP",
-      btSdkVersion: "3.97.3-connect-alpha.6.1",
+      btSdkVersion: getSdkVersion(window?.braintree?.version ?? null),
       minified: !debugEnabled,
       metadata,
     });
@@ -78,6 +111,7 @@ export const getConnectComponent = async (merchantProps = {}) => {
         clientID,
         fraudnet: collect,
         clientMetadataId: cmid,
+        env,
       },
     });
     getLogger()

package/src/connect/component.test.js

@@ -8,7 +8,11 @@ import {
 import { loadAxo } from "@paypal/connect-loader-component";
 import { describe, expect, test, vi } from "vitest";
 
-import { getConnectComponent } from "./component";
+import {
+  getConnectComponent,
+  getSdkVersion,
+  MIN_BT_VERSION,
+} from "./component";
 import { sendCountMetric } from "./sendCountMetric";
 
 vi.mock("@paypal/sdk-client/src", () => {
@@ -72,6 +76,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         clientMetadataId: "mock-cmid",
         userIdToken: "mock-uid",
         fraudnet: expect.any(Function),
+        env: "mock-env",
       },
     });
     expect(sendCountMetric).toBeCalledTimes(2);
@@ -107,3 +112,32 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     });
   });
 });
+
+describe("getSdkVersion", () => {
+  test("returns minimum supported braintree version for AXO if input version is null", () => {
+    const version = getSdkVersion(null);
+
+    expect(version).toEqual(MIN_BT_VERSION);
+  });
+  test("returns the version passed if it is supported for AXO", () => {
+    const result1 = getSdkVersion("3.97.00");
+    const result2 = getSdkVersion("3.97.alpha-test");
+    const result3 = getSdkVersion("4.34.beta-test");
+    const result4 = getSdkVersion("4.34.47");
+
+    expect(result1).toEqual("3.97.00");
+    expect(result2).toEqual("3.97.alpha-test");
+    expect(result3).toEqual("4.34.beta-test");
+    expect(result4).toEqual("4.34.47");
+  });
+
+  test("throws error if the version passed is not supported for AXO and is not null", () => {
+    const result1 = getSdkVersion("3.96.00");
+    const result2 = getSdkVersion("2.87.alpha-test");
+    const result3 = getSdkVersion("3.34.beta-test");
+
+    expect(result1).toThrowError();
+    expect(result2).toThrowError();
+    expect(result3).toThrowError();
+  });
+});

package/src/hosted-buttons/types.js

@@ -36,7 +36,10 @@ export type CreateOrder = (data: {|
   paymentSource: string,
 |}) => ZalgoPromise<string>;
 
-export type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
+export type OnApprove = (data: {|
+  orderID: string,
+  paymentSource: string,
+|}) => ZalgoPromise<void>;
 
 export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
 

package/src/hosted-buttons/utils.js

@@ -1,8 +1,10 @@
 /* @flow */
 
-import { request, noop, memoize } from "@krakenjs/belter/src";
+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,
@@ -106,7 +108,9 @@ export const buildHostedButtonCreateOrder = ({
           merchant_id: merchantId,
           ...userInputs,
         }),
-      }).then(({ body }) => body.context_id);
+      }).then(({ body }) => {
+        return body.context_id;
+      });
     });
   };
 };
@@ -126,7 +130,15 @@ export const buildHostedButtonOnApprove = ({
           merchant_id: merchantId,
           context_id: data.orderID,
         }),
-      }).then(noop);
+      }).then(() => {
+        if (data.paymentSource === "card") {
+          const url = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
+          popup(url, {
+            width: DEFAULT_POPUP_SIZE.WIDTH,
+            height: DEFAULT_POPUP_SIZE.HEIGHT,
+          });
+        }
+      });
     });
   };
 };

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

@@ -107,7 +107,7 @@ test("buildHostedButtonOnApprove", async () => {
       body: {},
     })
   );
-  await onApprove({ orderID: "EC-1234567890" });
+  await onApprove({ orderID: "EC-1234567890", paymentSource: "paypal" });
   expect(request).toHaveBeenCalledWith(
     expect.objectContaining({
       body: JSON.stringify({

package/src/zoid/buttons/component.jsx

@@ -740,7 +740,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
       clientMetadataID: {
         type: "string",
         required: false,
-        default: getClientMetadataID,
+        default: () => {
+          const clientMetadataId = getClientMetadataID();
+          const sessionID = getSessionID();
+
+          return clientMetadataId || sessionID;
+        },
         queryParam: true,
       },