@paypal/checkout-components 5.0.347 → 5.0.348

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.347",
+  "version": "5.0.348",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server -- --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open /index.htm --https --hot=false --static './demo/dev'",
+    "dev": "npm run check-node-version && babel-node ./node_modules/.bin/webpack-dev-server -- --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open /index.htm --https --hot=false --static './demo/dev'",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",
@@ -21,7 +21,7 @@
     "jest-e2e": "rm -f ./test/e2e/screenshots/*.png && jest test/e2e",
     "jest-screenshot": "jest test/screenshot --env=node --no-cache",
     "jest-ssr": "jest test/ssr --env=node --no-cache --collectCoverage --collectCoverageFrom='src/' --coverageDirectory='coverage/jest'",
-    "karma": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start",
+    "karma": "cross-env NODE_ENV=test babel-node ./node_modules/.bin/karma start",
     "lint": "eslint --ext .js --ext .jsx src/ test/ *.js",
     "postversion": "./scripts/postversion.sh",
     "preversion": "./scripts/preversion.sh",
@@ -34,11 +34,15 @@
     "typecheck": "npm run flow",
     "version": "./scripts/version.sh",
     "vitest": "vitest",
-    "webpack": "babel-node $(npm bin)/webpack --",
+    "webpack": "babel-node ./node_modules/.bin/webpack --",
     "webpack-size": "npm run webpack -- --config webpack.config.size",
     "prepare": "husky install",
     "screenshot-server": "babel-node ./test/percy/server/index.js"
   },
