@paypal/checkout-components 5.0.320 → 5.0.321

package/package.json

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

package/src/constants/class.js

@@ -2,6 +2,8 @@
 
 export const CLASS = {
   CONTAINER: ("paypal-button-container": "paypal-button-container"),
+  AUTORESIZE_CONTAINER:
+    ("paypal-autoresize-container": "paypal-autoresize-container"),
   BUTTON_ROW: ("paypal-button-row": "paypal-button-row"),
   BUTTON: ("paypal-button": "paypal-button"),
   BUTTON_LABEL:

package/src/ui/buttons/buttons.jsx

@@ -259,6 +259,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     <div
       class={[
         CLASS.CONTAINER,
+        CLASS.AUTORESIZE_CONTAINER,
         `${CLASS.LAYOUT}-${layout}`,
         `${CLASS.SHAPE}-${shape}`,
         `${CLASS.NUMBER}-${

package/src/zoid/buttons/component.jsx

@@ -55,7 +55,6 @@ import {
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
   noop,
-  isLocalStorageEnabled,
 } from "@krakenjs/belter/src";
 import {
   FUNDING,
@@ -80,6 +79,7 @@ import {
   type ButtonProps,
 } from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
+import { CLASS } from "../../constants";
 
 import { containerTemplate } from "./container";
 import { PrerenderedButtons } from "./prerender";
@@ -107,6 +107,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     autoResize: {
       width: false,
       height: true,
+      element: `.${CLASS.AUTORESIZE_CONTAINER}`,
     },
 
     containerTemplate,
@@ -122,18 +123,6 @@ 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,
-            [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
-            [FPTI_KEY.CONTEXT_ID]: buttonSessionID,
-            [FPTI_KEY.TRANSITION]:
-              "localstorage_inaccessible_possible_private_browsing",
-          });
-      }
-
       event.on(EVENT.PRERENDERED, () => {
         // CPL stands for Consumer Perceived Latency
         logLatencyInstrumentationPhase({
@@ -149,17 +138,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             [FPTI_KEY.PAGE]: "main:xo:paypal-components:smart-payment-buttons",
             [FPTI_KEY.CPL_COMP_METRICS]: JSON.stringify(cplPhases?.comp || {}),
           };
-          getLogger()
-            .info("CPL_LATENCY_METRICS_FIRST_RENDER")
-            .track(cplLatencyMetrics);
+          getLogger().track(cplLatencyMetrics);
         } catch (err) {
-          getLogger()
-            .info("button_render_CPL_instrumentation_log_error")
-            .track({
-              err: err.message || "CPL_LOG_PHASE_ERROR",
-              details: err.details,
-              stack: JSON.stringify(err.stack || err),
-            });
+          getLogger().track({
+            err: err.message || "CPL_LOG_PHASE_ERROR",
+            details: err.details,
+            stack: JSON.stringify(err.stack || err),
+          });
         }
       });
 

package/src/zoid/buttons/prerender.jsx

@@ -49,15 +49,18 @@ export function PrerenderedButtons({
     |}
   ) => {
     getLogger()
-      .info("button_prerender_click")
+      .info("paypal_js_sdk_v5_button_prerender_click", {
+        fundingSource,
+        card,
+        buttonsSessionID: props.buttonSessionID,
+      })
       .track({
         [FPTI_KEY.BUTTON_SESSION_UID]: props.buttonSessionID,
         [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
         [FPTI_KEY.CONTEXT_ID]: props.buttonSessionID,
         [FPTI_KEY.TRANSITION]: "process_button_prerender_click",
         [FPTI_KEY.CHOSEN_FUNDING]: fundingSource,
-      })
-      .flush();
+      });
 
     if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY) {
       // wait for button to load

package/src/zoid/buttons/util.js

@@ -50,7 +50,7 @@ type DetermineFlowOptions = {|
  *
  * @param {string} key for logging
  */
-const logNativeScreenInformation = once((key = "screenInformation") => {
+const logNativeScreenInformation = once(() => {
   if (window) {
     const height = window.innerHeight;
     const outerHeight = window.outerHeight;
@@ -60,18 +60,16 @@ const logNativeScreenInformation = once((key = "screenInformation") => {
     const ios14 = isIOS14();
     const standAlone = isStandAlone();
 
-    const screenInformation = {
-      computedHeight,
-      height,
-      ios14,
-      outerHeight,
-      scale,
-      standAlone,
-    };
-
     getLogger()
       // $FlowFixMe - object is mixed values when this expects all of the same value types
-      .info(key, screenInformation);
+      .info("sfvcScreenInformation", {
+        computedHeight,
+        height,
+        ios14,
+        outerHeight,
+        scale,
+        standAlone,
+      });
   }
 });
 
@@ -90,7 +88,7 @@ export function determineFlow(
 }
 
 export function isSupportedNativeBrowser(): boolean {
-  logNativeScreenInformation("sfvcScreenInformation");
+  logNativeScreenInformation();
 
   if (typeof window === "undefined") {
     return false;