Merge pull request #44 from mediaopt/feature/35223-color-for-buttons

#35223 only set colors for PayPal buttons
mediaopt · Dec 4, 2023 · 72d5444 · 72d5444
2 parents c2815b7 + 34d1bb8
commit 72d5444
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "private": false,
   "type": "module",
   "license": "MIT",

diff --git a/src/App.tsx b/src/App.tsx
@@ -227,6 +227,18 @@ function App() {
       />
     ),
     PayPalMessages: <PayPalMessages {...PayPalMessagesJson} />,
+    Card: (
+      <PayPal
+        {...params}
+        requestHeader={requestHeader}
+        options={{
+          ...options,
+          components: "messages,buttons",
+          enableFunding: "card",
+        }}
+        fundingSource="card"
+      />
+    ),
     HostedFields: <HostedFields {...HostedFieldsJson} />,
     HostedFieldsVault: (
       <HostedFields

diff --git a/src/components/PayPal/PayPalMask.tsx b/src/components/PayPal/PayPalMask.tsx
@@ -29,18 +29,21 @@ export const PayPalMask: React.FC<CustomPayPalButtonsComponentProps> = (
     if (restprops.style || !settings) {
       return restprops.style;
     }
-    if (
-      settings.paypalButtonConfig &&
-      settings.buttonTagline &&
-      settings.buttonShape
-    ) {
-      return {
-        color: settings.paypalButtonConfig.buttonColor,
-        label: settings.paypalButtonConfig.buttonLabel,
-        shape: settings.buttonShape,
-      };
+    let styles: Record<string, string | boolean> = {};
+    if (settings.paypalButtonConfig) {
+      styles.label = settings.paypalButtonConfig.buttonLabel;
+      if (
+        props.fundingSource &&
+        ["paypal", "paylater"].includes(props.fundingSource)
+      ) {
+        styles.color = settings.paypalButtonConfig.buttonColor;
+      }
     }
-    return restprops.style;
+    if (settings.buttonShape) {
+      styles.shape = settings.buttonShape;
+    }
+
+    return styles;
   }, [settings, restprops]);
 
   const errorFunc = (err: Record<string, unknown>) => {