@paypal/checkout-components 5.0.388 → 5.0.390

package/package.json

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

package/src/hosted-buttons/index.js

@@ -14,7 +14,6 @@ import {
   renderDefaultButton,
   renderForm,
   renderStandaloneButton,
-  getTrackingId,
 } from "./utils";
 import type {
   HostedButtonsComponent,
@@ -50,34 +49,37 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
         selector,
       });
 
-      const trackingId = getTrackingId(selector);
+      const fptiTrackingParams =
+        window[
+          `__pp_form_fields_${hostedButtonId}`
+        ]?.getFptiTrackingParams?.() || {};
 
       const createOrder = buildHostedButtonCreateOrder({
         enableDPoP,
         hostedButtonId,
         merchantId,
-        trackingId,
+        fptiTrackingParams,
       });
 
       const onApprove = buildHostedButtonOnApprove({
         enableDPoP,
         hostedButtonId,
         merchantId,
-        trackingId,
+        fptiTrackingParams,
       });
 
       const onShippingAddressChange = buildHostedButtonOnShippingAddressChange({
         enableDPoP,
         hostedButtonId,
         shouldIncludeShippingCallbacks,
-        trackingId,
+        fptiTrackingParams,
       });
 
       const onShippingOptionsChange = buildHostedButtonOnShippingOptionsChange({
         enableDPoP,
         hostedButtonId,
         shouldIncludeShippingCallbacks,
-        trackingId,
+        fptiTrackingParams,
       });
 
       const buttonOptions: HostedButtonOptions = {

package/src/hosted-buttons/types.js

@@ -133,7 +133,7 @@ export type GetCallbackProps = {|
   hostedButtonId: string,
   merchantId?: string,
   shouldIncludeShippingCallbacks?: boolean,
-  trackingId?: string,
+  fptiTrackingParams?: { [key: string]: mixed },
 |};
 
 export type HostedButtonsInstance = {|

package/src/hosted-buttons/utils.js

@@ -225,18 +225,6 @@ export function getElementFromSelector(
     : selector;
 }
 
-export function getTrackingId(
-  HostedButtonSelector: string | HTMLElement
-): string {
-  if (typeof HostedButtonSelector !== "string") {
-    return "";
-  }
-  const ele = document.querySelector(
-    `${HostedButtonSelector} input[name="uuid"]`
-  );
-  return ele ? ele.getAttribute("value") || "" : "";
-}
-
 /**
  * Attaches form fields (html) to the given selector, and
  * initializes window.__pp_form_fields (htmlScript).
@@ -269,7 +257,7 @@ export const buildHostedButtonCreateOrder = ({
   enableDPoP,
   hostedButtonId,
   merchantId,
-  trackingId,
+  fptiTrackingParams,
 }: GetCallbackProps): CreateOrder => {
   return async (data) => {
     const userInputs =
@@ -280,7 +268,7 @@ export const buildHostedButtonCreateOrder = ({
       const url = `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`;
       const method = "POST";
       const headers = await buildRequestHeaders({ url, method, enableDPoP });
-
+      const funding_source = data.paymentSource.toUpperCase();
       const response = await request({
         url,
         // $FlowIssue optional properties are not compatible with [key: string]: string
@@ -288,7 +276,7 @@ export const buildHostedButtonCreateOrder = ({
         method,
         body: JSON.stringify({
           entry_point: entryPoint,
-          funding_source: data.paymentSource.toUpperCase(),
+          funding_source,
           merchant_id: merchantId,
           ...userInputs,
         }),
@@ -297,9 +285,10 @@ export const buildHostedButtonCreateOrder = ({
       const { body } = response;
       getLogger()
         .track({
+          ...fptiTrackingParams,
           [FPTI_KEY.CONTEXT_ID]: body.context_id,
           [FPTI_KEY.EVENT_NAME]: "ncps_create_order",
-          tracking_id: trackingId,
+          funding_type: funding_source,
         })
         .flush();
       return body.context_id || onError(body.details?.[0]?.issue || body.name);
@@ -313,7 +302,7 @@ export const buildHostedButtonOnApprove = ({
   enableDPoP,
   hostedButtonId,
   merchantId,
-  trackingId,
+  fptiTrackingParams,
 }: GetCallbackProps): OnApprove => {
   return async (data) => {
     const url = `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`;
@@ -333,9 +322,9 @@ export const buildHostedButtonOnApprove = ({
     }).then((response) => {
       getLogger()
         .track({
+          ...fptiTrackingParams,
           [FPTI_KEY.CONTEXT_ID]: data.orderID,
           [FPTI_KEY.EVENT_NAME]: "ncps_onapprove_order",
-          tracking_id: trackingId,
         })
         .flush();
 
@@ -359,7 +348,7 @@ export const buildHostedButtonOnShippingAddressChange = ({
   enableDPoP,
   hostedButtonId,
   shouldIncludeShippingCallbacks,
-  trackingId,
+  fptiTrackingParams,
 }: GetCallbackProps): OnShippingAddressChange | typeof undefined => {
   if (shouldIncludeShippingCallbacks) {
     return async (data, actions) => {
@@ -398,9 +387,9 @@ export const buildHostedButtonOnShippingAddressChange = ({
 
       getLogger()
         .track({
+          ...fptiTrackingParams,
           [FPTI_KEY.CONTEXT_ID]: orderID,
           [FPTI_KEY.EVENT_NAME]: "ncps_shipping_address_change",
-          tracking_id: trackingId,
         })
         .flush();
     };
@@ -411,7 +400,7 @@ export const buildHostedButtonOnShippingOptionsChange = ({
   enableDPoP,
   hostedButtonId,
   shouldIncludeShippingCallbacks,
-  trackingId,
+  fptiTrackingParams,
 }: GetCallbackProps): OnShippingOptionsChange | typeof undefined => {
   if (shouldIncludeShippingCallbacks) {
     return async (data, actions) => {
@@ -439,9 +428,9 @@ export const buildHostedButtonOnShippingOptionsChange = ({
 
       getLogger()
         .track({
+          ...fptiTrackingParams,
           [FPTI_KEY.CONTEXT_ID]: orderID,
           [FPTI_KEY.EVENT_NAME]: "ncps_shipping_options_change",
-          tracking_id: trackingId,
         })
         .flush();
     };

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

@@ -21,7 +21,6 @@ import {
   renderStandaloneButton,
   applyContainerStyles,
   renderDefaultButton,
-  getTrackingId,
 } from "./utils";
 
 vi.mock("@krakenjs/belter/src", async () => {
@@ -914,35 +913,6 @@ test("getElementFromSelector", () => {
   expect(mockQuerySelector).toHaveBeenCalledWith(containerId);
 });
 
-describe("getTrackingId", () => {
-  const containerId = "#container-id";
-
-  test("returns uuid value when input element exists and has a value", () => {
-    const inputElement = document.createElement("input");
-    inputElement.setAttribute("name", "uuid");
-    inputElement.setAttribute("value", "test-uuid-123");
-
-    const containerElement = document.createElement("div");
-    containerElement.appendChild(inputElement);
-
-    vi.spyOn(document, "querySelector").mockImplementationOnce(
-      () => inputElement
-    );
-
-    const result = getTrackingId(containerId);
-
-    expect(result).toBe("test-uuid-123");
-  });
-
-  test("returns empty string when input element doesn't exist", () => {
-    vi.spyOn(document, "querySelector").mockImplementationOnce(() => null);
-
-    const result = getTrackingId(containerId);
-
-    expect(result).toBe("");
-  });
-});
-
 describe("getButtonPreferences", () => {
   test("returns all button preferences if all are eligible", () => {
     const params = {

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

@@ -34,21 +34,36 @@ const parseSdkConfig = ({ sdkConfig, logger }): SdkConfig => {
   return sdkConfig;
 };
 
-const parseMerchantPayload = ({
+export const parseMerchantPayload = ({
   merchantPayload,
 }: {|
   merchantPayload: MerchantPayloadData,
 |}): requestData => {
-  const { threeDSRequested, amount, currency, nonce, transactionContext } =
-    merchantPayload;
+  const {
+    threeDSRequested,
+    verificationMethod,
+    amount,
+    currency,
+    nonce,
+    transactionContext,
+  } = merchantPayload;
+
+  let cardVerificationMethod = "SCA_WHEN_REQUIRED";
+
+  if (verificationMethod) {
+    cardVerificationMethod = verificationMethod;
+  } else if (threeDSRequested !== undefined) {
+    cardVerificationMethod = threeDSRequested
+      ? "SCA_ALWAYS"
+      : "SCA_WHEN_REQUIRED";
+  }
+
   return {
     intent: "THREE_DS_VERIFICATION",
     payment_source: {
       card: {
         single_use_token: nonce,
-        verification_method: threeDSRequested
-          ? "SCA_ALWAYS"
-          : "SCA_WHEN_REQUIRED",
+        verification_method: cardVerificationMethod,
       },
     },
     amount: {
@@ -128,7 +143,7 @@ export class ThreeDomainSecureComponent {
     // eslint-disable-next-line compat/compat
     return new Promise((resolve, reject) => {
       let authenticationState,
-        liabilityShift = "false";
+        liabilityShift;
       const cancelThreeDS = () => {
         return ZalgoPromise.try(() => {
           this.logger.warn("3DS Cancelled");
@@ -137,7 +152,6 @@ export class ThreeDomainSecureComponent {
           instance.close();
           resolve({
             authenticationState: "cancelled",
-            liabilityShift: "false",
             nonce: this.fastlaneNonce,
           });
         });
@@ -147,12 +161,14 @@ export class ThreeDomainSecureComponent {
         payerActionUrl: this.authenticationURL,
         onSuccess: async (res) => {
           const { reference_id, liability_shift, success } = res;
+          // $FlowFixMe incompatible type payload
+          this.logger.info("helios_response", JSON.stringify(res));
           let enrichedNonce;
           // 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
+          // and false for downstream failures and errors where liability_shift= NO|UNKNOWN.
           authenticationState = success ? "succeeded" : "errored";
-          liabilityShift = liability_shift ? liability_shift : "false";
+          liabilityShift = liability_shift;
 
           // call BT mutation to update fastlaneNonce with 3ds data
           // reference_id will be available for all usecases(success/failure)

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

@@ -6,7 +6,7 @@ import { FPTI_KEY } from "@paypal/sdk-constants/src";
 
 import { ValidationError } from "../lib";
 
-import { ThreeDomainSecureComponent } from "./component";
+import { ThreeDomainSecureComponent, parseMerchantPayload } from "./component";
 
 const defaultSdkConfig = {
   authenticationToken: "sdk-client-token",
@@ -237,3 +237,119 @@ describe("three domain secure component - initialization", () => {
     });
   });
 });
+
+describe(" three domain secure component - parseMerchantPayload", () => {
+  const baseMerchantPayload = {
+    amount: "100.00",
+    currency: "USD",
+    nonce: "test-nonce-123",
+  };
+
+  it("should default to SCA_WHEN_REQUIRED when no 3DS parameters provided", () => {
+    const result = parseMerchantPayload({
+      merchantPayload: baseMerchantPayload,
+    });
+
+    expect(result).toEqual({
+      intent: "THREE_DS_VERIFICATION",
+      payment_source: {
+        card: {
+          single_use_token: "test-nonce-123",
+          verification_method: "SCA_WHEN_REQUIRED",
+        },
+      },
+      amount: {
+        currency_code: "USD",
+        value: "100.00",
+      },
+    });
+  });
+
+  it("should use verificationMethod when provided", () => {
+    const payload = {
+      ...baseMerchantPayload,
+      verificationMethod: "SCA_ALWAYS",
+    };
+
+    const result = parseMerchantPayload({ merchantPayload: payload });
+
+    expect(result.payment_source.card.verification_method).toBe("SCA_ALWAYS");
+  });
+
+  it("should prioritize verificationMethod over threeDSRequested", () => {
+    const payload = {
+      ...baseMerchantPayload,
+      threeDSRequested: false,
+      verificationMethod: "SCA_ALWAYS",
+    };
+
+    const result = parseMerchantPayload({ merchantPayload: payload });
+
+    expect(result.payment_source.card.verification_method).toBe("SCA_ALWAYS");
+  });
+
+  it("should use threeDSRequested when verificationMethod not provided", () => {
+    const payloadWithTrue = {
+      ...baseMerchantPayload,
+      threeDSRequested: true,
+    };
+
+    const payloadWithFalse = {
+      ...baseMerchantPayload,
+      threeDSRequested: false,
+    };
+
+    const resultTrue = parseMerchantPayload({
+      merchantPayload: payloadWithTrue,
+    });
+    const resultFalse = parseMerchantPayload({
+      merchantPayload: payloadWithFalse,
+    });
+
+    expect(resultTrue.payment_source.card.verification_method).toBe(
+      "SCA_ALWAYS"
+    );
+    expect(resultFalse.payment_source.card.verification_method).toBe(
+      "SCA_WHEN_REQUIRED"
+    );
+  });
+
+  it("should include transactionContext when provided", () => {
+    const payload = {
+      ...baseMerchantPayload,
+      transactionContext: {
+        soft_descriptor: "PAYPAL *TEST",
+      },
+    };
+
+    const result = parseMerchantPayload({ merchantPayload: payload });
+
+    expect(result).toMatchObject({
+      intent: "THREE_DS_VERIFICATION",
+      payment_source: {
+        card: {
+          single_use_token: "test-nonce-123",
+          verification_method: "SCA_WHEN_REQUIRED",
+        },
+      },
+      amount: {
+        currency_code: "USD",
+        value: "100.00",
+      },
+      soft_descriptor: "PAYPAL *TEST",
+    });
+  });
+
+  it("should handle SCA_WHEN_REQUIRED in verificationMethod", () => {
+    const payload = {
+      ...baseMerchantPayload,
+      verificationMethod: "SCA_WHEN_REQUIRED",
+    };
+
+    const result = parseMerchantPayload({ merchantPayload: payload });
+
+    expect(result.payment_source.card.verification_method).toBe(
+      "SCA_WHEN_REQUIRED"
+    );
+  });
+});

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

@@ -31,17 +31,18 @@ export function destroy(err?: mixed) {
 export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInterface> =
   {
     __get__: () => {
+      const accessToken = getSDKToken() || getUserIDToken();
       const threeDomainSecureInstance = new ThreeDomainSecureComponent({
         logger: getLogger(),
-        restClient: new RestClient({ accessToken: getSDKToken() }),
+        restClient: new RestClient({ accessToken }),
         graphQLClient: new GraphQLClient({
           baseURL:
             getEnv() === "production" ? BRAINTREE_PROD : BRAINTREE_SANDBOX,
-          accessToken: getSDKToken(),
+          accessToken,
         }),
         // $FlowIssue ZalgoPromise vs Promise
         sdkConfig: {
-          authenticationToken: getSDKToken() || getUserIDToken(),
+          authenticationToken: accessToken,
           paypalApiDomain: getPayPalAPIDomain(),
           clientID: getClientID(),
         },

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

@@ -8,6 +8,7 @@ export type MerchantPayloadData = {|
   currency: string,
   nonce: string,
   threeDSRequested?: boolean,
+  verificationMethod?: "SCA_ALWAYS" | "SCA_WHEN_REQUIRED",
   transactionContext?: Object,
   idToken?: string,
 |};
@@ -73,7 +74,7 @@ export type SdkConfig = {|
 |};
 
 export type ThreeDSResponse = {|
-  liabilityShift: string,
+  liabilityShift?: string,
   authenticationState: string,
   nonce?: string,
 |};