@paypal/checkout-components 5.0.215 → 5.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.215",
+    "version": "5.0.218",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {

package/src/funding/card/config.jsx

@@ -122,15 +122,16 @@ export function getCardConfig() : FundingSourceConfig {
         },
 
         Label: ({ logo, locale, content, custom }) => {
-            if (custom) {
+            if (custom && custom.label && custom.label.length) {
                 const validLabels = {
                     checkout: 'Checkout'
                 };
 
-                let label = 'Checkout';
+                let label = validLabels.checkout;
 
-                if (custom.label && typeof custom.label === 'string' && validLabels[custom.label.toLowerCase()]) {
-                    label = validLabels[custom.label];
+                const lowerCaseLabel = custom.label.toLowerCase();
+                if (validLabels[lowerCaseLabel]) {
+                    label = validLabels[lowerCaseLabel];
                 }
 
                 return (

package/src/types.js

@@ -54,10 +54,10 @@ export type Requires = {|
 |};
 
 export type CustomStyle = {|
-    css : {|
+    css? : {|
         [string] : string
     |},
-    label : string
+    label? : string
 |};
 
 export type LazyExport<T> = {|

package/src/ui/buttons/button.jsx

@@ -46,7 +46,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
     userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
     
     const { custom, layout, shape } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
     const fundingConfig = getFundingConfig()[fundingSource];
 
     if (!fundingConfig) {
@@ -130,7 +130,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             personalization={ personalization }
             tagline={ tagline }
             content={ content }
-            custom={ inlineExperience ? custom : null }
+            custom={ inlineExperience ? custom : undefined }
             experiment={ experiment }
         />
     );

package/src/ui/buttons/buttons.jsx

@@ -102,7 +102,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
         nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
         supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
 
     let fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     const multiple = fundingSources.length > 1;

package/src/ui/buttons/props.js

@@ -138,7 +138,7 @@ export type ButtonStyle = {|
     menuPlacement : $Values<typeof MENU_PLACEMENT>,
     period? : number,
     height? : number,
-    custom? : CustomStyle
+    custom? : ?CustomStyle
 |};
 
 export type ButtonStyleInputs = {|
@@ -149,7 +149,7 @@ export type ButtonStyleInputs = {|
     layout? : $Values<typeof BUTTON_LAYOUT> | void,
     period? : number | void,
     height? : number | void,
-    custom? : CustomStyle
+    custom? : ?CustomStyle
 |};
 
 type PersonalizationComponentProps = {|
@@ -454,6 +454,28 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         }
     }
 
+    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, shape, tagline, height, period, menuPlacement };
 }
 

package/src/ui/buttons/style.jsx

@@ -15,7 +15,7 @@ type StyleProps = {|
 
 export function Style({ style, nonce, fundingEligibility } : StyleProps) : ElementNode {
 
-    const { custom, height } = style;
+    const { custom = { label: undefined, css: undefined }, height } = style;
     const css = componentStyle({ custom, height, fundingEligibility });
 
     return (

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

@@ -11,7 +11,7 @@ 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 {
+export function componentStyle({ custom, height, fundingEligibility } : {| custom? : ?CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
     return `
         ${ pageStyle }
         ${ buttonStyle }

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

@@ -3,7 +3,7 @@
 import type { CustomStyle } from '../../../types';
 import { CLASS } from '../../../constants';
 
-export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string => {
+export const customStyle = ({ custom } : {| custom? : ?CustomStyle |}) : string => {
     const { css } = custom || {};
     
     if (!css) {

package/src/zoid/buttons/prerender.jsx

@@ -10,6 +10,7 @@ import { getLogger } from '@paypal/sdk-client/src';
 import type { ZoidProps } from '@krakenjs/zoid/src';
 
 import { DEFAULT_POPUP_SIZE } from '../checkout';
+import { EXPERIENCE } from '../../constants';
 import { Buttons } from '../../ui';
 import { type ButtonProps } from '../../ui/buttons/props';
 
@@ -41,7 +42,7 @@ export function PrerenderedButtons({ nonce, onRenderCheckout, props } : Prerende
             [ FPTI_KEY.CHOSEN_FUNDING]:      fundingSource
         }).flush();
 
-        if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY) {
+        if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY || (fundingSource === FUNDING.CARD && props.experience === EXPERIENCE.INLINE)) {
             // wait for button to load
         } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
             // remember the popup window to prevent showing a new popup window on every click in the prerender state