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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.252-alpha.0",
+  "version": "5.0.252-alpha.2",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -103,7 +103,7 @@
     "@paypal/funding-components": "^1.0.30",
     "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.127",
-    "@paypal/sdk-logos": "^2.2.0-alpha.1"
+    "@paypal/sdk-logos": "^2.2.1"
   },
   "lint-staged": {
     "*.sh": "prettier --write"

package/src/funding/ideal/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 { getLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getIdealConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,16 @@ export function getIdealConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => IdealLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => {
+          if (__WEB__) {
+            const logoCDNExperiment = getLogoCDNExperiment();
+            const loadFromCDN = logoCDNExperiment.isEnabled()
+
+            return IdealLogo({ logoColor, optional, loadFromCDN })
+          }
+          
+          return IdealLogo({ logoColor, optional })
+        },
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/lib/getLogoCDNExperiment.js

@@ -0,0 +1,12 @@
+/* @flow */
+
+import { createExperiment } from "@paypal/sdk-client/src";
+import type { Experiment } from "@krakenjs/belter/src";
+
+export function getLogoCDNExperiment(): Experiment {
+  return createExperiment("enable_logo_cdn", 100);
+}
+
+export function getPrefetchCDNExperiment(): Experiment {
+  return createExperiment("enable_prefetch_cdn", 50);
+}

package/src/zoid/buttons/prerender.jsx

@@ -13,6 +13,7 @@ import { DEFAULT_POPUP_SIZE } from '../checkout';
 import { EXPERIENCE } from '../../constants';
 import { Buttons } from '../../ui';
 import { type ButtonProps } from '../../ui/buttons/props';
+import { getPrefetchCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 type PrerenderedButtonsProps = {|
     nonce : ?string,
@@ -24,8 +25,22 @@ type PrerenderedButtonsProps = {|
     |}) => void
 |};
 
+function prefetchImage(src: string): void {
+  const link = document.createElement("link");
+  link.rel = "prefetch";
+  link.as = "image";
+  link.href = src;
+  document.head?.append(link);
+}
+
 export function PrerenderedButtons({ nonce, onRenderCheckout, props } : PrerenderedButtonsProps) : ChildType {
     let win;
+
+    if (getPrefetchCDNExperiment().isEnabled()) {
+      prefetchImage('https://www.paypalobjects.com/js-sdk-logos/2.1.1/ideal-default.svg'
+      )
+    }
+    
     const handleClick = (
         // eslint-disable-next-line no-undef
         event : SyntheticInputEvent<HTMLInputElement>,