@paypal/checkout-components 5.0.329 → 5.0.330

package/package.json

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

package/src/funding/common.jsx

@@ -136,6 +136,7 @@ export type FundingSourceConfig = {|
   labelText?:
     | string
     | (({|
+        buyerCountry: $Values<typeof COUNTRY>,
         content: ?ContentType,
         fundingEligibility: ?FundingEligibilityType,
         label?: string,

package/src/funding/paypal/config.jsx

@@ -45,18 +45,21 @@ export function getPayPalConfig(): FundingSourceConfig {
 
     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)
-          );
+          const rawLabel = content["label.installment.withPeriod"];
+
+          if (typeof rawLabel === "string") {
+            text = rawLabel.replace("{period}", String(period));
+          }
         } else {
           text = content["label.installment.withoutPeriod"];
         }
       } else if (content && label && content[`label.${label}`]) {
         text = content[`label.${label}`];
       }
+
       return text;
     },
     Logo,

package/src/ui/buttons/button.jsx

@@ -2,7 +2,12 @@
 /** @jsx node */
 
 import type { FundingEligibilityType } from "@paypal/sdk-client/src";
-import { FUNDING, ENV, type LocaleType } from "@paypal/sdk-constants/src";
+import {
+  COUNTRY,
+  FUNDING,
+  ENV,
+  type LocaleType,
+} from "@paypal/sdk-constants/src";
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 import { LOGO_COLOR, LOGO_CLASS } from "@paypal/sdk-logos/src";
 import {
@@ -37,12 +42,13 @@ import type {
 } from "./props";
 import { Spinner } from "./spinner";
 import { MenuButton } from "./menu-button";
-import { isBorderRadiusNumber } from "./util";
+import { isBorderRadiusNumber, checkLabelEligibility } from "./util";
 
 type IndividualButtonProps = {|
   style: ButtonStyle,
   fundingSource: $Values<typeof FUNDING>,
   multiple: boolean,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale: LocaleType,
   onClick?: Function,
   env: $Values<typeof ENV>,
@@ -68,26 +74,27 @@ type IndividualButtonProps = {|
 |};
 
 export function Button({
-  fundingSource,
-  style,
-  multiple,
-  locale,
+  buyerCountry,
+  commit,
+  content,
+  customerId,
   env,
+  experiment,
+  flow,
   fundingEligibility,
+  fundingSource,
   i,
+  instrument,
+  locale,
+  multiple,
   nonce,
-  flow,
-  vault,
-  userIDToken,
-  customerId,
-  personalization,
   onClick = noop,
-  content,
-  tagline,
-  commit,
-  experiment,
-  instrument,
+  personalization,
   showPayLabel,
+  style,
+  tagline,
+  userIDToken,
+  vault,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
 
@@ -142,13 +149,16 @@ export function Button({
     }
   };
 
+  const eligibleLabel = checkLabelEligibility(label, buyerCountry);
+
   function getAriaLabel(): string {
     let labelText =
       typeof fundingConfig.labelText === "function"
         ? fundingConfig.labelText({
+            buyerCountry,
             content,
             fundingEligibility,
-            label,
+            label: eligibleLabel,
             period,
           })
         : fundingConfig.labelText || fundingSource;
@@ -166,7 +176,7 @@ export function Button({
 
   const logoNode = (
     <Logo
-      label={label}
+      label={eligibleLabel}
       locale={locale}
       logoColor={logoColor}
       fundingEligibility={fundingEligibility}
@@ -182,7 +192,7 @@ export function Button({
     <Label
       i={i}
       logo={logoNode}
-      label={label}
+      label={eligibleLabel}
       nonce={nonce}
       locale={locale}
       logoColor={logoColor}

package/src/ui/buttons/buttons.jsx

@@ -136,36 +136,37 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 export function Buttons(props: ButtonsProps): ElementNode {
   const { onClick = noop } = props;
   const {
-    wallet,
-    fundingSource,
-    style,
-    locale,
-    remembered,
+    applePaySupport,
+    buyerCountry,
+    commit,
+    components,
+    content,
+    customerId,
+    displayOnly,
+    enableFunding,
     env,
+    experiment,
+    flow,
     fundingEligibility,
-    platform,
-    commit,
-    vault,
+    fundingSource,
+    hasShippingCallback,
+    locale,
+    message,
+    messageMarkup,
     nonce,
-    enableFunding,
-    components,
-    onShippingChange,
     onShippingAddressChange,
+    onShippingChange,
     onShippingOptionsChange,
-    hasShippingCallback,
     personalization,
-    userIDToken,
-    customerId,
-    content,
-    flow,
-    experiment,
-    applePaySupport,
-    supportsPopups,
-    supportedNativeBrowser,
+    platform,
+    remembered,
     showPayLabel,
-    displayOnly,
-    message,
-    messageMarkup,
+    style,
+    supportedNativeBrowser,
+    supportsPopups,
+    userIDToken,
+    vault,
+    wallet,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -268,6 +269,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
           fundingSource={source}
           multiple={multiple}
           env={env}
+          buyerCountry={buyerCountry}
           locale={locale}
           nonce={nonce}
           fundingEligibility={fundingEligibility}

package/src/ui/buttons/props.js

@@ -450,6 +450,7 @@ export type ButtonMessageInputs = {|
 export type RenderButtonProps = {|
   style: ButtonStyle,
   locale: LocaleType,
+  buyerCountry: $Values<typeof COUNTRY>,
   commit: boolean,
   fundingSource: ?$Values<typeof FUNDING>,
   env: $Values<typeof ENV>,
@@ -555,6 +556,7 @@ export type ButtonPropsInputs = {
   clientID: string,
   fundingSource?: ?$Values<typeof FUNDING>,
   style?: ButtonStyleInputs | void,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale?: $PropertyType<ButtonProps, "locale"> | void,
   commit?: $PropertyType<ButtonProps, "commit"> | void,
   env?: $PropertyType<ButtonProps, "env"> | void,
@@ -868,6 +870,7 @@ export function normalizeButtonProps(
   );
 
   let {
+    buyerCountry,
     clientID,
     fundingSource,
     style = getDefaultStyle(),
@@ -970,6 +973,7 @@ export function normalizeButtonProps(
     : undefined;
 
   return {
+    buyerCountry,
     clientID,
     fundingSource,
     style,

package/src/ui/buttons/util.js

@@ -1,7 +1,7 @@
 /* @flow */
-import { FUNDING } from "@paypal/sdk-constants/src";
+import { COUNTRY, FUNDING } from "@paypal/sdk-constants/src";
 
-import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
+import { BUTTON_LABEL, BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
 import { ValidationError } from "../../lib";
 
 export function isBorderRadiusNumber(borderRadius?: number): boolean {
@@ -39,3 +39,20 @@ export function calculateMessagePosition(
   }
   return MESSAGE_POSITION.BOTTOM;
 }
+
+export function checkLabelEligibility(
+  label?: $Values<typeof BUTTON_LABEL>,
+  buyerCountry: $Values<typeof COUNTRY>
+): $Values<typeof BUTTON_LABEL> | typeof undefined {
+  const eligibleCountriesForInstallmentLabel = ["BR", "MX"];
+
+  // Don't render the installment label if buyerCountry is not eligible for installment product
+  if (
+    label === BUTTON_LABEL.INSTALLMENT &&
+    !eligibleCountriesForInstallmentLabel.includes(buyerCountry)
+  ) {
+    return BUTTON_LABEL.PAYPAL;
+  }
+
+  return label;
+}

package/src/zoid/card-fields/component.jsx

@@ -50,6 +50,7 @@ type CardFieldsProps = {|
   clientID: string,
   style?: {|
     height: number,
+    input: {| height: number |},
   |},
   env?: string,
   locale?: string,
@@ -128,9 +129,10 @@ const url = () =>
   `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__CARD_FIELD__}`;
 
 const prerenderTemplate = ({ props, doc }) => {
-  return (
-    <CardPrerender nonce={props.nonce} height={props.style?.height} />
-  ).render(dom({ doc }));
+  const height = props.style?.height ?? props.style?.input?.height ?? null;
+  return (<CardPrerender nonce={props.nonce} height={height} />).render(
+    dom({ doc })
+  );
 };
 
 export type CardFieldsComponent = ZoidComponent<