@paypal/checkout-components 5.0.229 → 5.0.231

package/package.json

@@ -1,19 +1,15 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.229",
+    "version": "5.0.231",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
-    "engines": {
-        "node": ">=14.13.1 <16",
-        "npm": ">=6"
-    },
     "scripts": {
-        "dev": "babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open-page demo/dev/index.htm --https --hot=false --inline=false",
+        "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open-page demo/dev/index.htm --https --hot=false --inline=false",
         "lint": "eslint --ext .js --ext .jsx src/ test/ *.js",
         "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",
         "flow": "flow",
         "karma": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start",
-        "test": "if [ ! $SKIP_TEST ]; then npm run lint && npm run flow-typed && npm run flow && npm run jest-ssr && npm run karma && npm run jest-screenshot; fi;",
+        "test": "npm run check-node-version && npm run lint && npm run flow-typed && npm run flow && npm run jest-ssr && npm run karma && npm run jest-screenshot",
         "webpack": "babel-node $(npm bin)/webpack --progress",
         "webpack-size": "babel-node $(npm bin)/webpack --progress --config webpack.config.size",
         "build": "npm run test && npm run webpack",
@@ -31,7 +27,8 @@
         "jest-e2e": "rm -f ./test/e2e/screenshots/*.png && jest test/e2e",
         "check-size": "npm run webpack-size && bundlemon && npm run delete-size",
         "delete-size": "rm dist/size.* dist/report.html",
-        "prepare": "husky install"
+        "prepare": "husky install",
+        "check-node-version": "node scripts/check-node-version.js"
     },
     "files": [
         "src/",
@@ -48,7 +45,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git://github.com/paypal/paypal-checkout-components.git"
+        "url": "https://github.com/paypal/paypal-checkout-components.git"
     },
     "homepage": "https://developer.paypal.com/",
     "keywords": [

package/src/zoid/buttons/component.jsx

@@ -29,8 +29,8 @@ import { type InlineXOEligibilityType } from '../../types';
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
 import { applePaySession, determineFlow, isSupportedNativeBrowser, createVenmoExperiment,
-    createNoPaylaterExperiment, getRenderedButtons, getButtonSize, getButtonExperiments, isInlineXOEligible } from './util';
-    
+    getRenderedButtons, getButtonSize, getButtonExperiments, isInlineXOEligible } from './util';
+
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
 
