@paypal/checkout-components 5.0.264 → 5.0.266

package/package.json

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

package/src/funding/card/config.jsx

@@ -33,62 +33,16 @@ import { getJCBConfig } from "./jcb";
 
 function getVendorConfig(): { [$Values<typeof CARD>]: ?CardConfig } {
   return {
-    [CARD.VISA]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.visa &&
-        __FUNDING_ELIGIBILITY__.card.vendors.visa.eligible)
-        ? getVisaConfig()
-        : null,
-    [CARD.AMEX]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.amex &&
-        __FUNDING_ELIGIBILITY__.card.vendors.amex.eligible)
-        ? getAmexConfig()
-        : null,
-    [CARD.MASTERCARD]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.mastercard &&
-        __FUNDING_ELIGIBILITY__.card.vendors.mastercard.eligible)
-        ? getMastercardConfig()
-        : null,
-    [CARD.DISCOVER]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.discover &&
-        __FUNDING_ELIGIBILITY__.card.vendors.discover.eligible)
-        ? getDiscoverConfig()
-        : null,
-    [CARD.JCB]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.jcb &&
-        __FUNDING_ELIGIBILITY__.card.vendors.jcb.eligible)
-        ? getJCBConfig()
-        : null,
-    [CARD.ELO]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.elo &&
-        __FUNDING_ELIGIBILITY__.card.vendors.elo.eligible)
-        ? getEloConfig()
-        : null,
-    [CARD.HIPER]:
-      !__TREE_SHAKE__ ||
-      (__FUNDING_ELIGIBILITY__.card &&
-        __FUNDING_ELIGIBILITY__.card.vendors &&
-        __FUNDING_ELIGIBILITY__.card.vendors.hiper &&
-        __FUNDING_ELIGIBILITY__.card.vendors.hiper.eligible)
-        ? getHiperConfig()
-        : null,
+    [CARD.VISA]: getVisaConfig(),
+
+    [CARD.AMEX]: getAmexConfig(),
+
+    [CARD.MASTERCARD]: getMastercardConfig(),
+
+    [CARD.DISCOVER]: getDiscoverConfig(),
+    [CARD.JCB]: getJCBConfig(),
+    [CARD.ELO]: getEloConfig(),
+    [CARD.HIPER]: getHiperConfig(),
   };
 }
 
