[NCPS Hosted buttons] Update FPTI tracking params

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 = {

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 = {|

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,15 +268,15 @@ 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
         headers,
         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();
     };

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 = {