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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.270-alpha.2",
+  "version": "5.0.270",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -86,9 +86,9 @@
     "jest": "^29.3.1",
     "karma": "^6.0.0",
     "karma-coverage": "^2.0.3",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^13.0.0",
     "memory-fs": "^0.5.0",
-    "mocha": "^4.1.0",
+    "mocha": "^10.0.0",
     "mocketeer": "^0.3.1",
     "pixelmatch": "^5.2.1",
     "playwright": "^1.29.1",
@@ -96,7 +96,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-sh": "^0.10.0",
     "puppeteer": "^1.20.0",
-    "serve": "^13.0.0",
+    "serve": "^14.0.0",
     "vite": "^3.2.4",
     "vitest": "^0.25.3"
   },
@@ -109,7 +109,7 @@
     "@krakenjs/zoid": "^10.0.0",
     "@paypal/common-components": "^1.0.35",
     "@paypal/funding-components": "^1.0.31",
-    "@paypal/sdk-client": "4.0.171-pwv-1",
+    "@paypal/sdk-client": "^4.0.166",
     "@paypal/sdk-constants": "^1.0.128",
     "@paypal/sdk-logos": "^2.2.6"
   },

package/src/funding/common.jsx

@@ -151,6 +151,8 @@ export type FundingSourceConfig = {|
     | (({|
         content: ?ContentType,
         fundingEligibility: ?FundingEligibilityType,
+        label?: string,
+        period?: number,
       |}) => string),
   showWalletMenu: ({|
     instrument: WalletInstrument,

package/src/funding/paypal/config.jsx

@@ -4,7 +4,12 @@
 import { LOGO_COLOR } from "@paypal/sdk-logos/src";
 import { FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants";
+import {
+  BUTTON_COLOR,
+  BUTTON_LAYOUT,
+  BUTTON_FLOW,
+  BUTTON_LABEL,
+} from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
 import { Logo, Label, WalletLabel, Tag } from "./template";
@@ -38,8 +43,22 @@ export function getPayPalConfig(): FundingSourceConfig {
       [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
     },
 
-    labelText: `${FUNDING_BRAND_LABEL.PAYPAL}`,
-
+    labelText: ({ content, label, period }) => {
+      let text = `${FUNDING_BRAND_LABEL.PAYPAL}`;
+      if (content && label === BUTTON_LABEL.INSTALLMENT) {
+        if (period) {
+          text = content["label.installment.withPeriod"].replace(
+            "{period}",
+            String(period)
+          );
+        } else {
+          text = content["label.installment.withoutPeriod"];
+        }
+      } else if (content && label) {
+        text = content[`label.${label}`];
+      }
+      return text;
+    },
     Logo,
     Label,
     WalletLabel,

package/src/types.js

@@ -48,6 +48,12 @@ export type ContentType = {|
   flex: string,
   payPalBalance: string,
   moreOptions: string,
+  "label.paypal": string,
+  "label.checkout": string,
+  "label.buynow": string,
+  "label.pay": string,
+  "label.installment.withPeriod": string,
+  "label.installment.withoutPeriod": string,
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -144,7 +144,12 @@ export function Button({
   function getAriaLabel(): string {
     let labelText =
       typeof fundingConfig.labelText === "function"
-        ? fundingConfig.labelText({ content, fundingEligibility })
+        ? fundingConfig.labelText({
+            content,
+            fundingEligibility,
+            label,
+            period,
+          })
         : fundingConfig.labelText || fundingSource;
 
     if (!showPayLabel && instrument?.vendor && instrument.label) {

package/src/zoid/checkout/component.jsx

@@ -246,6 +246,7 @@ export function getCheckoutComponent(): CheckoutComponent {
         onAuth: {
           type: "function",
           required: false,
+          sameDomain: true,
         },
 
         onSmartWalletEligible: {