+  "engines": {
+    "node": "^18",
+    "npm": "8"
+  },
   "files": [
     "src/",
     "dist/",

package/src/funding/venmo/config.jsx

@@ -23,19 +23,20 @@ export function getVenmoConfig(): FundingSourceConfig {
 
     eligible: ({ experiment, shippingChange, displayOnly, flow }) => {
       /**
-       * This could probably be removed if the enableVenmo experiment is
-       * rolled out to 100%.
+       * enableVenmo checks native browser compatibility and ramp
+       * ignore above compatibility if forcing to web
        */
-      if (experiment && experiment.enableVenmo === false) {
+      if (
+        experiment &&
+        experiment.enableVenmo === false &&
+        experiment.venmoWebEnabled !== true &&
+        experiment.venmoEnableWebOnNonNativeBrowser !== true
+      ) {
         return false;
       }
 
       /**
        * Shipping callbacks will not work with Venmo unless venmo web is enabled.
-       *
-       * Note that this could cause the Venmo button to not show up on first render
-       * if a merchant passes a shipping callback but does not have a client ID
-       * that has Venmo Web enabled.
        */
       if (!experiment?.venmoWebEnabled && shippingChange) {
         return false;
@@ -62,7 +63,8 @@ export function getVenmoConfig(): FundingSourceConfig {
       if (
         platform === PLATFORM.MOBILE &&
         experiment &&
-        experiment.venmoWebEnabled === false
+        experiment.venmoWebEnabled !== true &&
+        experiment.venmoEnableWebOnNonNativeBrowser !== true
       ) {
         return {
           native: true,

package/src/funding/venmo/config.test.js

@@ -13,6 +13,7 @@ describe("Venmo eligibility", () => {
     fundingEligibility: {},
     experiment: {
       venmoWebEnabled: true,
+      venmoEnableWebOnNonNativeBrowser: true,
     },
     wallet: expect.any,
     flow: BUTTON_FLOW.PURCHASE,
@@ -74,7 +75,7 @@ describe("Venmo eligibility", () => {
     expect(isVenmoEligible).toEqual(true);
   });
 
-  test("should not be eligible if a shipping callback is passed & experiment does not include venmoWebEnabled", () => {
+  test("should not be eligible if a shipping callback is passed & experiment does not include venmoWebEnabled or venmoEnableWebOnNonNativeBrowser", () => {
     const isVenmoEligible = venmoConfig.eligible?.({
       ...baseEligibilityProps,
       experiment: {},
@@ -84,7 +85,7 @@ describe("Venmo eligibility", () => {
     expect(isVenmoEligible).toEqual(false);
   });
 
-  test("should be eligible if shipping callback exists & experiment includes venmoWebEnabled", () => {
+  test("should be eligible if shipping callback exists & experiment includes venmoWebEnabled or venmoEnableWebOnNonNativeBrowser", () => {
     const isVenmoEligible = venmoConfig.eligible?.({
       ...baseEligibilityProps,
       shippingChange: true,

package/src/lib/appSwitchResume.js

@@ -1,5 +1,6 @@
 /* @flow */
 import { FUNDING } from "@paypal/sdk-constants/src";
+import { parseQuery } from "@krakenjs/belter/src";
 
 import { APP_SWITCH_RETURN_HASH } from "../constants";
 
@@ -16,46 +17,47 @@ export type AppSwitchResumeParams = {|
 |};
 
 export function getAppSwitchResumeParams(): AppSwitchResumeParams | null {
-  const urlHash = String(window.location.hash).replace("#", "");
+  const hashString = window.location.hash && window.location.hash.slice(1);
+  const [hash, queryString] = hashString.split("?");
+
   const isPostApprovalAction = [
     APP_SWITCH_RETURN_HASH.ONAPPROVE,
     APP_SWITCH_RETURN_HASH.ONCANCEL,
     APP_SWITCH_RETURN_HASH.ONERROR,
-  ].includes(urlHash);
+  ].includes(hash);
   if (!isPostApprovalAction) {
     return null;
   }
-  // eslint-disable-next-line compat/compat
-  const search = new URLSearchParams(window.location.search);
-  const orderID = search.get("orderID");
-  const payerID = search.get("payerID");
-  const buttonSessionID = search.get("buttonSessionID");
-  const billingToken = search.get("billingToken");
-  const paymentID = search.get("paymentID");
-  const subscriptionID = search.get("subscriptionID");
-  const vaultSetupToken = search.get("vaultSetupToken");
-  const fundingSource = search.get("fundingSource");
-  if (buttonSessionID) {
-    const params: AppSwitchResumeParams = {
-      orderID,
-      buttonSessionID,
-      payerID,
-      billingToken,
-      paymentID,
-      subscriptionID,
-      // URLSearchParams get returns as string,
-      // but below code excepts a value from list of string.
-      // $FlowIgnore[incompatible-type]
-      fundingSource,
-      vaultSetupToken,
-      // the isPostApprovalAction already ensures
-      // that the function will exit if url hash is not one of supported values.
-      // $FlowIgnore[incompatible-type]
-      checkoutState: urlHash,
-    };
-    return params;
-  }
-  return null;
+
+  const {
+    token,
+    PayerID,
+    buttonSessionID,
+    billingToken,
+    paymentID,
+    subscriptionID,
+    vaultSetupToken,
+    fundingSource,
+  } = parseQuery(queryString);
+
+  const params: AppSwitchResumeParams = {
+    orderID: token,
+    buttonSessionID,
+    payerID: PayerID,
+    billingToken,
+    paymentID,
+    subscriptionID,
+    // URLSearchParams get returns as string,
+    // but below code excepts a value from list of string.
+    // $FlowIgnore[incompatible-type]
+    fundingSource,
+    vaultSetupToken,
+    // the isPostApprovalAction already ensures
+    // that the function will exit if url hash is not one of supported values.
+    // $FlowIgnore[incompatible-type]
+    checkoutState: hash,
+  };
+  return params;
 }
 
 export function isAppSwitchResumeFlow(): boolean {

package/src/lib/appSwithResume.test.js

@@ -26,23 +26,17 @@ describe("app switch resume flow", () => {
 
   test("should test fetching resume params when parameters are correctly passed", () => {
     vi.spyOn(window, "location", "get").mockReturnValue({
-      hash: "#onApprove",
-      search: `buttonSessionID=${buttonSessionID}&orderID=${orderID}&fundingSource=${fundingSource}`,
+      hash: `#onApprove?buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
     });
 
     const params = getAppSwitchResumeParams();
 
     expect.assertions(2);
     expect(params).toEqual({
-      billingToken: null,
       buttonSessionID,
       checkoutState: "onApprove",
       fundingSource,
       orderID,
-      payerID: null,
-      paymentID: null,
-      subscriptionID: null,
-      vaultSetupToken: null,
     });
     expect(isAppSwitchResumeFlow()).toEqual(true);
   });
@@ -50,7 +44,7 @@ describe("app switch resume flow", () => {
   test("should test fetching resume params with invalid callback passed", () => {
     vi.spyOn(window, "location", "get").mockReturnValue({
       hash: "#Unknown",
-      search: `buttonSessionID=${buttonSessionID}&orderID=${orderID}&fundingSource=${fundingSource}`,
+      search: `buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
     });
 
     const params = getAppSwitchResumeParams();
@@ -62,8 +56,7 @@ describe("app switch resume flow", () => {
 
   test("should test null fetching resume params with invalid callback passed", () => {
     vi.spyOn(window, "location", "get").mockReturnValue({
-      hash: "#Unknown",
-      search: `buttonSessionID=${buttonSessionID}&orderID=${orderID}&fundingSource=${fundingSource}`,
+      hash: `#Unknown?buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
     });
 
     const params = getAppSwitchResumeParams();
@@ -73,10 +66,9 @@ describe("app switch resume flow", () => {
     expect(isAppSwitchResumeFlow()).toEqual(false);
   });
 
-  test("should test fetching resume params when parameters are correctly passed", () => {
+  test("should test fetching multiple resume params when parameters are correctly passed", () => {
     vi.spyOn(window, "location", "get").mockReturnValue({
-      hash: "#onApprove",
-      search: `buttonSessionID=${buttonSessionID}&orderID=${orderID}&fundingSource=${fundingSource}&billingToken=BA-124&payerID=PP-122&paymentID=PAY-123&subscriptionID=I-1234&vaultSetupToken=VA-3`,
+      hash: `#onApprove?buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}&billingToken=BA-124&PayerID=PP-payer-122&paymentID=PAY-123&subscriptionID=I-1234&vaultSetupToken=VA-3`,
     });
 
     const params = getAppSwitchResumeParams();
@@ -88,7 +80,7 @@ describe("app switch resume flow", () => {
       checkoutState: "onApprove",
       fundingSource,
       orderID,
-      payerID: "PP-122",
+      payerID: "PP-payer-122",
       paymentID: "PAY-123",
       subscriptionID: "I-1234",
       vaultSetupToken: "VA-3",

package/src/three-domain-secure/api.js

@@ -39,40 +39,15 @@ export class HTTPClient implements HTTPClientType {
 }
 
 export class RestClient extends HTTPClient {
-  request({ baseURL, ...rest }: HTTPRequestOptions): ZalgoPromise<{ ... }> {
-    return callRestAPI({
-      url: baseURL ?? this.baseURL ?? "",
-      accessToken: this.accessToken,
-      ...rest,
-    });
-  }
-  authRequest({
+  request({
     baseURL,
     accessToken,
     ...rest
   }: HTTPRequestOptions): ZalgoPromise<{ ... }> {
-    return request({
-      method: "post",
+    return callRestAPI({
       url: baseURL ?? this.baseURL ?? "",
-      headers: {
-        // $FlowIssue
-        Authorization: `Basic ${accessToken}`,
-      },
+      accessToken: accessToken ?? this.accessToken,
       ...rest,
-    }).then(({ body }) => {
-      if (body && body.error === "invalid_client") {
-        throw new Error(
-          `Auth Api invalid client id: \n\n${JSON.stringify(body, null, 4)}`
-        );
-      }
-
-      if (!body || !body.access_token) {
-        throw new Error(
-          `Auth Api response error:\n\n${JSON.stringify(body, null, 4)}`
-        );
-      }
-
-      return body.access_token;
     });
   }
 }

package/src/three-domain-secure/component.jsx

@@ -3,24 +3,21 @@
 /* eslint-disable no-restricted-globals, promise/no-native */
 import { type LoggerType } from "@krakenjs/beaver-logger/src";
 import { type ZoidComponent } from "@krakenjs/zoid/src";
-import { base64encode } from "@krakenjs/belter/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { FPTI_KEY, CURRENCY } from "@paypal/sdk-constants/src";
 
-import { PAYMENT_3DS_VERIFICATION, AUTH } from "../constants/api";
+import { PAYMENT_3DS_VERIFICATION } from "../constants/api";
 import { ValidationError } from "../lib";
 
 import type {
   requestData,
-  responseBody,
   GqlResponse,
   MerchantPayloadData,
   SdkConfig,
   ThreeDSResponse,
   TDSProps,
-  Request,
 } from "./types";
-import { getFastlaneThreeDS } from "./utils";
+import { getThreeDS } from "./utils";
 import type { GraphQLClient, RestClient } from "./api";
 
 const parseSdkConfig = ({ sdkConfig, logger }): SdkConfig => {
@@ -99,35 +96,9 @@ export class ThreeDomainSecureComponent {
     const data = parseMerchantPayload({ merchantPayload });
     this.fastlaneNonce = merchantPayload.nonce;
 
-    try {
-      const basicAuth = base64encode(`${this.sdkConfig.clientID}:`);
-      const authData = {
-        grant_type: `client_credentials`,
-      };
-
-      if (this.sdkConfig.merchantID?.length) {
-        // $FlowFixMe invalid error on key assignment
-        authData.target_subject = this.sdkConfig.merchantID[0];
-      }
-      // $FlowFixMe
-      const accessToken = await this.restClient.authRequest<Request, string>({
-        baseURL: `${this.sdkConfig.paypalApiDomain}${AUTH}`,
-        accessToken: `${basicAuth}`,
-        data: authData,
-      });
-      // $FlowIssue confusing ZalgoPromise return type with resolved string value
-      this.restClient.setAccessToken(accessToken);
-    } catch (error) {
-      this.logger.warn(error);
-      throw error;
-    }
-
     try {
       // $FlowFixMe
-      const { status, links } = await this.restClient.request<
-        requestData,
-        responseBody
-      >({
+      const { status, links } = await this.restClient.request({
         method: "POST",
         baseURL: `${this.sdkConfig.paypalApiDomain}/${PAYMENT_3DS_VERIFICATION}`,
         data,
@@ -139,7 +110,7 @@ export class ThreeDomainSecureComponent {
           (link) => link.rel === "payer-action"
         ).href;
         responseStatus = true;
-        this.threeDSIframe = getFastlaneThreeDS();
+        this.threeDSIframe = getThreeDS();
       }
       return responseStatus;
     } catch (error) {
@@ -180,7 +151,7 @@ export class ThreeDomainSecureComponent {
           // Helios returns a boolen parameter: "success"
           // It will be true for all cases where liability is shifted to merchant
           // and false for downstream failures and errors
-          authenticationState = success ? "success" : "errored";
+          authenticationState = success ? "succeeded" : "errored";
           liabilityShift = liability_shift ? liability_shift : "false";
 
           // call BT mutation to update fastlaneNonce with 3ds data

package/src/three-domain-secure/component.test.js

@@ -12,7 +12,7 @@ const defaultSdkConfig = {
   authenticationToken: "sdk-client-token",
 };
 vi.mock("./utils", () => ({
-  getFastlaneThreeDS: vi.fn(() => {
+  getThreeDS: vi.fn(() => {
     return vi.fn(() => ({
       render: vi.fn().mockResolvedValue({}),
       close: vi.fn(),
@@ -45,7 +45,6 @@ const mockRestClient = {
       },
     ],
   }),
-  authRequest: vi.fn(),
 };
 
 const mockEligibilityRequest = (body = defaultEligibilityResponse) => {

package/src/three-domain-secure/interface.js

@@ -5,7 +5,6 @@ import {
   getPayPalAPIDomain,
   getSDKToken,
   getClientID,
-  getMerchantID,
 } from "@paypal/sdk-client/src";
 import { destroy as zoidDestroy } from "@krakenjs/zoid/src";
 
@@ -17,13 +16,13 @@ import {
   type ThreeDomainSecureComponentInterface,
 } from "./component";
 import { GraphQLClient, RestClient } from "./api";
-import { getFastlaneThreeDS } from "./utils";
+import { getThreeDS } from "./utils";
 
 const BRAINTREE_PROD = "https://payments.braintree-api.com";
 const BRAINTREE_SANDBOX = "https://payments.sandbox.braintree-api.com";
 
 export function setup() {
-  getFastlaneThreeDS();
+  getThreeDS();
 }
 export function destroy(err?: mixed) {
   zoidDestroy(err);
@@ -34,7 +33,7 @@ export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInter
     __get__: () => {
       const threeDomainSecureInstance = new ThreeDomainSecureComponent({
         logger: getLogger(),
-        restClient: new RestClient(),
+        restClient: new RestClient({ accessToken: getSDKToken() }),
         graphQLClient: new GraphQLClient({
           baseURL:
             getEnv() === "production" ? BRAINTREE_PROD : BRAINTREE_SANDBOX,
@@ -45,7 +44,6 @@ export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInter
           authenticationToken: getSDKToken(),
           paypalApiDomain: getPayPalAPIDomain(),
           clientID: getClientID(),
-          merchantID: getMerchantID(),
         },
       });
       return devEnvOnlyExport({

package/src/three-domain-secure/interface.test.js

@@ -11,7 +11,7 @@ import { destroy as zoidDestroy } from "@krakenjs/zoid/src";
 
 import { ThreeDomainSecureComponent } from "./component";
 import { GraphQLClient, RestClient } from "./api";
-import { getFastlaneThreeDS } from "./utils";
+import { getThreeDS } from "./utils";
 import { setup, destroy, ThreeDomainSecureClient } from "./interface";
 
 vi.mock("@paypal/sdk-client/src");
@@ -23,7 +23,7 @@ vi.mock("./utils");
 describe("ThreeDomainSecure interface", () => {
   it("should setup and destroy", () => {
     setup();
-    expect(getFastlaneThreeDS).toHaveBeenCalledTimes(1);
+    expect(getThreeDS).toHaveBeenCalledTimes(1);
 
     const err = new Error("test error");
     destroy(err);

package/src/three-domain-secure/utils.jsx

@@ -18,8 +18,8 @@ import type { TDSProps } from "./types";
 
 export type TDSComponent = ZoidComponent<TDSProps>;
 
-export function getFastlaneThreeDS(): TDSComponent {
-  return inlineMemoize(getFastlaneThreeDS, () => {
+export function getThreeDS(): TDSComponent {
+  return inlineMemoize(getThreeDS, () => {
     const component = create({
       tag: "fastlane-threeds",
       url: ({ props }) => props.payerActionUrl,

package/src/three-domain-secure/utils.test.js

@@ -6,7 +6,7 @@ import { noop } from "@krakenjs/belter/src";
 import { describe, expect, vi } from "vitest";
 import { getEnv } from "@paypal/sdk-client/src";
 
-import { getFastlaneThreeDS } from "./utils";
+import { getThreeDS } from "./utils";
 
 vi.mock("@paypal/sdk-client/src");
 
@@ -27,7 +27,7 @@ describe("Three Domain Secure Utils", () => {
       type: "zoidComponent",
     }));
 
-    const fastlaneComponent = getFastlaneThreeDS();
+    const fastlaneComponent = getThreeDS();
     expect(fastlaneComponent).toBeDefined();
     // expect(createMock).toHaveBeenCalledTimes(1);
   });
@@ -43,7 +43,7 @@ describe("Three Domain Secure Utils", () => {
       type: "zoidComponent",
     }));
 
-    getFastlaneThreeDS();
+    getThreeDS();
 
     expect(window.xchild).toBeDefined();
     expect(window.xchild).toEqual({

package/src/types.js

@@ -62,6 +62,7 @@ export type Experiment = {|
   venmoWebEnabled?: boolean,
   // first render experiments
   venmoVaultWithoutPurchase?: boolean,
+  venmoEnableWebOnNonNativeBrowser?: boolean,
 |};
 
 export type Requires = {|

package/src/zoid/buttons/component.jsx

@@ -42,6 +42,7 @@ import {
   getSDKAttribute,
   getJsSdkLibrary,
   wasShopperInsightsUsed,
+  isPayPalTrustedUrl,
 } from "@paypal/sdk-client/src";
 import {
   rememberFunding,
@@ -292,15 +293,24 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     props: {
-      // App Switch Properties
       appSwitchWhenAvailable: {
-        // this value is a string for now while we test the app switch
-        // feature. Before we give this to a real merchant, we should
-        // change this to a boolean - Shane 11 Dec 2024
-        type: "string",
+        type: "boolean",
+        queryParam: true,
         required: false,
       },
 
+      redirect: {
+        type: "function",
+        sendToChild: true,
+        value: () => (url) => {
+          if (isPayPalTrustedUrl(url)) {
+            location.href = url;
+          } else {
+            throw new Error(`Unable to redirect to provided url ${url}`);
+          }
+        },
+      },
+
       hashChangeHandler: {
         type: "function",
         sendToChild: false,

package/src/zoid/card-fields/component.jsx

@@ -77,6 +77,7 @@ type CardFieldsProps = {|
   fundingEligibility: FundingEligibilityType,
   disableCard?: $ReadOnlyArray<$Values<typeof CARD>>,
   currency: $Values<typeof CURRENCY>,
+  amount: string,
   intent: $Values<typeof INTENT>,
   commit: boolean,
   vault: boolean,
@@ -297,6 +298,12 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
             value: ({ props }) => props.parent.props.locale,
           },
 
+          amount: {
+            type: "object",
+            value: ({ props }) => props.parent.props.amount,
+            required: false,
+          },
+
           onApprove: {
             type: "function",
             required: false,
@@ -639,6 +646,11 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
           value: getLocale,
         },
 
+        amount: {
+          type: "object",
+          required: false,
+        },
+
         onApprove: {
           type: "function",
           required: false,

package/src/zoid/venmo/component.jsx

@@ -296,6 +296,12 @@ export function getVenmoCheckoutComponent(): VenmoCheckoutComponent {
           required: false,
         },
 
+        venmoEnableWebOnNonNativeBrowser: {
+          type: "boolean",
+          queryParam: true,
+          required: false,
+        },
+
         venmoVaultEnabled: {
           type: "boolean",
           queryParam: true,