@paypal/checkout-components 5.0.307 → 5.0.308

package/globals.js

@@ -32,6 +32,7 @@ module.exports = {
       __CARD_FIELD__: "/smart/card-field",
       __WALLET__: "/smart/wallet",
       __PAYMENT_FIELDS__: "/altpayfields",
+      __MESSAGE_MODAL__: "https://www.paypalobjects.com/upstream/bizcomponents/js/modal.js",
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.307",
+  "version": "5.0.308",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -114,7 +114,7 @@
     "@paypal/connect-loader-component": "1.1.1",
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.184",
-    "@paypal/sdk-constants": "^1.0.141",
+    "@paypal/sdk-constants": "^1.0.146",
     "@paypal/sdk-logos": "^2.2.6"
   },
   "lint-staged": {

package/src/constants/button.js

@@ -63,3 +63,24 @@ export const MENU_PLACEMENT = {
   ABOVE: ("above": "above"),
   BELOW: ("below": "below"),
 };
+
+export const MESSAGE_OFFER = {
+  PAY_LATER_LONG_TERM: ("pay_later_long_term": "pay_later_long_term"),
+  PAY_LATER_SHORT_TERM: ("pay_later_short_term": "pay_later_short_term"),
+};
+
+export const MESSAGE_COLOR = {
+  BLACK: ("black": "black"),
+  WHITE: ("white": "white"),
+};
+
+export const MESSAGE_POSITION = {
+  TOP: ("top": "top"),
+  BOTTOM: ("bottom": "bottom"),
+};
+
+export const MESSAGE_ALIGN = {
+  CENTER: ("center": "center"),
+  LEFT: ("left": "left"),
+  RIGHT: ("right": "right"),
+};

package/src/constants/class.js

@@ -42,4 +42,9 @@ export const CLASS = {
   HIDDEN: ("hidden": "hidden"),
 
   IMMEDIATE: ("immediate": "immediate"),
+
+  BUTTON_MESSAGE: ("paypal-button-message": "paypal-button-message"),
+
+  BUTTON_MESSAGE_RESERVE:
+    ("paypal-button-message-reserved": "paypal-button-message-reserved"),
 };

package/src/declarations.js

@@ -18,6 +18,7 @@ declare var __PAYPAL_CHECKOUT__: {|
     __VENMO__: string,
     __WALLET__: string,
     __PAYMENT_FIELDS__: string,
+    __MESSAGE_MODAL__: string,
   |},
 |};
 

package/src/hosted-buttons/utils.js

@@ -214,7 +214,12 @@ export const buildHostedButtonOnApprove = ({
       // so we need to redirect to the thank you page for buyers who complete
       // a checkout via "Debit or Credit Card".
       if (data.paymentSource === FUNDING.CARD) {
-        window.location = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
+        let redirectUrl = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
+        // add error messages to the payment confirmation page url
+        if (response.body?.details?.[0]?.issue) {
+          redirectUrl += `?status=${response.body.details[0].issue}`;
+        }
+        window.location = redirectUrl;
       }
       return response;
     });

package/src/hosted-buttons/utils.test.js

@@ -285,6 +285,27 @@ describe("buildHostedButtonOnApprove", () => {
         "https://example.com/ncp/payment/B1234567890/EC-1234567890"
       );
     });
+
+    test("redirects with an error message in the status query parameter", async () => {
+      // $FlowIssue
+      request.mockImplementation(() =>
+        // eslint-disable-next-line compat/compat
+        Promise.resolve({
+          body: {
+            details: [
+              {
+                issue: "DUPLICATE_INVOICE_ID",
+              },
+            ],
+          },
+        })
+      );
+
+      await onApprove({ orderID, paymentSource: "card" });
+      expect(window.location).toBe(
+        "https://example.com/ncp/payment/B1234567890/EC-1234567890?status=DUPLICATE_INVOICE_ID"
+      );
+    });
   });
 });
 

package/src/ui/buttons/buttons.jsx

@@ -15,6 +15,7 @@ import {
   BUTTON_NUMBER,
   BUTTON_LAYOUT,
   BUTTON_FLOW,
+  MESSAGE_POSITION,
 } from "../../constants";
 import {
   determineEligibleFunding,
@@ -34,6 +35,8 @@ import { Button } from "./button";
 import { TagLine } from "./tagline";
 import { Script } from "./script";
 import { PoweredByPayPal } from "./poweredBy";
+import { Message } from "./message";
+import { calculateShowPoweredBy } from "./util";
 
 type GetWalletInstrumentOptions = {|
   wallet: ?Wallet,
@@ -177,6 +180,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
     supportedNativeBrowser,
     showPayLabel,
     displayOnly,
+    message,
+    messageMarkup,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -237,6 +242,14 @@ export function Buttons(props: ButtonsProps): ElementNode {
     return i;
   };
 
+  const showTagline =
+    tagline &&
+    layout === BUTTON_LAYOUT.HORIZONTAL &&
+    !fundingSource &&
+    !message;
+
+  const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
+
   return (
     <div
       class={[
@@ -256,6 +269,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
         fundingEligibility={fundingEligibility}
       />
 
+      {message && message.position === MESSAGE_POSITION.TOP ? (
+        <Message markup={messageMarkup} position={message.position} />
+      ) : null}
+
       {fundingSources.map((source, i) => (
         <Button
           content={content}
@@ -285,7 +302,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ))}
 
-      {tagline && layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource ? (
+      {showTagline ? (
         <TagLine
           fundingSource={fundingSources[0]}
           style={style}
@@ -307,9 +324,10 @@ export function Buttons(props: ButtonsProps): ElementNode {
         />
       ) : null}
 
-      {layout === BUTTON_LAYOUT.VERTICAL &&
-      fundingSources.indexOf(FUNDING.CARD) !== -1 ? (
-        <PoweredByPayPal locale={locale} nonce={nonce} />
+      {showPoweredBy ? <PoweredByPayPal locale={locale} nonce={nonce} /> : null}
+
+      {message && message.position === MESSAGE_POSITION.BOTTOM ? (
+        <Message markup={messageMarkup} position={message.position} />
       ) : null}
 
       <Script nonce={nonce} />

package/src/ui/buttons/message.jsx

@@ -0,0 +1,31 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+
+import { CLASS } from "../../constants";
+
+const INITIAL_RESERVED_HEIGHT = "36px";
+
+type MessageProps = {|
+  markup: ?string,
+  position: string,
+|};
+
+export function Message({ markup, position }: MessageProps): ChildType {
+  const messageClassNames = [
+    CLASS.BUTTON_MESSAGE,
+    `${CLASS.BUTTON_MESSAGE}-${position}`,
+  ].join(" ");
+
+  if (typeof markup !== "string") {
+    return (
+      <div
+        class={`${messageClassNames} ${CLASS.BUTTON_MESSAGE_RESERVE}`}
+        style={`height:${INITIAL_RESERVED_HEIGHT}`}
+      />
+    );
+  }
+
+  return <div class={messageClassNames} innerHTML={markup} />;
+}

package/src/ui/buttons/props.js

@@ -40,11 +40,15 @@ import {
   BUTTON_SIZE,
   BUTTON_FLOW,
   MENU_PLACEMENT,
+  MESSAGE_OFFER,
+  MESSAGE_COLOR,
+  MESSAGE_POSITION,
+  MESSAGE_ALIGN,
 } from "../../constants";
 import { getFundingConfig, isFundingEligible } from "../../funding";
 
 import { BUTTON_SIZE_STYLE } from "./config";
-import { isBorderRadiusNumber } from "./util";
+import { isBorderRadiusNumber, calculateMessagePosition } from "./util";
 
 export type CreateOrderData = {||} | {||};
 
@@ -424,6 +428,22 @@ export type ApplePaySessionConfigRequest = (
   request: Object
 ) => ApplePaySessionConfig;
 
+export type ButtonMessage = {|
+  amount?: number,
+  offer?: $ReadOnlyArray<$Values<typeof MESSAGE_OFFER>>,
+  color: $Values<typeof MESSAGE_COLOR>,
+  position: $Values<typeof MESSAGE_POSITION>,
+  align: $Values<typeof MESSAGE_ALIGN>,
+|};
+
+export type ButtonMessageInputs = {|
+  amount?: number | void,
+  offer?: $ReadOnlyArray<$Values<typeof MESSAGE_OFFER>> | void,
+  color?: $Values<typeof MESSAGE_COLOR> | void,
+  position?: $Values<typeof MESSAGE_POSITION> | void,
+  align?: $Values<typeof MESSAGE_ALIGN> | void,
+|};
+
 export type RenderButtonProps = {|
   style: ButtonStyle,
   locale: LocaleType,
@@ -458,6 +478,8 @@ export type RenderButtonProps = {|
   supportedNativeBrowser: boolean,
   showPayLabel: boolean,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  message?: ButtonMessage,
+  messageMarkup?: string,
 |};
 
 export type PrerenderDetails = {|
@@ -517,6 +539,8 @@ export type ButtonProps = {|
   createVaultSetupToken: CreateVaultSetupToken,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
   hostedButtonId?: string,
+  message?: ButtonMessage,
+  messageMarkup?: string,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -559,6 +583,9 @@ export type ButtonPropsInputs = {
   supportedNativeBrowser: boolean,
   showPayLabel: boolean,
   displayOnly: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  message?: ButtonMessageInputs | void,
+  messageMarkup?: string | void,
+  renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
 };
 
 export const DEFAULT_STYLE = {
@@ -707,6 +734,72 @@ export function normalizeButtonStyle(
   };
 }
 
+export function normalizeButtonMessage(
+  message: ButtonMessageInputs,
+  layout: $Values<typeof BUTTON_LAYOUT>,
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>
+): ButtonMessage {
+  const {
+    amount,
+    offer,
+    color = MESSAGE_COLOR.BLACK,
+    position,
+    align = MESSAGE_ALIGN.CENTER,
+  } = message;
+
+  if (typeof amount !== "undefined") {
+    if (typeof amount !== "number") {
+      throw new TypeError(
+        `Expected message.amount to be a number, got: ${amount}`
+      );
+    }
+    if (amount < 0) {
+      throw new Error(
+        `Expected message.amount to be a positive number, got: ${amount}`
+      );
+    }
+  }
+
+  if (typeof offer !== "undefined") {
+    if (!Array.isArray(offer)) {
+      throw new TypeError(
+        `Expected message.offer to be an array of strings, got: ${String(
+          offer
+        )}`
+      );
+    }
+    const invalidOffers = offer.filter(
+      (o) => !values(MESSAGE_OFFER).includes(o)
+    );
+    if (invalidOffers.length > 0) {
+      throw new Error(`Invalid offer(s): ${invalidOffers.join(",")}`);
+    }
+  }
+
+  if (typeof color !== "undefined" && !values(MESSAGE_COLOR).includes(color)) {
+    throw new Error(`Invalid color: ${color}`);
+  }
+
+  if (
+    typeof position !== "undefined" &&
+    !values(MESSAGE_POSITION).includes(position)
+  ) {
+    throw new Error(`Invalid position: ${position}`);
+  }
+
+  if (typeof align !== "undefined" && !values(MESSAGE_ALIGN).includes(align)) {
+    throw new Error(`Invalid align: ${align}`);
+  }
+
+  return {
+    amount,
+    offer,
+    color,
+    position: calculateMessagePosition(fundingSources, layout, position),
+    align,
+  };
+}
+
 const COUNTRIES = values(COUNTRY);
 const FUNDING_SOURCES = values(FUNDING);
 const ENVS = values(ENV);
@@ -761,6 +854,9 @@ export function normalizeButtonProps(
     supportedNativeBrowser = false,
     showPayLabel = true,
     displayOnly = [],
+    message,
+    messageMarkup,
+    renderedButtons,
   } = props;
 
   const { country, lang } = locale;
@@ -819,6 +915,11 @@ export function normalizeButtonProps(
   }
 
   style = normalizeButtonStyle(props, style);
+  const { layout } = style;
+
+  message = message
+    ? normalizeButtonMessage(message, layout, renderedButtons)
+    : undefined;
 
   return {
     clientID,
@@ -852,5 +953,7 @@ export function normalizeButtonProps(
     supportedNativeBrowser,
     showPayLabel,
     displayOnly,
+    message,
+    messageMarkup,
   };
 }

package/src/ui/buttons/util.js

@@ -1,5 +1,41 @@
 /* @flow */
+import { FUNDING } from "@paypal/sdk-constants/src";
+
+import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
+import { ValidationError } from "../../lib";
 
 export function isBorderRadiusNumber(borderRadius?: number): boolean {
   return typeof borderRadius === "number";
 }
+
+export function calculateShowPoweredBy(
+  layout: $Values<typeof BUTTON_LAYOUT>,
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>
+): boolean {
+  return (
+    layout === BUTTON_LAYOUT.VERTICAL && fundingSources.includes(FUNDING.CARD)
+  );
+}
+
+export function calculateMessagePosition(
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  layout: $Values<typeof BUTTON_LAYOUT>,
+  position?: $Values<typeof MESSAGE_POSITION>
+): $Values<typeof MESSAGE_POSITION> {
+  const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
+
+  if (showPoweredBy && position === MESSAGE_POSITION.BOTTOM) {
+    throw new ValidationError(
+      "Message position must be 'top' when Debit and/or Credit Card button is present"
+    );
+  }
+
+  if (
+    showPoweredBy ||
+    position === MESSAGE_POSITION.TOP ||
+    (layout === BUTTON_LAYOUT.VERTICAL && !position)
+  ) {
+    return MESSAGE_POSITION.TOP;
+  }
+  return MESSAGE_POSITION.BOTTOM;
+}

package/src/zoid/buttons/component.jsx

@@ -73,7 +73,11 @@ import {
   logLatencyInstrumentationPhase,
   prepareInstrumentationPayload,
 } from "../../lib";
-import { normalizeButtonStyle, type ButtonProps } from "../../ui/buttons/props";
+import {
+  normalizeButtonStyle,
+  normalizeButtonMessage,
+  type ButtonProps,
+} from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
 
 import { containerTemplate } from "./container";
@@ -86,6 +90,7 @@ import {
   getRenderedButtons,
   getButtonSize,
   getButtonExperiments,
+  getModal,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
@@ -635,6 +640,24 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getMerchantRequestedPopupsDisabled,
       },
 
+      message: {
+        type: "object",
+        queryParam: true,
+        required: false,
+        decorate: ({ props, value }) => {
+          const {
+            style: { layout },
+            renderedButtons: fundingSources,
+          } = props;
+          return normalizeButtonMessage(
+            // $FlowFixMe
+            value,
+            layout,
+            fundingSources
+          );
+        },
+      },
+
       nonce: {
         type: "string",
         default: getCSPNonce,
@@ -684,6 +707,103 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      onMessageClick: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return async ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            const { message, clientID, merchantID, currency, buttonSessionID } =
+              props;
+            const amount = message?.amount;
+
+            getLogger()
+              .info("button_message_click")
+              .track({
+                [FPTI_KEY.TRANSITION]: "button_message_click",
+                [FPTI_KEY.STATE]: "BUTTON_MESSAGE",
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+                [FPTI_KEY.EVENT_NAME]: "message_click",
+                [FPTI_KEY.SELLER_ID]: merchantID?.join(","),
+                [FPTI_KEY.BUTTON_MESSAGE_OFFER_TYPE]: offerType,
+                [FPTI_KEY.BUTTON_MESSAGE_CREDIT_PRODUCT_IDENTIFIER]:
+                  creditProductIdentifier,
+                [FPTI_KEY.BUTTON_MESSAGE_TYPE]: messageType,
+                [FPTI_KEY.BUTTON_MESSAGE_POSITION]: message?.position,
+                [FPTI_KEY.BUTTON_MESSAGE_ALIGN]: message?.align,
+                [FPTI_KEY.BUTTON_MESSAGE_COLOR]: message?.color,
+                [FPTI_KEY.BUTTON_MESSAGE_OFFER_COUNTRY]: offerCountryCode,
+                [FPTI_KEY.BUTTON_MESSAGE_CURRENCY]: currency,
+                [FPTI_KEY.BUTTON_MESSAGE_AMOUNT]: amount,
+              });
+
+            const modalInstance = await getModal(clientID, merchantID);
+            return modalInstance?.show({
+              amount,
+              offer: offerType,
+              currency,
+            });
+          };
+        },
+      },
+
+      onMessageHover: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return () => {
+            // offerType, messageType, offerCountryCode, and creditProductIdentifier are passed in and may be used in an upcoming message hover logging feature
+
+            // lazy loads the modal, to be memoized and executed onMessageClick
+            const { clientID, merchantID } = props;
+            return getModal(clientID, merchantID);
+          };
+        },
+      },
+
+      onMessageReady: {
+        type: "function",
+        required: false,
+        value: ({ props }) => {
+          return ({
+            offerType,
+            messageType,
+            offerCountryCode,
+            creditProductIdentifier,
+          }) => {
+            const { message, buttonSessionID, currency, merchantID } = props;
+
+            getLogger()
+              .info("button_message_render")
+              .track({
+                [FPTI_KEY.TRANSITION]: "button_message_render",
+                [FPTI_KEY.STATE]: "BUTTON_MESSAGE",
+                [FPTI_KEY.BUTTON_SESSION_UID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
+                [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+                [FPTI_KEY.EVENT_NAME]: "message_render",
+                [FPTI_KEY.SELLER_ID]: merchantID?.join(","),
+                [FPTI_KEY.BUTTON_MESSAGE_OFFER_TYPE]: offerType,
+                [FPTI_KEY.BUTTON_MESSAGE_CREDIT_PRODUCT_IDENTIFIER]:
+                  creditProductIdentifier,
+                [FPTI_KEY.BUTTON_MESSAGE_TYPE]: messageType,
+                [FPTI_KEY.BUTTON_MESSAGE_POSITION]: message?.position,
+                [FPTI_KEY.BUTTON_MESSAGE_ALIGN]: message?.align,
+                [FPTI_KEY.BUTTON_MESSAGE_COLOR]: message?.color,
+                [FPTI_KEY.BUTTON_MESSAGE_CURRENCY]: currency,
+                [FPTI_KEY.BUTTON_MESSAGE_OFFER_COUNTRY]: offerCountryCode,
+                [FPTI_KEY.BUTTON_MESSAGE_AMOUNT]: message?.amount,
+              });
+          };
+        },
+      },
+
       onShippingAddressChange: {
         type: "function",
         required: false,

package/src/zoid/buttons/util.js

@@ -13,6 +13,7 @@ import {
   getElement,
   isStandAlone,
   once,
+  memoize,
 } from "@krakenjs/belter/src";
 import { FUNDING } from "@paypal/sdk-constants/src";
 import {
@@ -22,6 +23,8 @@ import {
   getFundingEligibility,
   getPlatform,
   getComponents,
+  getEnv,
+  getNamespace,
 } from "@paypal/sdk-client/src";
 import { getRefinedFundingEligibility } from "@paypal/funding-components/src";
 
@@ -357,3 +360,53 @@ export function getButtonSize(
     }
   }
 }
+
+function buildModalBundleUrl(): string {
+  let url = __PAYPAL_CHECKOUT__.__URI__.__MESSAGE_MODAL__;
+  if (getEnv() === "sandbox") {
+    url = url.replace("/js/", "/sandbox/");
+  } else if (getEnv() === "stage" || getEnv() === "local") {
+    url = url.replace("/js/", "/stage/");
+  }
+  return url;
+}
+
+export const getModal: (
+  clientID: string,
+  merchantID: $ReadOnlyArray<string> | void
+) => Object = memoize(async (clientID, merchantID) => {
+  try {
+    const namespace = getNamespace();
+    if (!window[namespace].MessagesModal) {
+      // eslint-disable-next-line no-restricted-globals, promise/no-native
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.setAttribute("data-pp-namespace", namespace);
+        script.src = buildModalBundleUrl();
+        script.addEventListener("error", (err: Event) => {
+          reject(err);
+        });
+        script.addEventListener("load", () => {
+          document.body?.removeChild(script);
+          resolve();
+        });
+        document.body?.appendChild(script);
+      });
+    }
+
+    return window[namespace].MessagesModal({
+      account: `client-id:${clientID}`,
+      merchantId: merchantID?.join(",") || undefined,
+    });
+  } catch (err) {
+    // $FlowFixMe flow doesn't seem to understand that the reset function property exists on the function object itself
+    getModal.reset();
+    getLogger()
+      .error("button_message_modal_fetch_error", { err })
+      .track({
+        err: err.message || "BUTTON_MESSAGE_MODAL_FETCH_ERROR",
+        details: err.details,
+        stack: JSON.stringify(err.stack || err),
+      });
+  }
+});