@@ -53,7 +53,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
 
         prerenderTemplate: ({ state, props, doc, event }) => {
             const { buttonSessionID } = props;
-            
+
             if (!isLocalStorageEnabled()) {
                 getLogger().info('localstorage_inaccessible_possible_private_browsing').track({
                     [ FPTI_KEY.BUTTON_SESSION_UID ]: buttonSessionID,
@@ -114,7 +114,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 fundingEligibility = getRefinedFundingEligibility(),
                 supportsPopups = userAgentSupportsPopups(),
                 supportedNativeBrowser = isSupportedNativeBrowser(),
-                experiment = getButtonExperiments(fundingSource),
+                experiment = getButtonExperiments(),
                 createBillingAgreement, createSubscription
             } = props;
 
@@ -319,23 +319,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                     logLatencyInstrumentationPhase({ buttonSessionID: props.buttonSessionID, phase: 'buttons-first-render' });
 
                     return (...args) => {
-                        const { fundingSource } = props;
                         const venmoExperiment = createVenmoExperiment();
 
                         if (venmoExperiment) {
                             venmoExperiment.logStart({ [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID });
                         }
 
-                        const enableNoPaylaterExperiment = createNoPaylaterExperiment(fundingSource);
-
-                        if (enableNoPaylaterExperiment) {
-                            enableNoPaylaterExperiment.logStart({
-                                [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
-                                [ FPTI_KEY.CONTEXT_ID ]:         props.buttonSessionID,
-                                [ FPTI_KEY.CONTEXT_TYPE ]:       'button_session_id'
-                            });
-                        }
-
                         return value(...args);
                     };
                 }
@@ -466,9 +455,8 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             experiment: {
                 type:       'object',
                 queryParam: true,
-                value:      ({ props }) => {
-                    const { fundingSource } = props;
-                    const experiments = getButtonExperiments(fundingSource);
+                value:      () => {
+                    const experiments = getButtonExperiments();
                     return experiments;
                 }
             },
@@ -664,7 +652,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required:   false,
                 type:       'string',
                 value:      ({ props }) => {
-                    const { env, clientID, merchantID, commit, createBillingAgreement, currency, disableFunding = [], experience, fundingEligibility, locale, style: { layout }, vault } = props || {};
+                    const { commit, createBillingAgreement, currency, disableFunding = [], experience, fundingEligibility, locale, onComplete, style : { custom = {}, layout }, vault } = props || {};
 
                     if (experience === 'inline') {
                         return EXPERIENCE.INLINE;
@@ -674,47 +662,19 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                         eligible: false
                     };
 
-                    let alphaEligible = true;
-                    if (env === 'sandbox') {
-                        const validMerchantIDs = [
-                            'PJEHAEK4YBEDJ',
-                            'RMADGM9SZGSPJ',
-                            '5AZBQ2LU7HVE6',
-                            'SMJKX2JD3V27L',
-                            'RB28JB2TP9RA4'
-                        ];
-                        const eligibleMerchantID = merchantID && merchantID.length && merchantID.reduce((acc, id) => {
-                            return acc && validMerchantIDs.indexOf(id) !== -1;
-                        }, true);
-
-                        alphaEligible = clientID === 'AbUf2xGyVtp8HedZjyx9we1V2eRV9-Q7bLTVfr9Y-FFpG8dbWAaQ0AFqeh2dq_HYHrV_1GUPXGv6GMKp'
-                            && eligibleMerchantID;
-                    } else if (env === 'production') {
-                        const validMerchantIDs = [
-                            'G4Z8SJD6PEZ2G'
-                        ];
-
-                        const eligibleMerchantID = merchantID && merchantID.length && merchantID.reduce((acc, id) => {
-                            return acc && validMerchantIDs.indexOf(id) !== -1;
-                        }, true);
-
-                        if (clientID === 'AT2hsh6PFa_pvqYVni64Ik2Ojaluh_l9DU3KwXuHb-sgj8q9zZrmob2TUsmvu4rjJ869oHUAlIAqJf9R') {
-                            alphaEligible = eligibleMerchantID;
-
-                        }
-                    }
-
-                    const eligible = inlineCheckoutEligibility && inlineCheckoutEligibility.eligible && alphaEligible && isInlineXOEligible({ props: {
+                    const eligible = inlineCheckoutEligibility && inlineCheckoutEligibility.eligible && isInlineXOEligible({ props: {
                         commit,
                         createBillingAgreement,
                         currency,
+                        custom,
                         disableFunding,
                         fundingEligibility,
                         layout,
                         locale,
+                        onComplete,
                         vault
                     } });
-                    
+
                     const logger = getLogger();
 
                     logger
@@ -724,7 +684,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                             [ FPTI_KEY.TRANSITION ]: `inline_xo_eligibility_${ String(eligible) }`
                         }).flush();
 
-                    return eligible ? EXPERIENCE.INLINE : '';
+                        return eligible ? EXPERIENCE.INLINE : '';
                 }
             },
 

package/src/zoid/buttons/util.js

@@ -1,7 +1,7 @@
 /* @flow */
 import { supportsPopups as userAgentSupportsPopups, isAndroid, isChrome, isIos, isIOS14, isSafari, isSFVC, type Experiment, isDevice, isTablet, getElement, isLocalStorageEnabled, isStandAlone, once } from '@krakenjs/belter/src';
 import { COUNTRY, CURRENCY, ENV, FUNDING, type LocaleType } from '@paypal/sdk-constants/src';
-import { getEnableFunding, getDisableFunding, getLogger, createExperiment, getFundingEligibility, getPlatform, getComponents, getEnv, type FundingEligibilityType } from '@paypal/sdk-client/src';
+import { getEnableFunding, getLogger, createExperiment, getFundingEligibility, getPlatform, getComponents, getEnv, type FundingEligibilityType } from '@paypal/sdk-client/src';
 import { getRefinedFundingEligibility } from '@paypal/funding-components/src';
 
 import type { Experiment as EligibilityExperiment } from '../../types';
@@ -126,39 +126,6 @@ export function getVenmoExperiment() : EligibilityExperiment {
     }
 }
 
-export function createNoPaylaterExperiment(fundingSource : ?$Values<typeof FUNDING>) : Experiment | void {
-    const disableFunding = getDisableFunding();
-    const isDisableFundingPaylater = disableFunding && disableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-    const enableFunding = getEnableFunding();
-    const isEnableFundingPaylater = enableFunding && enableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-
-    const { paylater } = getFundingEligibility();
-    const isEligibleForPaylater = paylater?.eligible;
-    const isExperimentable = paylater?.products?.paylater?.variant === 'experimentable' || paylater?.products?.payIn4?.variant === 'experimentable';
-    // No experiment because ineligible, already forced on or off
-    if (!isEligibleForPaylater
-        || !isExperimentable
-        || isDisableFundingPaylater
-        || isEnableFundingPaylater
-        || fundingSource
-    ) {
-        return;
-    }
-
-    return createExperiment('disable_paylater', 0);
-}
-
-export function getNoPaylaterExperiment(fundingSource : ?$Values<typeof FUNDING>) : EligibilityExperiment {
-    const experiment = createNoPaylaterExperiment(fundingSource);
-
-    const disableFunding = getDisableFunding();
-    const isDisableFundingPaylater = disableFunding && disableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-    const isExperimentEnabled = experiment && experiment.isEnabled();
-    return {
-        disablePaylater: Boolean((isExperimentEnabled || isDisableFundingPaylater))
-    };
-}
-
 export function getVenmoAppLabelExperiment() : EligibilityExperiment  {
     const isEnvForTest = getEnv() === ENV.LOCAL || getEnv() === ENV.TEST || getEnv() === ENV.STAGE;
 
@@ -259,10 +226,9 @@ export function applePaySession() : ?ApplePaySessionConfigRequest {
     }
 }
 
-export function getButtonExperiments (fundingSource : ?$Values<typeof FUNDING>) : EligibilityExperiment {
+export function getButtonExperiments () : EligibilityExperiment {
     return {
         ...getVenmoExperiment(),
-        ...getNoPaylaterExperiment(fundingSource),
         ...getVenmoAppLabelExperiment()
     };
 }
@@ -329,14 +295,22 @@ type InlineCheckoutEligibilityProps = {|
     layout : $Values<typeof BUTTON_LAYOUT>,
     locale : LocaleType,
     merchantID? : $ReadOnlyArray<string>,
-    onComplete? : Function,
+    onComplete : Function,
+    custom? : ?{|
+        css? : {|
+            [string] : string
+        |},
+        label? : string
+    |},
     vault : boolean
 |};
 
 export function isInlineXOEligible({ props } : {| props : InlineCheckoutEligibilityProps |}) : boolean {
-    const { commit, currency, createBillingAgreement, disableFunding, fundingEligibility, layout, locale, vault } = props;
+    const { commit, currency, custom, createBillingAgreement, disableFunding, fundingEligibility, layout, locale, onComplete, vault } = props;
 
     const isEligible = (
+        custom?.label && custom.label.length > 0,
+        onComplete &&
         locale.country === COUNTRY.US &&
         commit === true &&
         !createBillingAgreement &&

package/src/zoid/payment-fields/container.jsx

@@ -67,20 +67,20 @@ export function PaymentFieldsContainer({ uid, frame, prerenderFrame, event, nonc
                         min-width: 250px;
                         max-width: 100%;
                         font-size: 0;
-                        height: 150px;
-                        min-height: 150px;
+                        height: 91px;
+                        min-height: 91px;
                         transition: all 0.5s ease-in-out;
                     }
 
                     @media only screen and (min-width: 0px) {
                         #${ uid } {
-                            min-height: 150px;
+                            min-height: 91px;
                         }
                     }
 
                     @media only screen and (min-width: 600px) {
                         #${ uid } {
-                            min-height: 150px;
+                            min-height: 91px;
                         }
                     }