[DTPPCPSDK-2824] [DTPRP-1734] [DTPRP-1751] Limit eligible button to Paypal when new createSubscription is used

src/constants/button.js

@@ -56,6 +56,8 @@ export const BUTTON_FLOW = {
   PURCHASE: ("purchase": "purchase"),
   BILLING_SETUP: ("billing_setup": "billing_setup"),
   SUBSCRIPTION_SETUP: ("subscription_setup": "subscription_setup"),
+  FULL_STACK_SUBSCRIPTION_SETUP:
+    ("full_stack_subscription_setup": "full_stack_subscription_setup"),
   VAULT_WITHOUT_PURCHASE: ("vault_without_purchase": "vault_without_purchase"),
 };
 

src/funding/paypal/config.jsx

@@ -22,6 +22,7 @@ export function getPayPalConfig(): FundingSourceConfig {
       BUTTON_FLOW.PURCHASE,
       BUTTON_FLOW.BILLING_SETUP,
       BUTTON_FLOW.SUBSCRIPTION_SETUP,
+      BUTTON_FLOW.FULL_STACK_SUBSCRIPTION_SETUP,
       BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
     ],
 

src/ui/buttons/buttons.test.js

@@ -0,0 +1,198 @@
+/* @flow */
+import { describe, expect } from "vitest";
+
+import { Buttons } from "./buttons";
+
+/* NOTE: We want to give a "complete" fundingEligibility object since this is what determines how many buttons there will be to start with, before we try to limit the buttons */
+const fundingEligibility = {
+  paypal: {
+    eligible: true,
+    vaultable: true,
+  },
+  paylater: {
+    eligible: true,
+    vaultable: true,
+    products: {
+      payIn3: {
+        eligible: false,
+        variant: null,
+      },
+      payIn4: {
+        eligible: false,
+        variant: null,
+      },
+      paylater: {
+        eligible: true,
+        variant: null,
+      },
+    },
+  },
+  card: {
+    eligible: true,
+    branded: false,
+    installments: false,
+    vendors: {
+      visa: {
+        eligible: true,
+        vaultable: true,
+      },
+      mastercard: {
+        eligible: true,
+        vaultable: true,
+      },
+      amex: {
+        eligible: true,
+        vaultable: true,
+      },
+      discover: {
+        eligible: true,
+        vaultable: true,
+      },
+      hiper: {
+        eligible: false,
+        vaultable: false,
+      },
+      elo: {
+        eligible: false,
+        vaultable: true,
+      },
+      jcb: {
+        eligible: false,
+        vaultable: true,
+      },
+      maestro: {
+        eligible: true,
+        vaultable: true,
+      },
+      diners: {
+        eligible: true,
+        vaultable: true,
+      },
+      cup: {
+        eligible: true,
+        vaultable: true,
+      },
+    },
+    guestEnabled: false,
+  },
+  venmo: {
+    eligible: false,
+    vaultable: false,
+  },
+  itau: {
+    eligible: false,
+  },
+  credit: {
+    eligible: false,
+  },
+  applepay: {
+    eligible: true,
+  },
+  sepa: {
+    eligible: false,
+  },
+  ideal: {
+    eligible: false,
+  },
+  bancontact: {
+    eligible: false,
+  },
+  giropay: {
+    eligible: false,
+  },
+  eps: {
+    eligible: false,
+  },
+  sofort: {
+    eligible: false,
+  },
+  mybank: {
+    eligible: false,
+  },
+  p24: {
+    eligible: false,
+  },
+  wechatpay: {
+    eligible: false,
+  },
+  payu: {
+    eligible: false,
+  },
+  blik: {
+    eligible: false,
+  },
+  trustly: {
+    eligible: false,
+  },
+  oxxo: {
+    eligible: false,
+  },
+  boleto: {
+    eligible: false,
+  },
+  boletobancario: {
+    eligible: false,
+  },
+  mercadopago: {
+    eligible: false,
+  },
+  multibanco: {
+    eligible: false,
+  },
+  satispay: {
+    eligible: false,
+  },
+  paidy: {
+    eligible: false,
+  },
+};
+
+describe("Smart Payment Buttons - limit button to PayPal for FSS", () => {
+  test("should return only 1 PayPal button if flow=full_stack_subscription_setup", () => {
+    const mockedButtonProps = {
+      flow: "full_stack_subscription_setup",
+      fundingEligibility,
+    };
+
+    // $FlowFixMe
+    const jsxElems = Buttons(mockedButtonProps);
+
+    const allButtonsTotalCount = jsxElems?.children.filter(
+      // $FlowFixMe
+      (elem) => elem?.component?.name === "Button"
+    ).length;
+
+    const hasPayPalButton =
+      jsxElems?.children.filter(
+        // $FlowFixMe
+        (elem) => elem?.props?.fundingSource === "paypal"
+      ).length === 1;
+
+    expect(allButtonsTotalCount).toBe(1);
+    expect(hasPayPalButton).toBe(true);
+  });
+
+  test("should return 1 or more buttons if flow != full_stack_subscription_setup", () => {
+    const mockedButtonProps = {
+      flow: "subscription_setup",
+      fundingEligibility,
+    };
+
+    // $FlowFixMe
+    const jsxElems = Buttons(mockedButtonProps);
+
+    const allButtonsTotalCount = jsxElems?.children.filter(
+      // $FlowFixMe
+      (elem) => elem?.component?.name === "Button"
+    ).length;
+
+    const hasPayPalButton =
+      jsxElems?.children.filter(
+        // $FlowFixMe
+        (elem) => elem?.props?.fundingSource === "paypal"
+      ).length === 1;
+
+    expect(allButtonsTotalCount).toBeGreaterThanOrEqual(1);
+    expect(hasPayPalButton).toBe(true);
+  });
+});

src/zoid/buttons/component.jsx

@@ -44,6 +44,7 @@ import {
   wasShopperInsightsUsed,
   isPayPalTrustedUrl,
   getSDKInitTime,
+  getSDKToken,
 } from "@paypal/sdk-client/src";
 import {
   rememberFunding,
@@ -1116,6 +1117,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getSDKMeta,
       },
 
+      sdkToken: {
+        type: "string",
+        required: false,
+        value: getSDKToken,
+      },
+
       /**
        * Version of the SDK used in first render.
        * This is passed to the `/smart/buttons` endpoint in order for the second render

src/zoid/buttons/util.js

@@ -26,8 +26,10 @@ import {
   getNamespace,
   getPayPalDomain,
   getFirstRenderExperiments,
+  getSDKToken,
+  getIntent,
 } from "@paypal/sdk-client/src";
-import { FUNDING, FPTI_KEY } from "@paypal/sdk-constants/src";
+import { FUNDING, FPTI_KEY, INTENT } from "@paypal/sdk-constants/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
 import type { Experiment as EligibilityExperiment } from "../../types";
@@ -84,6 +86,9 @@ export function determineFlow(
   } else if (props.createBillingAgreement) {
     return BUTTON_FLOW.BILLING_SETUP;
   } else if (props.createSubscription) {
+    if (Boolean(getSDKToken()) && getIntent() !== INTENT.SUBSCRIPTION) {
+      return BUTTON_FLOW.FULL_STACK_SUBSCRIPTION_SETUP;
+    }
     return BUTTON_FLOW.SUBSCRIPTION_SETUP;
   } else {
     return BUTTON_FLOW.PURCHASE;