@@ -105,9 +59,6 @@ export function getCardConfig(): FundingSourceConfig {
     eligible: ({ components, fundingSource, fundingEligibility, wallet }) => {
       const cardEligibility = fundingEligibility.card;
 
-      const hostedFieldsRequested = Boolean(
-        components.indexOf(COMPONENTS.HOSTED_FIELDS) !== -1
-      );
       const cardEligible = Boolean(cardEligibility && cardEligibility.eligible);
       const cardBranded = Boolean(cardEligibility && cardEligibility.branded);
       const cardVaulted = Boolean(
@@ -122,23 +73,43 @@ export function getCardConfig(): FundingSourceConfig {
         return false;
       }
 
-      // If card is branded, always show card buttons
+      /*
+       *
+       * the next 5 if statements are in a very important order. Each if statement relies on the one above
+       * to verify we are not in a situation where card fields should or should not be shown. Switching the
+       * order of these if statements could break merchant integrations
+       *
+       * 1. If funding eligibility says branded: true for card, it means that the merchant is not
+       *    eligible for unbranded experiences. In that case, the card button should always be eligible
+       * 2. If the merchant is attempting to render a standalone card, we should mark it as eligible
+       *    since it is outside of the smart stack
+       * 3. If the merchant is using the new card-fields component, the card button should be ineligible
+       *    because we should not mix branded and unbranded experiences
+       * 4. If there is a vaulted card in the buyer's wallet we should show the button. This is very important
+       *    because the old hosted card fields (hosted-fields) uses the card button as its return buyer experience
+       *    this is why this check happens before checking if hosted-fields was requested
+       * 5. If hosted-fields were requested, we shouldn't show the card button because we shouldn't mix branded and
+       *    unbranded experience. The exception is for vaulted cards explained in the point above
+       *
+       */
+
       if (cardBranded) {
         return true;
       }
 
-      // If there's a vaulted card, always show card button
-      if (cardVaulted) {
+      if (fundingSource === FUNDING.CARD) {
         return true;
       }
 
-      // If standalone card is selected, always show card button
-      if (fundingSource === FUNDING.CARD) {
+      if (components.includes("card-fields")) {
+        return false;
+      }
+
+      if (cardVaulted) {
         return true;
       }
 
-      // If hosted fields is requested, do not show card buttons
-      if (hostedFieldsRequested) {
+      if (components.includes(COMPONENTS.HOSTED_FIELDS)) {
         return false;
       }
 

package/src/funding/card/config.test.jsx

@@ -0,0 +1,132 @@
+/* @flow */
+import { describe, test, expect } from "vitest";
+import { FUNDING, COMPONENTS } from "@paypal/sdk-constants/src";
+
+import { getCardConfig } from "./config";
+
+const getEligibility = ({
+  eligible = true,
+  branded = false,
+  vendors = {},
+} = {}) => ({
+  card: {
+    eligible,
+    branded,
+    vendors,
+  },
+});
+
+const getWallet = ({ card = [] } = {}) => ({
+  card: {
+    instruments: card,
+  },
+  credit: {
+    instruments: [],
+  },
+  paypal: {
+    instruments: [],
+  },
+  venmo: {
+    instruments: [],
+  },
+});
+
+describe("card eligibility", () => {
+  // $FlowIssue .eligible is marked as optional in type
+  const getCardConfigEligible = (...args) => getCardConfig().eligible(...args);
+
+  test("should not be eligible when funding eligibility is false", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility({ eligible: false }),
+        // $FlowIssue
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be eligible if card funding eligibility says branded is true", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility({ branded: true }),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be eligible if standalone card was rendered", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.CARD,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be ineligible if card-fields were requested", () => {
+    expect(
+      getCardConfigEligible({
+        // $FlowIssue need to add the new card fields as a constant
+        components: ["card-fields"],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be ineligible if card-fields were requested, even if there is a vaulted instrument", () => {
+    expect(
+      getCardConfigEligible({
+        // $FlowIssue need to add the new card fields as a constant
+        components: ["card-fields"],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet({
+          card: ["some instrument"],
+        }),
+      })
+    ).toEqual(false);
+  });
+
+  test("should be eligible if there is a vaulted card", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet({
+          card: ["some instrument"],
+        }),
+      })
+    ).toEqual(true);
+  });
+
+  test("should be ineligible if hosted-fields was requested", () => {
+    expect(
+      getCardConfigEligible({
+        components: [COMPONENTS.HOSTED_FIELDS],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(false);
+  });
+
+  test("should default to true", () => {
+    expect(
+      getCardConfigEligible({
+        components: [],
+        fundingSource: FUNDING.PAYPAL,
+        fundingEligibility: getEligibility(),
+        wallet: getWallet(),
+      })
+    ).toEqual(true);
+  });
+});

package/src/funding/common.jsx

@@ -126,10 +126,10 @@ export type FundingSourceConfig = {|
   vendors?: { [$Values<typeof CARD>]: ?CardConfig },
   eligible?: ({|
     components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    experiment: ?Experiment,
+    experiment?: ?Experiment,
     fundingEligibility: FundingEligibilityType,
     fundingSource: ?$Values<typeof FUNDING>,
-    layout: ?$Values<typeof BUTTON_LAYOUT>,
+    layout?: ?$Values<typeof BUTTON_LAYOUT>,
     wallet: ?Wallet,
   |}) => boolean,
   Logo: (LogoOptions) => ChildType,

package/src/funding/config.js

@@ -35,162 +35,32 @@ export function getFundingConfig(): {
 } {
   return inlineMemoize(getFundingConfig, () => {
     return {
-      [FUNDING.PAYPAL]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.paypal !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.paypal.eligible)
-          ? getPayPalConfig()
-          : null,
-      [FUNDING.VENMO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.venmo !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.venmo.eligible)
-          ? getVenmoConfig()
-          : null,
-      [FUNDING.APPLEPAY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.applepay !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.applepay.eligible)
-          ? getApplePayConfig()
-          : null,
-      [FUNDING.ITAU]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.itau !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.itau.eligible)
-          ? getItauConfig()
-          : null,
-      [FUNDING.CREDIT]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.credit !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.credit.eligible)
-          ? getCreditConfig()
-          : null,
-      [FUNDING.PAYLATER]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.paylater !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.paylater.eligible)
-          ? getPaylaterConfig()
-          : null,
-      [FUNDING.CARD]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.card !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.card.eligible)
-          ? getCardConfig()
-          : null,
-      [FUNDING.IDEAL]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.ideal !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.ideal.eligible)
-          ? getIdealConfig()
-          : null,
-      [FUNDING.SEPA]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.sepa !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.sepa.eligible)
-          ? getSepaConfig()
-          : null,
-      [FUNDING.BANCONTACT]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.bancontact !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.bancontact.eligible)
-          ? getBancontactConfig()
-          : null,
-      [FUNDING.GIROPAY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.giropay !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.giropay.eligible)
-          ? getGiropayConfig()
-          : null,
-      [FUNDING.SOFORT]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.sofort !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.sofort.eligible)
-          ? getSofortConfig()
-          : null,
-      [FUNDING.EPS]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.eps !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.eps.eligible)
-          ? getEpsConfig()
-          : null,
-      [FUNDING.MYBANK]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.mybank !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.mybank.eligible)
-          ? getMybankConfig()
-          : null,
-      [FUNDING.P24]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.p24 !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.p24.eligible)
-          ? getP24Config()
-          : null,
-      [FUNDING.PAYU]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.payu !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.payu.eligible)
-          ? getPayuConfig()
-          : null,
-      [FUNDING.BLIK]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.blik !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.blik.eligible)
-          ? getBlikConfig()
-          : null,
-      [FUNDING.TRUSTLY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.trustly !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.trustly.eligible)
-          ? getTrustlyConfig()
-          : null,
-      [FUNDING.WECHATPAY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.wechatpay !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.wechatpay.eligible)
-          ? getWechatpayConfig()
-          : null,
-      [FUNDING.OXXO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.oxxo !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.oxxo.eligible)
-          ? getOxxoConfig()
-          : null,
-      [FUNDING.BOLETO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.boleto !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.boleto.eligible)
-          ? getBoletoConfig()
-          : null,
-      [FUNDING.BOLETOBANCARIO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.boletobancario !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.boletobancario.eligible)
-          ? getBoletoConfig()
-          : null,
-      [FUNDING.MERCADOPAGO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.mercadopago !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.mercadopago.eligible)
-          ? getMercadopagoConfig()
-          : null,
-      [FUNDING.MULTIBANCO]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.multibanco !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.multibanco.eligible)
-          ? getMultibancoConfig()
-          : null,
-      [FUNDING.SATISPAY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.satispay !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.satispay.eligible)
-          ? getSatispayConfig()
-          : null,
-      [FUNDING.PAIDY]:
-        !__TREE_SHAKE__ ||
-        (typeof __FUNDING_ELIGIBILITY__.paidy !== "undefined" &&
-          __FUNDING_ELIGIBILITY__.paidy.eligible)
-          ? getPaidyConfig()
-          : null,
+      [FUNDING.PAYPAL]: getPayPalConfig(),
+      [FUNDING.VENMO]: getVenmoConfig(),
+      [FUNDING.APPLEPAY]: getApplePayConfig(),
+      [FUNDING.ITAU]: getItauConfig(),
+      [FUNDING.CREDIT]: getCreditConfig(),
+      [FUNDING.PAYLATER]: getPaylaterConfig(),
+      [FUNDING.CARD]: getCardConfig(),
+      [FUNDING.IDEAL]: getIdealConfig(),
+      [FUNDING.SEPA]: getSepaConfig(),
+      [FUNDING.BANCONTACT]: getBancontactConfig(),
+      [FUNDING.GIROPAY]: getGiropayConfig(),
+      [FUNDING.SOFORT]: getSofortConfig(),
+      [FUNDING.EPS]: getEpsConfig(),
+      [FUNDING.MYBANK]: getMybankConfig(),
+      [FUNDING.P24]: getP24Config(),
+      [FUNDING.PAYU]: getPayuConfig(),
+      [FUNDING.BLIK]: getBlikConfig(),
+      [FUNDING.TRUSTLY]: getTrustlyConfig(),
+      [FUNDING.WECHATPAY]: getWechatpayConfig(),
+      [FUNDING.OXXO]: getOxxoConfig(),
+      [FUNDING.BOLETO]: getBoletoConfig(),
+      [FUNDING.BOLETOBANCARIO]: getBoletoConfig(),
+      [FUNDING.MERCADOPAGO]: getMercadopagoConfig(),
+      [FUNDING.MULTIBANCO]: getMultibancoConfig(),
+      [FUNDING.SATISPAY]: getSatispayConfig(),
+      [FUNDING.PAIDY]: getPaidyConfig(),
     };
   });
 }