@paypal/checkout-components 5.0.389 → 5.0.391

package/package.json

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

package/src/funding/credit/config.jsx

@@ -40,6 +40,7 @@ export function getCreditConfig(): FundingSourceConfig {
       BUTTON_FLOW.PURCHASE,
       BUTTON_FLOW.BILLING_SETUP,
       BUTTON_FLOW.SUBSCRIPTION_SETUP,
+      BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
     ],
 
     layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],

package/src/funding/funding.js

@@ -89,6 +89,15 @@ export function isFundingEligible(
     userAgent,
   }: IsFundingEligibleOptions
 ): boolean {
+  // Temporary: Force credit to be eligible if the experiment is enabled
+  if (
+    source === FUNDING.CREDIT &&
+    experiment?.paypalCreditButtonCreateVaultSetupTokenExists &&
+    flow === BUTTON_FLOW.VAULT_WITHOUT_PURCHASE
+  ) {
+    return true;
+  }
+
   if (!fundingEligibility[source] || !fundingEligibility[source].eligible) {
     return false;
   }

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/types.js

@@ -67,6 +67,7 @@ export type Experiment = {|
   isWebViewEnabled?: boolean,
   venmoEnableWebOnNonNativeBrowser?: boolean,
   spbEagerOrderCreation?: boolean,
+  paypalCreditButtonCreateVaultSetupTokenExists?: boolean,
 |};
 
 export type Requires = {|