@paypal/checkout-components 5.0.295 → 5.0.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.295",
+  "version": "5.0.296",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
     "release": "./scripts/publish.sh",
     "start": "npm run webpack -- --progress --watch",
-    "test": "npm run format:check && npm run test:unit && npm run jest-ssr && npm run karma && npm run jest-screenshot",
+    "test": "npm run format:check && npm run test:unit && npm run jest-ssr && npm run karma",
     "test:unit": "vitest run",
     "percy-screenshot": "npx playwright install && 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",

package/src/api/shopper-insights/component.js

@@ -150,11 +150,18 @@ export function getShopperInsightsComponent(): ShopperInsightsComponent {
             false;
           const isVenmoRecommended =
             (venmo?.eligible_in_paypal_network && venmo?.recommended) || false;
+          const fptiRecommendedPaymentPayload = {
+            paypal: isPayPalRecommended ? "1" : "0",
+            venmo: isVenmoRecommended ? "1" : "0",
+          };
 
           getLogger().track({
             [FPTI_KEY.TRANSITION]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_SUCCESS,
             [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_SUCCESS,
             [FPTI_KEY.RESPONSE_DURATION]: (Date.now() - startTime).toString(),
+            [FPTI_KEY.RECOMMENDED_PAYMENT]: JSON.stringify(
+              fptiRecommendedPaymentPayload
+            ),
           });
 
           sendCountMetric({

package/src/hosted-buttons/types.js

@@ -34,7 +34,7 @@ export type ButtonVariables = $ReadOnlyArray<{|
 
 export type CreateOrder = (data: {|
   paymentSource: string,
-|}) => ZalgoPromise<string>;
+|}) => ZalgoPromise<string | void>;
 
 export type OnApprove = (data: {|
   orderID: string,

package/src/hosted-buttons/utils.js

@@ -1,14 +1,11 @@
 /* @flow */
 
-import { request, memoize, popup, supportsPopups } from "@krakenjs/belter/src";
+import { request, memoize } from "@krakenjs/belter/src";
 import {
   getSDKHost,
   getClientID,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
-
-import { DEFAULT_POPUP_SIZE } from "../zoid/checkout";
 
 import type {
   ButtonVariables,
@@ -115,6 +112,7 @@ export const buildHostedButtonCreateOrder = ({
   return (data) => {
     const userInputs =
       window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
+    const onError = window[`__pp_form_fields_${hostedButtonId}`]?.onError;
     return createAccessToken(getClientID()).then((accessToken) => {
       return request({
         url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
@@ -126,9 +124,9 @@ export const buildHostedButtonCreateOrder = ({
           merchant_id: merchantId,
           ...userInputs,
         }),
-      }).then(({ body }) => {
-        return body.context_id;
-      });
+      })
+        .then(({ body }) => body.context_id || onError(body.name))
+        .catch(() => onError("REQUEST_FAILED"));
     });
   };
 };
@@ -148,22 +146,6 @@ export const buildHostedButtonOnApprove = ({
           merchant_id: merchantId,
           context_id: data.orderID,
         }),
-      }).then((response) => {
-        // The "Debit or Credit Card" button does not open a popup
-        // so we need to open a new popup for buyers who complete
-        // a checkout via "Debit or Credit Card".
-        if (data.paymentSource === FUNDING.CARD) {
-          const url = `${baseUrl}/ncp/payment/${hostedButtonId}/${data.orderID}`;
-          if (supportsPopups()) {
-            popup(url, {
-              width: DEFAULT_POPUP_SIZE.WIDTH,
-              height: DEFAULT_POPUP_SIZE.HEIGHT,
-            });
-          } else {
-            window.location = url;
-          }
-        }
-        return response;
       });
     });
   };

package/src/hosted-buttons/utils.test.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import { test, expect, vi } from "vitest";
-import { request, popup, supportsPopups } from "@krakenjs/belter/src";
+import { request } from "@krakenjs/belter/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import {
@@ -14,8 +14,6 @@ vi.mock("@krakenjs/belter/src", async () => {
   return {
     ...(await vi.importActual("@krakenjs/belter/src")),
     request: vi.fn(),
-    popup: vi.fn(),
-    supportsPopups: vi.fn(),
   };
 });
 
@@ -101,6 +99,31 @@ test("buildHostedButtonCreateOrder", async () => {
   expect.assertions(1);
 });
 
+test("buildHostedButtonCreateOrder error handling", async () => {
+  const createOrder = buildHostedButtonCreateOrder({
+    hostedButtonId,
+    merchantId,
+  });
+
+  // $FlowIssue
+  request.mockImplementation(() =>
+    ZalgoPromise.resolve({
+      body: {
+        name: "RESOURCE_NOT_FOUND",
+      },
+    })
+  );
+
+  const onError = vi.fn();
+  window[`__pp_form_fields_${hostedButtonId}`] = {
+    onError,
+  };
+
+  await createOrder({ paymentSource: "paypal" });
+  expect(onError).toHaveBeenCalledWith("RESOURCE_NOT_FOUND");
+  expect.assertions(1);
+});
+
 describe("buildHostedButtonOnApprove", () => {
   test("makes a request to the Hosted Buttons API", async () => {
     const onApprove = buildHostedButtonOnApprove({
@@ -126,32 +149,4 @@ describe("buildHostedButtonOnApprove", () => {
     );
     expect.assertions(1);
   });
-
-  test("provides its own popup for inline guest", async () => {
-    const onApprove = buildHostedButtonOnApprove({
-      hostedButtonId,
-      merchantId,
-    });
-    // $FlowIssue
-    request.mockImplementation(() =>
-      ZalgoPromise.resolve({
-        body: {},
-      })
-    );
-
-    // $FlowIssue
-    supportsPopups.mockImplementation(() => true);
-    await onApprove({ orderID, paymentSource: "card" });
-    expect(popup).toHaveBeenCalled();
-
-    // but redirects if popups are not supported
-    // $FlowIssue
-    supportsPopups.mockImplementation(() => false);
-    await onApprove({ orderID, paymentSource: "card" });
-    expect(window.location).toMatch(
-      `/ncp/payment/${hostedButtonId}/${orderID}`
-    );
-
-    expect.assertions(2);
-  });
 });

package/src/marks/template.jsx

@@ -78,7 +78,7 @@ export function MarksElement({
       <style>
         {`
                     .${CLASS.TEXT} {
-                        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
                         font-size: 12px;
                         vertical-align: middle;
                     }

package/src/ui/buttons/buttonDesigns/divideLogoAnimation.jsx

@@ -192,7 +192,7 @@ export function DivideLogoTextComponent({
                   position: absolute;
                   opacity: 0; 
                   color: #142C8E;
-                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                  font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
                   font-size: 14px;
               }
 

package/src/ui/buttons/buttonDesigns/inlineLogoTextDesign.jsx

@@ -131,7 +131,7 @@ export function InlineLogoTextComponent({
                   position: absolute;
                   opacity: 0; 
                   color: #142C8E;
-                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                  font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
                   font-size: 14px;
               }
 

package/src/ui/buttons/poweredBy.jsx

@@ -15,7 +15,7 @@ const POWERED_BY_PAYPAL_STYLE = `
         text-align: center;
         margin: 10px auto;
         height: 14px;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
         font-size: 11px;
         font-weight: normal;
         font-style: italic;

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

@@ -15,7 +15,7 @@ export const buttonStyle = `
         margin: 0;
         background: 0;
         border: 0;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
         text-transform: none;
         font-weight: 500;
         font-smoothing: antialiased;
@@ -42,7 +42,6 @@ export const buttonStyle = `
     }
 
     .${CLASS.CONTAINER}.${CLASS.ENV}-${ENV.TEST} .${CLASS.TEXT} {
-        font-family: Arial !important;
         background: rgba(0, 0, 0, 0.5) !important;
         color: transparent  !important;
         text-shadow: none  !important;

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

@@ -4,6 +4,7 @@ import { CLASS } from "../../../constants";
 
 export const pageStyle = `
     html, body {
+        font-family: PayPalOpen-Regular, Helvetica, Arial, "Liberation Sans", sans-serif;
         padding: 0;
         margin: 0;
         width: 100%;

package/src/zoid/buttons/component.jsx

@@ -38,6 +38,7 @@ import {
   getVersion,
   getDisableSetCookie,
   getExperimentation,
+  getSDKAttribute,
 } from "@paypal/sdk-client/src";
 import {
   rememberFunding,
@@ -60,6 +61,7 @@ import {
   QUERY_BOOL,
   ENV,
   FPTI_KEY,
+  SDK_SETTINGS,
 } from "@paypal/sdk-constants/src";
 import { node, dom } from "@krakenjs/jsx-pragmatic/src";
 
@@ -860,6 +862,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         queryParam: true,
       },
 
+      pageType: {
+        type: "string",
+        required: false,
+        queryParam: true,
+        value: () => getSDKAttribute(SDK_SETTINGS.PAGE_TYPE),
+      },
+
       displayOnly: {
         type: "array",
         queryParam: true,