@paypal/checkout-components 5.0.252-alpha.2 → 5.0.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.252-alpha.2",
+  "version": "5.0.252",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -28,11 +28,13 @@
     "start": "npm run webpack -- --progress --watch",
     "test": "npm run test:unit && npm run jest-ssr && npm run karma && npm run jest-screenshot",
     "test:unit": "vitest",
+    "percy-screenshot": "babel-node ./test/percy/server/createButtonConfigs.js && percy exec -- playwright test --config=./test/percy/playwright.config.js --reporter=dot --pass-with-no-tests",
     "typecheck": "npm run flow-typed && npm run flow",
     "version": "./scripts/version.sh",
     "webpack": "babel-node $(npm bin)/webpack",
     "webpack-size": "npm run webpack -- --config webpack.config.size",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "screenshot-server": "babel-node ./test/percy/server/index.js"
   },
   "files": [
     "src/",
@@ -66,6 +68,9 @@
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@krakenjs/grumbler-scripts": "^8.0.7",
     "@krakenjs/sync-browser-mocks": "^3.0.0",
+    "@percy/cli": "^1.16.0",
+    "@percy/playwright": "^1.0.4",
+    "@playwright/test": "^1.28.1",
     "babel-core": "^7.0.0-bridge.0",
     "bundlemon": "^1.1.0",
     "conventional-changelog-cli": "^2.0.34",
@@ -84,6 +89,7 @@
     "mocha": "^4.1.0",
     "mocketeer": "^0.3.1",
     "pixelmatch": "^5.2.1",
+    "playwright": "^1.29.1",
     "pngjs": "^6.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-sh": "^0.10.0",
@@ -103,7 +109,7 @@
     "@paypal/funding-components": "^1.0.30",
     "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.127",
-    "@paypal/sdk-logos": "^2.2.1"
+    "@paypal/sdk-logos": "^2.2.3"
   },
   "lint-staged": {
     "*.sh": "prettier --write"

package/src/funding/applepay/config.jsx

@@ -5,6 +5,7 @@ import { PLATFORM, FUNDING } from '@paypal/sdk-constants/src';
 import { ApplePayLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
 
 import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 import { Mark } from './template';
@@ -35,7 +36,7 @@ export function getApplePayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => ApplePayLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(ApplePayLogo, { logoColor, optional }),
         Mark: ({ ...props }) => Mark({ ...props }),
 
         colors: [

package/src/funding/applepay/template.jsx

@@ -4,12 +4,14 @@
 import { node, Style, type ChildType } from '@krakenjs/jsx-pragmatic/src';
 import { ApplePayMark } from '@paypal/sdk-logos/src';
 
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
+
 import css from './style.scoped.scss';
 
 export function Mark({ ...props } : {||}) : ChildType {
     return (
         <Style css={ css }>
-            <ApplePayMark { ...props } />
+            {enableLogoCDNExperiment(ApplePayMark,  props )}
         </Style>
     );
 }

package/src/funding/bancontact/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getBancontactConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getBancontactConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BancontactLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(BancontactLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/blik/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getBlikConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getBlikConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BlikLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(BlikLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/boleto/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getBoletoConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getBoletoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BoletoLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(BoletoLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/card/amex/config.js

@@ -3,10 +3,11 @@
 import { AmexLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getAmexConfig() : CardConfig {
     return {
-        Label: AmexLogo
+        Label: () => enableLogoCDNExperiment(AmexLogo)
     };
 }
 

package/src/funding/card/config.jsx

@@ -10,6 +10,7 @@ import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig, type CardConfig } fro
 import { Text, Space } from '../../ui/text';
 import { isRTLLanguage } from '../../lib';
 import { WalletLabel } from '../paypal/template';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import { getVisaConfig } from './visa';
 import { getMastercardConfig } from './mastercard';
@@ -116,9 +117,7 @@ export function getCardConfig() : FundingSourceConfig {
         },
 
         Logo: ({ logoColor }) => {
-            return (
-                <GlyphCard logoColor={ logoColor } />
-            );
+            return enableLogoCDNExperiment(GlyphCard, { logoColor });
         },
 
         Label: ({ logo, locale, content, custom }) => {

package/src/funding/card/discover/config.js

@@ -3,9 +3,10 @@
 import { DiscoverLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getDiscoverConfig() : CardConfig {
     return {
-        Label: DiscoverLogo
+        Label: () => enableLogoCDNExperiment(DiscoverLogo)
     };
 }

package/src/funding/card/elo/config.js

@@ -3,9 +3,10 @@
 import { EloLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getEloConfig() : CardConfig {
     return {
-        Label: EloLogo
+        Label: () => enableLogoCDNExperiment(EloLogo)
     };
 }

package/src/funding/card/hiper/config.js

@@ -3,9 +3,10 @@
 import { HiperLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getHiperConfig() : CardConfig {
     return {
-        Label: HiperLogo
+        Label: () => enableLogoCDNExperiment(HiperLogo)
     };
 }

package/src/funding/card/jcb/config.js

@@ -3,9 +3,10 @@
 import { JcbLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getJCBConfig() : CardConfig {
     return {
-        Label: JcbLogo
+        Label: () => enableLogoCDNExperiment(JcbLogo)
     };
 }

package/src/funding/card/mastercard/config.js

@@ -3,9 +3,10 @@
 import { MastercardLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getMastercardConfig() : CardConfig {
     return {
-        Label: MastercardLogo
+        Label: () => enableLogoCDNExperiment(MastercardLogo)
     };
 }

package/src/funding/card/visa/config.js

@@ -3,9 +3,10 @@
 import { VisaLogo } from '@paypal/sdk-logos/src';
 
 import type { CardConfig } from '../../common';
+import { enableLogoCDNExperiment } from '../../../lib/getLogoCDNExperiment';
 
 export function getVisaConfig() : CardConfig {
     return {
-        Label: VisaLogo
+        Label: () => enableLogoCDNExperiment(VisaLogo)
     };
 }

package/src/funding/credit/config.jsx

@@ -9,6 +9,7 @@ import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT, BUTTON_FLOW } from '../../constan
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 import { Space } from '../../ui/text';
 import { WalletLabel } from '../paypal/template';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getCreditConfig() : FundingSourceConfig {
     return {
@@ -27,18 +28,20 @@ export function getCreditConfig() : FundingSourceConfig {
 
         Logo: ({ locale, logoColor }) => {
             if (locale.country === COUNTRY.DE) {
-                return <CreditLogo logoColor={ logoColor } locale={ locale } />;
+                return enableLogoCDNExperiment(CreditLogo, { locale, logoColor });
             }
     
             return (
                 <Fragment>
-                    <PPLogo logoColor={ logoColor } />
+                    {enableLogoCDNExperiment(PPLogo, { logoColor })}
                     <Space />
                     <span optional>
-                        <PayPalLogo logoColor={ logoColor } />
+                    {enableLogoCDNExperiment(PayPalLogo, { logoColor }) }
                         <Space />
                     </span>
-                    <CreditLogo logoColor={ logoColor } locale={ locale } />
+                    {
+                        enableLogoCDNExperiment(CreditLogo, { locale, logoColor })
+                    }
                 </Fragment>
             );
         },

package/src/funding/eps/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getEpsConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getEpsConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(EpsLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/giropay/config.jsx

@@ -8,6 +8,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getGiropayConfig() : FundingSourceConfig {
     return {
@@ -19,7 +20,7 @@ export function getGiropayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(GiropayLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/ideal/config.jsx

@@ -7,7 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
-import { getLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getIdealConfig() : FundingSourceConfig {
     return {
@@ -19,16 +19,7 @@ export function getIdealConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => {
-          if (__WEB__) {
-            const logoCDNExperiment = getLogoCDNExperiment();
-            const loadFromCDN = logoCDNExperiment.isEnabled()
-
-            return IdealLogo({ logoColor, optional, loadFromCDN })
-          }
-          
-          return IdealLogo({ logoColor, optional })
-        },
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(IdealLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/itau/config.jsx

@@ -5,6 +5,7 @@
 import { ItauLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
 
 import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getItauConfig() : FundingSourceConfig {
@@ -16,7 +17,7 @@ export function getItauConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => ItauLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(ItauLogo, { logoColor, optional }),
 
         colors: [
             BUTTON_COLOR.DARKBLUE,

package/src/funding/maxima/config.jsx

@@ -4,6 +4,7 @@
 import { MaximaLogo } from '@paypal/sdk-logos/src';
 
 import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getMaximaConfig() : FundingSourceConfig {
@@ -16,7 +17,7 @@ export function getMaximaConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(MaximaLogo, { logoColor, optional }),
 
         colors: [
             BUTTON_COLOR.DEFAULT,

package/src/funding/mercadopago/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getMercadopagoConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getMercadopagoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MercadoPagoLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(MercadoPagoLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/multibanco/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getMultibancoConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getMultibancoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(MultibancoLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/mybank/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getMybankConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getMybankConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => MybankLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(MybankLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/oxxo/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getOxxoConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getOxxoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(OxxoLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/p24/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getP24Config() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getP24Config() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => P24Logo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(P24Logo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/paylater/config.jsx

@@ -9,6 +9,7 @@ import { PPLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
 import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from '../../constants';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import css from './style.scoped.scss';
 
@@ -77,7 +78,7 @@ export function getPaylaterConfig() : FundingSourceConfig {
         Logo: ({ logoColor, nonce, fundingEligibility }) => {
             return (
                 <Style css={ css } nonce={ nonce }>
-                    <PPLogo logoColor={ logoColor } />
+                    {enableLogoCDNExperiment(PPLogo, { logoColor })}
                     <Space />
                     <Text>{ getLabelText(fundingEligibility) || 'Pay Later' }</Text>
                 </Style>

package/src/funding/paypal/template.jsx

@@ -18,13 +18,12 @@ import { componentContent } from '../content';
 import { Text, Space, PlaceHolder } from '../../ui/text';
 import { TrackingBeacon } from '../../ui/tracking';
 import { HIDDEN, VISIBLE, COMPRESSED, EXPANDED } from '../../ui/buttons/styles/labels';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import css from './style.scoped.scss';
 
 export function Logo({ logoColor } : LogoOptions) : ChildType {
-    return (
-        <PayPalLogo logoColor={ logoColor } />
-    );
+    return enableLogoCDNExperiment(PayPalLogo, { logoColor })
 }
 
 function getPersonalizationText({ personalization, layout, multiple } : LabelOptions) : ?string {
@@ -192,18 +191,18 @@ export function WalletLabelOld(opts : WalletLabelOptions) : ?ChildType {
     if (instrument.logoUrl) {
         logo = <img class='card-art' src={ instrument.logoUrl } />;
     } else if (instrument.type === WALLET_INSTRUMENT.CARD) {
-        logo = <GlyphCard logoColor={ logoColor } />;
+        logo = enableLogoCDNExperiment(GlyphCard, { logoColor });
     } else if (instrument.type === WALLET_INSTRUMENT.BANK) {
-        logo = <GlyphBank logoColor={ logoColor } />;
+        logo = enableLogoCDNExperiment(GlyphBank, { logoColor });
     } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
-        logo = <CreditLogo locale={ locale } logoColor={ logoColor } />;
+        logo = enableLogoCDNExperiment(CreditLogo, { locale, logoColor });
     }
 
     return (
         <Style css={ css }>
             <div class='wallet-label'>
                 <div class='paypal-mark'>
-                    <PPLogo logoColor={ logoColor } />
+                    {enableLogoCDNExperiment(PPLogo ,{ logoColor })}
                 </div>
                 {
                     (instrument.oneClick && commit && content) &&
@@ -214,7 +213,7 @@ export function WalletLabelOld(opts : WalletLabelOptions) : ?ChildType {
                 }
                 <div class='paypal-wordmark'>
                     <Space />
-                    <PayPalLogo logoColor={ logoColor } />
+                    {enableLogoCDNExperiment(PayPalLogo ,{ logoColor })}
                 </div>
                 <div class='divider'>|</div>
                 {
@@ -338,24 +337,24 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
         if (instrument.type === WALLET_INSTRUMENT.CARD && instrument.label) {
             logo = instrument.logoUrl
                 ? <img class='card-art' src={ instrument.logoUrl } />
-                : <GlyphCard logoColor={ logoColor } />;
+                : enableLogoCDNExperiment(GlyphCard, { logoColor });
 
             label = instrument.label.replace('••••', '••');
 
         } else if (instrument.type === WALLET_INSTRUMENT.BANK && instrument.label) {
             logo = instrument.logoUrl
                 ? <img class='card-art' src={ instrument.logoUrl } />
-                : <GlyphBank logoColor={ logoColor } />;
+                : enableLogoCDNExperiment(GlyphBank, { logoColor });
 
             label = instrument.label.replace('••••', '••');
 
         } else if (instrument.type === WALLET_INSTRUMENT.CREDIT) {
-            logo = <CreditMark />;
+            logo = enableLogoCDNExperiment(CreditMark, {});
 
             label = content && content.credit;
 
         } else if (instrument.type === WALLET_INSTRUMENT.BALANCE) {
-            logo = <PayPalMark />;
+            logo = enableLogoCDNExperiment(PayPalMark, {});
 
             label = content && content.balance;
 
@@ -378,7 +377,7 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
                     branded
                         ? (
                             <div class='paypal-mark'>
-                                <PPLogo logoColor={ logoColor } />
+                                { enableLogoCDNExperiment(PPLogo, { logoColor }) }
                                 <Space />
                             </div>
                         )

package/src/funding/payu/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel} from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getPayuConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getPayuConfig() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => PayuLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(PayuLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/satispay/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getSatispayConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getSatispayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SatispayLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SatispayLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/sepa/config.jsx

@@ -4,6 +4,7 @@
 import { SepaLogo } from '@paypal/sdk-logos/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getSepaConfig() : FundingSourceConfig {
@@ -14,6 +15,6 @@ export function getSepaConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SepaLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SepaLogo, { logoColor, optional })
     };
 }

package/src/funding/sofort/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getSofortConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getSofortConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SofortLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {