fix: supports empty message object

src/ui/buttons/buttons.jsx

@@ -36,7 +36,7 @@ import { TagLine } from "./tagline";
 import { Script } from "./script";
 import { PoweredByPayPal } from "./poweredBy";
 import { Message } from "./message";
-import { calculateMessagePosition } from "./util";
+import { calculateShowPoweredBy } from "./util";
 
 type GetWalletInstrumentOptions = {|
   wallet: ?Wallet,
@@ -247,14 +247,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
     layout === BUTTON_LAYOUT.HORIZONTAL &&
     !fundingSource &&
     !message;
-  const showPoweredBy =
-    layout === BUTTON_LAYOUT.VERTICAL && fundingSources.includes(FUNDING.CARD);
 
-  const calculatedMessagePosition = calculateMessagePosition({
-    message,
-    showPoweredBy,
-    layout,
-  });
+  const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
 
   return (
     <div
@@ -275,8 +269,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
         fundingEligibility={fundingEligibility}
       />
 
-      {message && calculatedMessagePosition === MESSAGE_POSITION.TOP ? (
-        <Message markup={messageMarkup} position={calculatedMessagePosition} />
+      {message && message.position === MESSAGE_POSITION.TOP ? (
+        <Message markup={messageMarkup} position={message.position} />
       ) : null}
 
       {fundingSources.map((source, i) => (
@@ -332,8 +326,8 @@ export function Buttons(props: ButtonsProps): ElementNode {
 
       {showPoweredBy ? <PoweredByPayPal locale={locale} nonce={nonce} /> : null}
 
-      {message && calculatedMessagePosition === MESSAGE_POSITION.BOTTOM ? (
-        <Message markup={messageMarkup} position={calculatedMessagePosition} />
+      {message && message.position === MESSAGE_POSITION.BOTTOM ? (
+        <Message markup={messageMarkup} position={message.position} />
       ) : null}
 
       <Script nonce={nonce} />

src/ui/buttons/props.js

@@ -48,7 +48,7 @@ import {
 import { getFundingConfig, isFundingEligible } from "../../funding";
 
 import { BUTTON_SIZE_STYLE } from "./config";
-import { isBorderRadiusNumber } from "./util";
+import { isBorderRadiusNumber, calculateMessagePosition } from "./util";
 
 export type CreateOrderData = {||} | {||};
 
@@ -431,9 +431,9 @@ export type ApplePaySessionConfigRequest = (
 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>,
+  color: $Values<typeof MESSAGE_COLOR>,
+  position: $Values<typeof MESSAGE_POSITION>,
+  align: $Values<typeof MESSAGE_ALIGN>,
 |};
 
 export type ButtonMessageInputs = {|
@@ -585,6 +585,7 @@ export type ButtonPropsInputs = {
   displayOnly: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
   message?: ButtonMessageInputs | void,
   messageMarkup?: string | void,
+  renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
 };
 
 export const DEFAULT_STYLE = {
@@ -734,10 +735,17 @@ export function normalizeButtonStyle(
 }
 
 export function normalizeButtonMessage(
-  props: ?ButtonPropsInputs,
-  message: ButtonMessageInputs
+  message: ButtonMessageInputs,
+  layout: $Values<typeof BUTTON_LAYOUT>,
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>
 ): ButtonMessage {
-  const { amount, offer, color, position, align } = message;
+  const {
+    amount,
+    offer,
+    color = MESSAGE_COLOR.BLACK,
+    position,
+    align = MESSAGE_ALIGN.CENTER,
+  } = message;
 
   if (typeof amount !== "undefined") {
     if (typeof amount !== "number") {
@@ -787,7 +795,7 @@ export function normalizeButtonMessage(
     amount,
     offer,
     color,
-    position,
+    position: calculateMessagePosition(fundingSources, layout, position),
     align,
   };
 }
@@ -848,6 +856,7 @@ export function normalizeButtonProps(
     displayOnly = [],
     message,
     messageMarkup,
+    renderedButtons,
   } = props;
 
   const { country, lang } = locale;
@@ -906,6 +915,11 @@ export function normalizeButtonProps(
   }
 
   style = normalizeButtonStyle(props, style);
+  const { layout } = style;
+
+  message = message
+    ? normalizeButtonMessage(message, layout, renderedButtons)
+    : undefined;
 
   return {
     clientID,
@@ -939,7 +953,7 @@ export function normalizeButtonProps(
     supportedNativeBrowser,
     showPayLabel,
     displayOnly,
-    message: message ? normalizeButtonMessage(props, message) : undefined,
+    message,
     messageMarkup,
   };
 }

src/ui/buttons/util.js

@@ -1,28 +1,28 @@
 /* @flow */
+import { FUNDING } from "@paypal/sdk-constants/src";
+
 import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
 import { ValidationError } from "../../lib";
 
-import type { ButtonMessage } from "./props";
-
 export function isBorderRadiusNumber(borderRadius?: number): boolean {
   return typeof borderRadius === "number";
 }
 
-type calculateMessagePositionProps = {|
-  message: ButtonMessage | void,
-  showPoweredBy: boolean,
-  layout: string,
-|};
+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({
-  message,
-  showPoweredBy,
-  layout,
-}: calculateMessagePositionProps): string {
-  if (!message) {
-    return "none";
-  }
-  const { position } = message;
+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(

src/zoid/buttons/component.jsx

@@ -640,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,
@@ -987,16 +1005,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         default: () => window.__TEST_WALLET__,
       },
-
-      message: {
-        type: "object",
-        queryParam: true,
-        required: false,
-        decorate: ({ props, value }) => {
-          // $FlowFixMe
-          return normalizeButtonMessage(props, value);
-        },
-      },
     },
   });
 });

test/integration/tests/button/message.js

@@ -22,6 +22,95 @@ describe(`paypal button message`, () => {
     destroyTestContainer();
   });
 
+  describe("sets computed default values for undefined message properties", () => {
+    it("should populate message color when it is undefined", () => {
+      return wrapPromise(({ expect }) => {
+        window.paypal
+          .Buttons({
+            message: {},
+            test: {
+              onRender: expect("onRender", ({ xprops }) => {
+                const {
+                  message: { color },
+                } = xprops;
+                if (!color) {
+                  throw new Error(
+                    `Expected message color property to be populated: ${JSON.stringify(
+                      xprops.message
+                    )}`
+                  );
+                }
+              }),
+            },
+          })
+          .render("#testContainer");
+      });
+    });
+    it("should populate message align(ment) when it is undefined", () => {
+      return wrapPromise(({ expect }) => {
+        window.paypal
+          .Buttons({
+            message: {},
+            test: {
+              onRender: expect("onRender", ({ xprops }) => {
+                const {
+                  message: { align },
+                } = xprops;
+                if (!align) {
+                  throw new Error(
+                    `Expected message align property to be populated: ${JSON.stringify(
+                      xprops.message
+                    )}`
+                  );
+                }
+              }),
+            },
+          })
+          .render("#testContainer");
+      });
+    });
+    it("should populate position with bottom when layout is horizontal", () => {
+      return wrapPromise(({ expect }) => {
+        window.paypal
+          .Buttons({
+            style: {
+              layout: "horizontal",
+            },
+            message: {},
+            test: {
+              onRender: expect("onRender", ({ xprops }) => {
+                const {
+                  message: { position },
+                } = xprops;
+                assert.equal(position, "bottom");
+              }),
+            },
+          })
+          .render("#testContainer");
+      });
+    });
+    it("should populate position with top when layout is vertical", () => {
+      return wrapPromise(({ expect }) => {
+        window.paypal
+          .Buttons({
+            style: {
+              layout: "vertical",
+            },
+            message: {},
+            test: {
+              onRender: expect("onRender", ({ xprops }) => {
+                const {
+                  message: { position },
+                } = xprops;
+                assert.equal(position, "top");
+              }),
+            },
+          })
+          .render("#testContainer");
+      });
+    });
+  });
+
   describe("reserves space for message", () => {
     it("should reserve space for a message when messageMarkup is undefined", (done) => {
       window.paypal
@@ -121,24 +210,6 @@ describe(`paypal button message`, () => {
     });
   });
 
-  describe("error handling", () => {
-    it("should throw error when position is bottom and credit/debit is a funding source", () => {
-      return wrapPromise(({ expect }) => {
-        window.paypal
-          .Buttons({
-            style: {
-              layout: "vertical",
-            },
-            message: {
-              position: "bottom",
-            },
-            onError: expect("onError"),
-          })
-          .render("#testContainer");
-      });
-    });
-  });
-
   describe(`prop considerations`, () => {
     it("message should take precedence over tagline when both are truthy", (done) => {
       window.paypal

test/integration/tests/button/validation.js

@@ -1004,6 +1004,17 @@ const buttonConfigs = [
         valid: false,
       },
 
+      {
+        message: {
+          amount: 100,
+          offer: ["pay_later_long_term"],
+          color: "black",
+          position: "bottom", // Message position must be 'top' when Debit and/or Credit Card button is present
+          align: "left",
+        },
+        valid: false,
+      },
+
       {
         message: {},
         valid: true,