Fix button styles when paypal button is not vaultable (#2420)

paypal · Jul 25, 2024 · 92006e4 · 92006e4
1 parent c9ab018
commit 92006e4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/ui/buttons/button.jsx b/src/ui/buttons/button.jsx
@@ -107,7 +107,12 @@ export function Button({
   const colors = fundingConfig.colors;
   const secondaryColors = fundingConfig.secondaryColors || {};
 
-  let { color = colors[0], period, label } = style;
+  let { color, period, label } = style;
+
+  // if no color option is passed in via style props, use the default color value from the funding source config
+  if (color === "" || typeof color === "undefined") {
+    color = colors[0];
+  }
 
   if (multiple && i > 0) {
     if (

diff --git a/src/ui/buttons/props.js b/src/ui/buttons/props.js
@@ -317,7 +317,7 @@ export type OnClick = (OnClickData, OnClickActions) => void;
 
 export type ButtonStyle = {|
   label: $Values<typeof BUTTON_LABEL> | void,
-  color: $Values<typeof BUTTON_COLOR>,
+  color?: $Values<typeof BUTTON_COLOR>,
   shape: $Values<typeof BUTTON_SHAPE>,
   tagline: boolean,
   layout: $Values<typeof BUTTON_LAYOUT>,
@@ -644,6 +644,7 @@ export function normalizeButtonStyle(
   }
 
   let {
+    color,
     label,
     layout = fundingSource
       ? BUTTON_LAYOUT.HORIZONTAL
@@ -664,9 +665,6 @@ export function normalizeButtonStyle(
     tagline = false;
   }
 
-  // if color is a falsy value, set it to the default color from the funding config
-  const color = style.color ? style.color : fundingConfig.colors[0];
-
   if (values(BUTTON_LAYOUT).indexOf(layout) === -1) {
     throw new Error(`Invalid layout: ${layout}`);
   }

diff --git a/test/integration/tests/button/style.js b/test/integration/tests/button/style.js
@@ -67,7 +67,7 @@ describe("paypal button color", () => {
     destroyTestContainer();
   });
 
-  it("should render a button with gold background when no color is specified", () => {
+  it("should render a button with gold background when empty string is passed in for color", () => {
     return window.paypal
       .Buttons({
         style: {
@@ -80,6 +80,15 @@ describe("paypal button color", () => {
       });
   });
 
+  it("should render a button with gold background when no color is specified", () => {
+    return window.paypal
+      .Buttons()
+      .render("#testContainer")
+      .then(() => {
+        assert.ok(getElementRecursive(".paypal-button-color-gold"));
+      });
+  });
+
   it('should render a button with black background when passed "black"', () => {
     return window.paypal
       .Buttons({
@@ -97,7 +106,7 @@ describe("paypal button color", () => {
     return window.paypal
       .Buttons({
         style: {
-          color: "",
+          color: "gold",
         },
       })
       .render("#testContainer")