@paypal/checkout-components 5.0.265 → 5.0.267

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.265",
+  "version": "5.0.267",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false --static './'",
+    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open /index.htm --https --hot=false --static './demo/dev'",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",

package/src/constants/button.js

@@ -62,7 +62,3 @@ export const MENU_PLACEMENT = {
   ABOVE: ("above": "above"),
   BELOW: ("below": "below"),
 };
-
-export const EXPERIENCE = {
-  INLINE: ("inline": "inline"),
-};

package/src/constants/class.js

@@ -41,6 +41,4 @@ export const CLASS = {
   HIDDEN: ("hidden": "hidden"),
 
   IMMEDIATE: ("immediate": "immediate"),
-
-  CUSTOM: ("custom": "custom"),
 };

package/src/declarations.js

@@ -20,10 +20,5 @@ declare var __PAYPAL_CHECKOUT__: {|
   |},
 |};
 
-declare var __INLINE_CHECKOUT_ELIGIBILITY__: {|
-  eligible: boolean,
-  ineligibilityReason: string,
-|};
-
 declare var __WEB__: boolean;
 declare var __TREE_SHAKE__: boolean;

package/src/funding/card/config.jsx

@@ -59,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(
@@ -76,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;
       }
 
@@ -139,32 +156,7 @@ export function getCardConfig(): FundingSourceConfig {
       );
     },
 
