@paypal/checkout-components 5.0.203 → 5.0.206

package/package.json

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

package/src/constants/button.js

@@ -61,3 +61,7 @@ export const MENU_PLACEMENT = {
     ABOVE:   ('above' : 'above'),
     BELOW: ('below' : 'below')
 };
+
+export const EXPERIENCE = {
+    INLINE: ('inline' : 'inline')
+};

package/src/constants/class.js

@@ -38,5 +38,7 @@ export const CLASS = {
 
     HIDDEN:  ('hidden' : 'hidden'),
 
-    IMMEDIATE: ('immediate' : 'immediate')
+    IMMEDIATE: ('immediate' : 'immediate'),
+
+    CUSTOM: ('custom' : 'custom')
 };

package/src/funding/card/config.jsx

@@ -121,7 +121,15 @@ export function getCardConfig() : FundingSourceConfig {
             );
         },
 
-        Label: ({ logo, locale, content }) => {
+        Label: ({ logo, locale, content, custom }) => {
+            if (custom && custom.label) {
+                return (
+                    <Fragment>
+                        <Text>{ custom.label }</Text>
+                        <Space />
+                    </Fragment>
+                );
+            }
             const { lang } = locale;
             const isRTL = isRTLLanguage(lang);
             return (

package/src/funding/common.jsx

@@ -7,7 +7,7 @@ import type { FundingEligibilityType } from '@paypal/sdk-client/src';
 import { PLATFORM, type LocaleType, COUNTRY, CARD, COMPONENTS, FUNDING, ENV } from '@paypal/sdk-constants/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 
-import type { ContentType, WalletInstrument, Experiment, Requires, Wallet } from '../types';
+import type { ContentType, CustomStyle, WalletInstrument, Experiment, Requires, Wallet } from '../types';
 import { BUTTON_COLOR, BUTTON_SHAPE, BUTTON_LAYOUT, DEFAULT, BUTTON_LABEL, BUTTON_FLOW, TEXT_COLOR } from '../constants';
 import type { Personalization } from '../ui/buttons/props';
 
@@ -47,7 +47,8 @@ export type LabelOptions = {|
     nonce : ?string,
     tagline : ?boolean,
     content : ?ContentType,
-    experiment? : Experiment
+    experiment? : Experiment,
+    custom? : ?CustomStyle
 |};
 
 export type DesignExperimentLabelOptions = {|

package/src/types.js

@@ -53,6 +53,13 @@ export type Requires = {|
     native? : boolean
 |};
 
+export type CustomStyle = {|
+    css : {|
+        [string] : string
+    |},
+    label : string
+|};
+
 export type LazyExport<T> = {|
     __get__ : () => T
 |};

package/src/ui/buttons/button.jsx

@@ -8,7 +8,7 @@ import { LOGO_COLOR, LOGO_CLASS } from '@paypal/sdk-logos/src';
 import { noop, preventClickFocus, isBrowser, isElement } from 'belter/src';
 
 import type { ContentType, Wallet, Experiment, WalletInstrument } from '../../types';
-import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, TEXT_COLOR, BUTTON_FLOW } from '../../constants';
+import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, EXPERIENCE, TEXT_COLOR, BUTTON_FLOW } from '../../constants';
 import { getFundingConfig } from '../../funding';
 import { DesignExperimentLabel } from '../../funding/paypal/template';
 
@@ -38,12 +38,14 @@ type IndividualButtonProps = {|
     flow : $Values<typeof BUTTON_FLOW>,
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
-    instrument : ?WalletInstrument
+    instrument : ?WalletInstrument,
+    experience? : string
 |};
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
-    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
 
+    const inlineExperience = experience === EXPERIENCE.INLINE;
     const fundingConfig = getFundingConfig()[fundingSource];
 
     if (!fundingConfig) {
@@ -94,9 +96,9 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
         }
     };
 
-    const { layout, shape } = style;
+    const { custom, layout, shape } = style;
     
-    const labelText =  typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+    const labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
 
     const logoNode = (
         <Logo
@@ -129,6 +131,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             personalization={ personalization }
             tagline={ tagline }
             content={ content }
+            custom={ inlineExperience ? custom : null }
             experiment={ experiment }
         />
     );
@@ -197,6 +200,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
         <div
             class={ [
                 CLASS.BUTTON_ROW,
+                inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
                 `${ CLASS.NUMBER }-${ i }`,
                 `${ CLASS.LAYOUT }-${ layout }`,
                 `${ CLASS.SHAPE }-${ shape }`,
@@ -221,6 +225,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 } }
                 class={ [
                     CLASS.BUTTON,
+                    inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
                     `${ CLASS.NUMBER }-${ i }`,
                     `${ CLASS.LAYOUT }-${ layout }`,
                     `${ CLASS.SHAPE }-${ shape }`,

package/src/ui/buttons/buttons.jsx

@@ -6,7 +6,7 @@ import { FUNDING, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
 import { noop } from 'belter/src';
 
 import type { Wallet, WalletInstrument } from '../../types';
-import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT, BUTTON_FLOW } from '../../constants';
+import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT, BUTTON_FLOW, EXPERIENCE } from '../../constants';
 import { determineEligibleFunding, isWalletFundingEligible } from '../../funding';
 import { ValidationError } from '../../lib';
 
@@ -99,8 +99,10 @@ export function validateButtonProps(props : ButtonPropsInputs) {
 export function Buttons(props : ButtonsProps) : ElementNode {
     const { onClick = noop } = props;
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
-        nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport, supportsPopups, supportedNativeBrowser } = normalizeButtonProps(props);
+        nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
+        supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { layout, shape, tagline } = style;
+    const inlineExperience = experience === EXPERIENCE.INLINE;
 
     let fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     const multiple = fundingSources.length > 1;
@@ -110,7 +112,11 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     }
 
     if (fundingSources.indexOf(FUNDING.CARD) !== -1) {
-        fundingSources = [ ...fundingSources.filter(src => src !== FUNDING.CARD),  FUNDING.CARD ];
+        if (inlineExperience) {
+            fundingSources = [ FUNDING.CARD, ...fundingSources.filter(src => src !== FUNDING.CARD) ];
+        } else {
+            fundingSources = [ ...fundingSources.filter(src => src !== FUNDING.CARD),  FUNDING.CARD ];
+        }
     }
 
     const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange });
@@ -121,6 +127,18 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     );
 
     const { buttonDesignScript = '' } = getButtonDesign(personalization);
+    const index = (i) => {
+        if (!inlineExperience) {
+            return i;
+        }
+
+        // InlineXO: Need to change color indexing because we bring Cards to the top
+        if (i === 0) {
+            return fundingSources.length - 1;
+        } else {
+            return i - 1;
+        }
+    };
 
     return (
         <div class={ [
@@ -142,7 +160,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                 fundingSources.map((source, i) => (
                     <Button
                         content={ content }
-                        i={ i }
+                        i={ index(i) }
                         style={ style }
                         merchantFundingSource={ fundingSource }
                         fundingSource={ source }
@@ -162,6 +180,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         flow={ flow }
                         vault={ vault }
                         instrument={ instruments[source] }
+                        experience={ experience }
                     />
                 ))
             }

package/src/ui/buttons/props.js

@@ -12,7 +12,7 @@ import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
 import type { ComponentFunctionType } from 'jsx-pragmatic/src';
 
-import type { ContentType, Wallet, Experiment } from '../../types';
+import type { ContentType, CustomStyle, Wallet, Experiment } from '../../types';
 import { BUTTON_LABEL, BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_SHAPE, BUTTON_SIZE, BUTTON_FLOW, MENU_PLACEMENT } from '../../constants';
 import { getFundingConfig, isFundingEligible } from '../../funding';
 
@@ -130,7 +130,8 @@ export type ButtonStyle = {|
     layout : $Values<typeof BUTTON_LAYOUT>,
     menuPlacement : $Values<typeof MENU_PLACEMENT>,
     period? : number,
-    height? : number
+    height? : number,
+    custom? : CustomStyle
 |};
 
 export type ButtonStyleInputs = {|
@@ -140,7 +141,8 @@ export type ButtonStyleInputs = {|
     tagline? : boolean | void,
     layout? : $Values<typeof BUTTON_LAYOUT> | void,
     period? : number | void,
-    height? : number | void
+    height? : number | void,
+    custom? : CustomStyle
 |};
 
 type PersonalizationComponentProps = {|
@@ -262,7 +264,7 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    inline : boolean | void
+    experience : string
 |};
 
 export type PrerenderDetails = {|
@@ -311,7 +313,7 @@ export type ButtonProps = {|
     applePay : ApplePaySessionConfigRequest,
     meta : {||},
     renderedButtons : $ReadOnlyArray<$Values<typeof FUNDING>>,
-    inline : boolean | void
+    experience : string
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -349,7 +351,7 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    inline : boolean | void
+    experience : string
 };
 
 export const DEFAULT_STYLE = {
@@ -397,7 +399,8 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         tagline = (layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource),
         height,
         period,
-        menuPlacement = MENU_PLACEMENT.BELOW
+        menuPlacement = MENU_PLACEMENT.BELOW,
+        custom
     } = style;
 
     // $FlowFixMe
@@ -443,7 +446,7 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         }
     }
 
-    return { label, layout, color, shape, tagline, height, period, menuPlacement };
+    return { custom, label, layout, color, shape, tagline, height, period, menuPlacement };
 }
 
 const COUNTRIES = values(COUNTRY);
@@ -494,7 +497,7 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        inline = false
+        experience = ''
     } = props;
 
     const { country, lang } = locale;
@@ -537,5 +540,5 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
 
     return { clientID, fundingSource, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
         buttonSessionID, commit, sessionID, nonce, components, onShippingChange, personalization, content, wallet, flow,
-        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, inline };
+        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
 }

package/src/ui/buttons/style.jsx