-    Label: ({ logo, locale, content, custom }) => {
-      if (custom && custom.label && custom.label.length) {
-        const validLabels = {
-          buy: "Buy",
-          checkout: "Checkout",
-          pay: "Pay",
-          "buy now": "Buy Now",
-          "pay now": "Pay Now",
-          "checkout now": "Checkout Now",
-          "proceed to checkout": "Proceed to checkout",
-        };
-
-        let label = validLabels.checkout;
-
-        const lowerCaseLabel = custom.label.toLowerCase();
-        if (validLabels[lowerCaseLabel]) {
-          label = validLabels[lowerCaseLabel];
-        }
-
-        return (
-          <Fragment>
-            <Text>{label}</Text>
-            <Space />
-          </Fragment>
-        );
-      }
+    Label: ({ logo, locale, content }) => {
       const { lang } = locale;
       const isRTL = isRTLLanguage(lang);
       return (

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

@@ -17,7 +17,6 @@ import { LOGO_COLOR } from "@paypal/sdk-logos/src";
 
 import type {
   ContentType,
-  CustomStyle,
   WalletInstrument,
   Experiment,
   Requires,
@@ -71,7 +70,6 @@ export type LabelOptions = {|
   tagline: ?boolean,
   content: ?ContentType,
   experiment?: Experiment,
-  custom?: ?CustomStyle,
 |};
 
 export type DesignExperimentLabelOptions = {|
@@ -126,10 +124,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/types.js

@@ -62,13 +62,6 @@ export type Requires = {|
   native?: boolean,
 |};
 
-export type CustomStyle = {|
-  css?: {|
-    [string]: string,
-  |},
-  label?: string,
-|};
-
 export type LazyExport<T> = {|
   __get__: () => T,
 |};
@@ -76,8 +69,3 @@ export type LazyExport<T> = {|
 export type LazyProtectedExport<T> = {|
   __get__: () => ?T,
 |};
-
-export type InlineXOEligibilityType = {|
-  eligible: boolean,
-  ineligibilityReason: string,
-|};

package/src/ui/buttons/button.jsx

@@ -23,7 +23,6 @@ import {
   CLASS,
   BUTTON_COLOR,
   BUTTON_NUMBER,
-  EXPERIENCE,
   TEXT_COLOR,
   BUTTON_FLOW,
 } from "../../constants";
@@ -65,7 +64,6 @@ type IndividualButtonProps = {|
   vault: boolean,
   merchantFundingSource: ?$Values<typeof FUNDING>,
   instrument: ?WalletInstrument,
-  experience?: string,
   showPayLabel: boolean,
 |};
 
@@ -88,12 +86,10 @@ export function Button({
   commit,
   experiment,
   instrument,
-  experience,
   showPayLabel,
 }: IndividualButtonProps): ElementNode {
-  const { custom, layout, shape } = style;
-  const inlineExperience =
-    experience === EXPERIENCE.INLINE && custom && custom.label;
+  const { layout, shape } = style;
+
   const fundingConfig = getFundingConfig()[fundingSource];
 
   if (!fundingConfig) {
@@ -193,7 +189,6 @@ export function Button({
       personalization={personalization}
       tagline={tagline}
       content={content}
-      custom={inlineExperience ? custom : undefined}
       experiment={experiment}
     />
   );
@@ -266,7 +261,6 @@ export function Button({
     <div
       class={[
         CLASS.BUTTON_ROW,
-        inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : "",
         `${CLASS.NUMBER}-${i}`,
         `${CLASS.LAYOUT}-${layout}`,
         `${CLASS.SHAPE}-${shape}`,
@@ -299,9 +293,6 @@ export function Button({
         }}
         class={[
           CLASS.BUTTON,
-          inlineExperience && fundingSource === FUNDING.CARD
-            ? CLASS.CUSTOM
-            : "",
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
           `${CLASS.SHAPE}-${shape}`,

package/src/ui/buttons/buttons.jsx

@@ -15,7 +15,6 @@ import {
   BUTTON_NUMBER,
   BUTTON_LAYOUT,
   BUTTON_FLOW,
-  EXPERIENCE,
 } from "../../constants";
 import {
   determineEligibleFunding,
@@ -177,16 +176,9 @@ export function Buttons(props: ButtonsProps): ElementNode {
     applePaySupport,
     supportsPopups,
     supportedNativeBrowser,
-    experience,
     showPayLabel,
   } = normalizeButtonProps(props);
-  const { custom, layout, shape, tagline } = style;
-
-  const inlineExperience =
-    experience === EXPERIENCE.INLINE &&
-    custom &&
-    custom.label &&
-    custom.label.length !== 0;
+  const { layout, shape, tagline } = style;
 
   let fundingSources = determineEligibleFunding({
     fundingSource,
@@ -216,17 +208,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
   }
 
   if (fundingSources.indexOf(FUNDING.CARD) !== -1) {
-    if (inlineExperience) {
-      fundingSources = [
-        FUNDING.CARD,
-        ...fundingSources.filter((src) => src !== FUNDING.CARD),
-      ];
-    } else {
-      fundingSources = [
-        ...fundingSources.filter((src) => src !== FUNDING.CARD),
-        FUNDING.CARD,
-      ];
-    }
+    fundingSources = [
+      ...fundingSources.filter((src) => src !== FUNDING.CARD),
+      FUNDING.CARD,
+    ];
   }
 
   const isAPM = fundingSources.some((src) => {
@@ -248,16 +233,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
 
   const { buttonDesignScript = "" } = getButtonDesign(personalization);
   const index = (i) => {
-    if (!inlineExperience) {
-      return i;
-    }
-
-    // InlineXO: Need to change color indexing because we bring Cards to the top
-    if (i === 0) {
-      return fundingSources.length - 1;
-    } else {
-      return i - 1;
-    }
+    return i;
   };
 
   return (
@@ -304,7 +280,6 @@ export function Buttons(props: ButtonsProps): ElementNode {
           flow={flow}
           vault={vault}
           instrument={instruments[source]}
-          experience={experience}
           showPayLabel={showPayLabel}
         />
       ))}
@@ -332,8 +307,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
       ) : null}
 
       {layout === BUTTON_LAYOUT.VERTICAL &&
-      fundingSources.indexOf(FUNDING.CARD) !== -1 &&
-      !inlineExperience ? (
+      fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
         <PoweredByPayPal locale={locale} nonce={nonce} />
       ) : null}
 

package/src/ui/buttons/props.js

@@ -30,7 +30,7 @@ import { LOGO_COLOR } from "@paypal/sdk-logos/src";
 import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
 import type { ComponentFunctionType } from "@krakenjs/jsx-pragmatic/src";
 
-import type { ContentType, CustomStyle, Wallet, Experiment } from "../../types";
+import type { ContentType, Wallet, Experiment } from "../../types";
 import {
   BUTTON_LABEL,
   BUTTON_COLOR,
@@ -317,7 +317,6 @@ export type ButtonStyle = {|
   menuPlacement: $Values<typeof MENU_PLACEMENT>,
   period?: number,
   height?: number,
-  custom?: ?CustomStyle,
 |};
 
 export type ButtonStyleInputs = {|
@@ -328,7 +327,6 @@ export type ButtonStyleInputs = {|
   layout?: $Values<typeof BUTTON_LAYOUT> | void,
   period?: number | void,
   height?: number | void,
-  custom?: ?CustomStyle,
 |};
 
 type PersonalizationComponentProps = {|
@@ -459,7 +457,6 @@ export type RenderButtonProps = {|
   applePaySupport: boolean,
   supportsPopups: boolean,
   supportedNativeBrowser: boolean,
-  experience: string,
   showPayLabel: boolean,
 |};
 
@@ -516,7 +513,6 @@ export type ButtonProps = {|
   applePay: ApplePaySessionConfigRequest,
   meta: {||},
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
-  experience: string,
   createVaultSetupToken: CreateVaultSetupToken,
 |};
 
@@ -557,7 +553,6 @@ export type ButtonPropsInputs = {
   applePaySupport: boolean,
   supportsPopups: boolean,
   supportedNativeBrowser: boolean,
-  experience: string,
   showPayLabel: boolean,
 };
 
@@ -615,7 +610,6 @@ export function normalizeButtonStyle(
     height,
     period,
     menuPlacement = MENU_PLACEMENT.BELOW,
-    custom,
   } = style;
 
   // $FlowFixMe
@@ -678,32 +672,7 @@ export function normalizeButtonStyle(
     }
   }
 
-  if (custom) {
-    if (custom.label && typeof custom.label !== "string") {
-      throw new Error(`style.custom.label is expected to be a String.`);
-    }
-
-    if (custom.css && typeof custom.css !== "object") {
-      throw new Error(`style.custom.css is expected to be JSON.`);
-    }
-
-    if (custom.css && custom.label && custom.label.length === 0) {
-      throw new Error(
-        `Expected style.custom.label to be used with style.custom.css`
-      );
-    }
-
-    if (custom.label && custom.label.length > 0 && !custom.css) {
-      custom.css = {
-        "background-color": "black",
-        height: "48px",
-        "margin-bottom": "15px",
-      };
-    }
-  }
-
   return {
-    custom,
     label,
     layout,
     color,
@@ -766,7 +735,6 @@ export function normalizeButtonProps(
     applePaySupport = false,
     supportsPopups = false,
     supportedNativeBrowser = false,
-    experience = "",
     showPayLabel = true,
   } = props;
 
@@ -854,7 +822,6 @@ export function normalizeButtonProps(
     applePaySupport,
     supportsPopups,
     supportedNativeBrowser,
-    experience,
     showPayLabel,
   };
 }

package/src/ui/buttons/style.jsx

@@ -18,8 +18,8 @@ export function Style({
   nonce,
   fundingEligibility,
 }: StyleProps): ElementNode {
-  const { custom = { label: undefined, css: undefined }, height } = style;
-  const css = componentStyle({ custom, height, fundingEligibility });
+  const { height } = style;
+  const css = componentStyle({ height, fundingEligibility });
 
   return <style nonce={nonce} innerHTML={css} />;
 }

package/src/ui/buttons/styles/base.js

@@ -2,21 +2,16 @@
 
 import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import type { CustomStyle } from "../../../types";
-
 import { pageStyle } from "./page";
 import { buttonStyle } from "./button";
 import { labelStyle } from "./labels";
 import { buttonResponsiveStyle } from "./responsive";
 import { buttonColorStyle } from "./color";
-import { customStyle } from "./custom";
 
 export function componentStyle({
-  custom,
   height,
   fundingEligibility,
 }: {|
-  custom?: ?CustomStyle,
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
 |}): string {
@@ -26,6 +21,5 @@ export function componentStyle({
         ${buttonColorStyle}
         ${labelStyle}
         ${buttonResponsiveStyle({ height, fundingEligibility })}
-        ${customStyle({ custom })}
     `;
 }

package/src/zoid/buttons/component.jsx

@@ -70,8 +70,6 @@ import {
 } from "../../lib";
 import { normalizeButtonStyle, type ButtonProps } from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
-import { EXPERIENCE } from "../../constants";
-import { type InlineXOEligibilityType } from "../../types";
 
 import { containerTemplate } from "./container";
 import { PrerenderedButtons } from "./prerender";
@@ -83,7 +81,6 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
-  isInlineXOEligible,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -798,53 +795,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: applePaySession,
       },
 
-      experience: {
-        queryParam: true,
-        required: false,
-        type: "string",
-        value: ({ props }) => {
-          const {
-            commit,
-            createBillingAgreement,
-            currency,
-            disableFunding = [],
-            experience,
-            fundingEligibility,
-            onComplete,
-            style: { custom = {}, layout },
-            vault,
-          } = props || {};
-
-          if (experience === "accelerated") {
-            return EXPERIENCE.INLINE;
-          }
-
-          const inlineCheckoutEligibility: InlineXOEligibilityType =
-            __INLINE_CHECKOUT_ELIGIBILITY__ || {
-              eligible: false,
-            };
-
-          const eligible =
-            inlineCheckoutEligibility &&
-            inlineCheckoutEligibility.eligible &&
-            isInlineXOEligible({
-              props: {
-                commit,
-                createBillingAgreement,
-                currency,
-                custom,
-                disableFunding,
-                fundingEligibility,
-                layout,
-                onComplete,
-                vault,
-              },
-            });
-
-          return eligible ? EXPERIENCE.INLINE : "";
-        },
-      },
-
       // allowBillingPayments prop is used by Honey Extension to render the one-click button
       // with payment methods & to use the payment methods instead of the Billing Agreement
       allowBillingPayments: {