@@ -15,8 +15,8 @@ type StyleProps = {|
 
 export function Style({ style, nonce, fundingEligibility } : StyleProps) : ElementNode {
 
-    const { height } = style;
-    const css = componentStyle({ height, fundingEligibility });
+    const { custom, height } = style;
+    const css = componentStyle({ custom, height, fundingEligibility });
 
     return (
         <style nonce={ nonce } innerHTML={ css } />

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

@@ -2,18 +2,22 @@
 
 import { type FundingEligibilityType } from '@paypal/sdk-constants/src';
 
+import type { CustomStyle } from '../../../types';
+
 import { pageStyle } from './page';
 import { buttonStyle } from './button';
 import { labelStyle } from './labels';
 import { buttonResponsiveStyle } from './responsive';
 import { buttonColorStyle } from './color';
+import { customStyle } from './custom';
 
-export function componentStyle({ height, fundingEligibility } : {| height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
+export function componentStyle({ custom, height, fundingEligibility } : {| custom? : CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
     return `
         ${ pageStyle }
         ${ buttonStyle }
         ${ buttonColorStyle }
         ${ labelStyle }
         ${ buttonResponsiveStyle({ height, fundingEligibility }) }
+        ${ customStyle({ custom }) }
     `;
 }

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

@@ -1,9 +1,9 @@
 /* @flow */
 
-import { ENV, FUNDING } from '@paypal/sdk-constants/src';
+import { ENV } from '@paypal/sdk-constants/src';
 import { LOGO_CLASS } from '@paypal/sdk-logos/src';
 
-import { CLASS, ATTRIBUTE } from '../../../constants';
+import { CLASS } from '../../../constants';
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -126,11 +126,6 @@ export const buttonStyle = `
         margin-top: 10px;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VENMO }] .${ CLASS.BUTTON_LABEL } .${ CLASS.TEXT } {
-        font-size: 18px;
-        font-weight: 500;
-    }
-
     @media only screen and (max-width: ${ MIN_VAULT_BUTTON_WIDTH }px) {
         .menu-button {
             display: none;

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

@@ -0,0 +1,31 @@
+/* @flow */
+
+import type { CustomStyle } from '../../../types';
+import { CLASS } from '../../../constants';
+
+export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string => {
+    if (!custom) {
+        return '';
+    }
+
+    const { css } = custom || {};
+
+    let heightStyle = '';
+    let marginStyle = '';
+    let style = Object.keys(css).reduce((acc, key) => {
+        if (key === 'height') {
+            heightStyle = `
+                    height: ${ css[key] };
+                    max-height: ${ css[key] };
+            `;
+        } else if (key.indexOf('margin') !== -1) {
+            marginStyle = `${ key }: ${ css[key] };`;
+        }
+        
+        acc += `${ key }: ${ css[key] };`;
+        return acc;
+    }, '');
+    style = `.${ CLASS.BUTTON }.${ CLASS.CUSTOM } { ${ style } } .${ CLASS.BUTTON_ROW }.${ CLASS.CUSTOM } { ${ heightStyle + marginStyle }}`;
+
+    return style;
+};

package/src/zoid/buttons/component.jsx

@@ -16,6 +16,7 @@ import { node, dom } from 'jsx-pragmatic/src';
 import { getSessionID, storageState, sessionState } from '../../lib';
 import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
+import { EXPERIENCE } from '../../constants';
 
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
@@ -597,10 +598,16 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 value:      applePaySession
             },
 
-            inline: {
+            experience: {
                 queryParam: true,
                 required:   false,
-                type:       'boolean'
+                type:       'string',
+                value:      ({ props }) => {
+                    const { style: { custom }, fundingEligibility } = props;
+                    const isInlineXO = (custom && (custom.label || custom.css)) && fundingEligibility[FUNDING.CARD]?.eligible;
+
+                    return isInlineXO ? EXPERIENCE.INLINE : '';
+                }
             },
 
             // allowBillingPayments prop is used by Honey Extension to render the one-click button

package/src/zoid/checkout/component.jsx

@@ -50,7 +50,7 @@ export function getCheckoutComponent() : CheckoutComponent {
             },
 
             containerTemplate: ({ context, close, focus, doc, event, frame, prerenderFrame, props }) => {
-                const { nonce, locale: { lang }, inline } = props;
+                const { nonce, locale: { lang }, inlinexo } = props;
                 const content = containerContent[lang];
                 return (
                     <Overlay
@@ -62,7 +62,7 @@ export function getCheckoutComponent() : CheckoutComponent {
                         prerenderFrame={ prerenderFrame }
                         content={ content }
                         nonce={ nonce }
-                        fullScreen={ inline === true }
+                        fullScreen={ inlinexo === true }
                     />
                 ).render(dom({ doc }));
             },
@@ -232,7 +232,7 @@ export function getCheckoutComponent() : CheckoutComponent {
                     default: () => (window.__test__ || { action: 'checkout' })
                 },
 
-                inline: {
+                inlinexo: {
                     type:           'boolean',
                     required:       false,
                     queryParam:     true,

package/src/zoid/checkout/props.js

@@ -39,5 +39,5 @@ export type CheckoutPropsType = {|
     csp : {|
         nonce : string
     |},
-    inline : boolean
+    inlinexo : boolean
 |};