From b4e1d3d077e4d8e822199b1334464a6168fcf540 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Wed, 6 Oct 2021 17:50:28 -0500
Subject: [PATCH 01/19] fix(hostedField): limit the div attributes in types

---
 src/types/payPalHostedFieldTypes.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/types/payPalHostedFieldTypes.ts b/src/types/payPalHostedFieldTypes.ts
index 35c0ce9c..798016d1 100644
--- a/src/types/payPalHostedFieldTypes.ts
+++ b/src/types/payPalHostedFieldTypes.ts
@@ -1,4 +1,4 @@
-import type { ReactNode, HTMLAttributes } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { PAYPAL_HOSTED_FIELDS_TYPES } from "./enums";
 
 export type PayPalHostedFieldsNamespace = {
@@ -31,7 +31,7 @@ export type PayPalHostedFieldOptions = {
     rejectUnsupportedCards?: boolean;
 };
 
-export interface PayPalHostedFieldProps extends HTMLAttributes<HTMLDivElement> {
+export interface PayPalHostedFieldProps {
     /**
      * Represent the hosted field type: [NUMBER, CVV, EXPIRATION_DATE, EXPIRATION_MONTH, EXPIRATION_YEAR, POSTAL_CODE]
      */
@@ -42,6 +42,12 @@ export interface PayPalHostedFieldProps extends HTMLAttributes<HTMLDivElement> {
      * Check available options in the this type:
      */
     options: PayPalHostedFieldOptions;
+    id?: string;
+    className?: string;
+    lang?: string;
+    title?: string;
+    style?: CSSProperties;
+    align?: string;
 }
 export interface PayPalHostedFieldsBillingAddressProps {
     show: boolean;

From 2fd619056c3fee485a38871a46da871837b49357 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 12:30:34 -0500
Subject: [PATCH 02/19] feat(hostedFields): example of style uses

---
 src/stories/PayPalHostedField.stories.tsx | 165 +++++++++++++++++++++-
 1 file changed, 164 insertions(+), 1 deletion(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 33a3ee4a..0811a922 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import type { FC, ReactElement } from "react";
+import type { Story } from "@storybook/react";
 
 import type { PayPalScriptOptions } from "@paypal/paypal-js/types/script-options";
 
@@ -26,6 +27,10 @@ const scriptProviderOptions: PayPalScriptOptions = {
     components: "buttons,hosted-fields",
     ...getOptionsFromQueryString(),
 };
+const customBorderFieldStyle = {
+    border: "1px solid #606060",
+    boxShadow: "2px 2px 10px 2px #606060",
+};
 
 /**
  * Get dynamically the capture order URL to fetch the payment info
@@ -87,11 +92,14 @@ const SubmitPayment = () => {
 
     return (
         <>
+            <label title="This represents the full name as shown in the card">
+                Card Holder Name
+            </label>
             <input
                 ref={cardHolderName}
                 className="card-field"
                 type="text"
-                placeholder="Card holder name "
+                placeholder="Full name"
             />
             <button
                 className={`btn${paying ? "" : " btn-primary"}`}
@@ -107,6 +115,15 @@ const SubmitPayment = () => {
 export default {
     title: "Example/PayPalHostedFields",
     component: PayPalHostedField,
+    parameters: {
+        docs: {
+            default: {
+                source: {
+                    code: "djhfhjfh",
+                },
+            },
+        },
+    },
     argTypes: {
         PayPalHostedFieldOptions: {
             control: { type: "null" },
@@ -195,20 +212,29 @@ export const Default: FC = () => {
             styles={{
                 ".valid": { color: "#28a745" },
                 ".invalid": { color: "#dc3545" },
+                input: { "font-family": "monospace", "font-size": "16px" },
             }}
         >
+            <label htmlFor="card-number">
+                Card Number<span style={{ color: "#dc3545" }}>*</span>
+            </label>
             <PayPalHostedField
                 id="card-number"
                 className="card-field"
+                style={customBorderFieldStyle}
                 hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.NUMBER}
                 options={{
                     selector: "#card-number",
                     placeholder: "4111 1111 1111 1111",
                 }}
             />
+            <label htmlFor="cvv">
+                CVV<span style={{ color: "#dc3545" }}>*</span>
+            </label>
             <PayPalHostedField
                 id="cvv"
                 className="card-field"
+                style={customBorderFieldStyle}
                 hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.CVV}
                 options={{
                     selector: "#cvv",
@@ -216,9 +242,13 @@ export const Default: FC = () => {
                     maskInput: true,
                 }}
             />
+            <label htmlFor="expiration-date">
+                Expiration Date<span style={{ color: "#dc3545" }}>*</span>
+            </label>
             <PayPalHostedField
                 id="expiration-date"
                 className="card-field"
+                style={customBorderFieldStyle}
                 hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.EXPIRATION_DATE}
                 options={{
                     selector: "#expiration-date",
@@ -231,6 +261,139 @@ export const Default: FC = () => {
     );
 };
 
+(Default as Story).parameters = {
+    docs: {
+        source: {
+            code: `
+            () => {
+    const SubmitPayment = () => {
+        const cardHolderName = useRef<HTMLInputElement>(null);
+        const hostedField = usePayPalHostedFields();
+
+        const handleClick = () => {
+            if (
+                hostedField &&
+                cardHolderName.current &&
+                cardHolderName.current.value
+            ) {
+                hostedField
+                    .submit({
+                        cardholderName: cardHolderName.current.value,
+                    })
+                    .then((data) => {
+                        console.log("orderId: ", data.orderId);
+                        fetch(captureOrderUrl(data.orderId), {
+                            method: "post",
+                        })
+                            .then((response) => response.json())
+                            .then((data) => {
+                                alert(JSON.stringify(data));
+                            })
+                            .catch((err) => {
+                                alert(JSON.stringify(err));
+                            })
+                    })
+                    .catch((err) => {
+                        alert(JSON.stringify(err));
+                    });
+            }
+        };
+
+        return (
+            <>
+                <label title="This represents the full name as shown in the card">Card Holder Name</label>
+                <input
+                    ref={cardHolderName}
+                    className="card-field"
+                    type="text"
+                    placeholder="Full name"
+                />
+                <button
+                    className="btn-primary"
+                    style={{ float: "right" }}
+                    onClick={handleClick}
+                >Pay</button>
+            </>
+        );
+    };
+
+    return (
+        <PayPalHostedFieldsProvider
+            createOrder={() =>
+                fetch(CREATE_ORDER_URL, {
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        purchase_units: [
+                            {
+                                amount: {
+                                    value: 50,
+                                    currency_code: "USD",
+                                },
+                            },
+                        ],
+                        intent: "CAPTURE",
+                    }),
+                })
+                    .then((response) => response.json())
+                    .then((order) => order.id)
+                    .catch((err) => {
+                        alert(err);
+                    })
+            }
+            notEligibleError={<NotEligibleError />}
+            styles={{
+                ".valid": { color: "#28a745" },
+                ".invalid": { color: "#dc3545" },
+                "input": { "font-family": "monospace", "font-size": "16px" }
+            }}
+        >
+            <label htmlFor="card-number">Card Number<span style={{ color: "#dc3545" }}>*</span></label>
+            <PayPalHostedField
+                id="card-number"
+                className="card-field"
+                style={customBorderFieldStyle}
+                hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.NUMBER}
+                options={{
+                    selector: "#card-number",
+                    placeholder: "4111 1111 1111 1111",
+                }}
+            />
+            <label htmlFor="cvv">CVV<span style={{ color: "#dc3545" }}>*</span></label>
+            <PayPalHostedField
+                id="cvv"
+                className="card-field"
+                style={customBorderFieldStyle}
+                hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.CVV}
+                options={{
+                    selector: "#cvv",
+                    placeholder: "123",
+                    maskInput: true,
+                }}
+            />
+            <label htmlFor="expiration-date">Expiration Date<span style={{ color: "#dc3545" }}>*</span></label>
+            <PayPalHostedField
+                id="expiration-date"
+                className="card-field"
+                style={customBorderFieldStyle}
+                hostedFieldType={PAYPAL_HOSTED_FIELDS_TYPES.EXPIRATION_DATE}
+                options={{
+                    selector: "#expiration-date",
+                    placeholder: "MM/YYYY",
+                }}
+            />
+            {/* Custom client component to handle hosted fields submit */}
+            <SubmitPayment />
+        </PayPalHostedFieldsProvider>
+    );
+}
+            `,
+        },
+    },
+};
+
 export const ExpirationDate: FC = () => {
     return (
         <PayPalHostedFieldsProvider

From 802f49697d992a423a1872c95c36688dd0c6df59 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 12:36:36 -0500
Subject: [PATCH 03/19] docs(hostedFields): minor edit

---
 src/stories/PayPalHostedField.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 0811a922..47b3b28e 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -384,7 +384,6 @@ export const Default: FC = () => {
                     placeholder: "MM/YYYY",
                 }}
             />
-            {/* Custom client component to handle hosted fields submit */}
             <SubmitPayment />
         </PayPalHostedFieldsProvider>
     );

From 9e4f7ba0c42537b92e23975fbc6739d68f57095d Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 15:56:15 -0500
Subject: [PATCH 04/19] docs(hostedField): avoid submit an invalid payment form

---
 src/stories/PayPalHostedField.stories.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 47b3b28e..8a5bfac6 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -58,15 +58,22 @@ const SubmitPayment = () => {
     const hostedField = usePayPalHostedFields();
 
     const handleClick = () => {
-        if (
-            hostedField &&
-            cardHolderName.current &&
-            cardHolderName.current.value
-        ) {
+        if (hostedField) {
+            if (
+                Object.values(hostedField.getState().fields).some(
+                    (field) => !field.isValid
+                ) ||
+                cardHolderName?.current?.value
+            ) {
+                return alert(
+                    "The payment form is invalid, please check it before execute the payment"
+                );
+            }
+
             setPaying(true);
             hostedField
                 .submit({
-                    cardholderName: cardHolderName.current.value,
+                    cardholderName: cardHolderName?.current?.value,
                 })
                 .then((data) => {
                     console.log("orderId: ", data.orderId);
@@ -86,6 +93,7 @@ const SubmitPayment = () => {
                 })
                 .catch((err) => {
                     alert(JSON.stringify(err));
+                    setPaying(false);
                 });
         }
     };

From 1bd9f2e7a0a95b4fdb297188c8738d0537c0a5d2 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 16:00:25 -0500
Subject: [PATCH 05/19] docs(hostedFields): minor edits

---
 src/stories/PayPalHostedField.stories.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 8a5bfac6..4f34e43d 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -63,7 +63,7 @@ const SubmitPayment = () => {
                 Object.values(hostedField.getState().fields).some(
                     (field) => !field.isValid
                 ) ||
-                cardHolderName?.current?.value
+                !cardHolderName?.current?.value
             ) {
                 return alert(
                     "The payment form is invalid, please check it before execute the payment"
@@ -279,11 +279,17 @@ export const Default: FC = () => {
         const hostedField = usePayPalHostedFields();
 
         const handleClick = () => {
-            if (
-                hostedField &&
-                cardHolderName.current &&
-                cardHolderName.current.value
-            ) {
+            if (hostedField) {
+                if (
+                    Object.values(hostedField.getState().fields)
+                    .some((field) => !field.isValid) ||
+                    !cardHolderName?.current?.value
+                ) {
+                    return alert(
+                        "The payment form is invalid, please check it before execute the payment"
+                    );
+                }
+
                 hostedField
                     .submit({
                         cardholderName: cardHolderName.current.value,

From 088f5225b2d355241a9c74e040509b7eb9a9cf16 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 16:40:07 -0500
Subject: [PATCH 06/19] docs(hostedFields): fix custom styles

---
 src/stories/PayPalHostedField.stories.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 4f34e43d..51d0f6e9 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, CSSProperties } from "react";
 import type { FC, ReactElement } from "react";
 import type { Story } from "@storybook/react";
 
@@ -29,7 +29,7 @@ const scriptProviderOptions: PayPalScriptOptions = {
 };
 const customBorderFieldStyle = {
     border: "1px solid #606060",
-    boxShadow: "2px 2px 10px 2px #606060",
+    boxShadow: "2px 2px 10px 2px rgba(0,0,0,0.1)",
 };
 
 /**
@@ -52,7 +52,7 @@ const NotEligibleError = () => (
 /**
  * Functional component to submit the hosted fields form
  */
-const SubmitPayment = () => {
+const SubmitPayment = ({ customStyle }: { customStyle?: CSSProperties }) => {
     const [paying, setPaying] = useState(false);
     const cardHolderName = useRef<HTMLInputElement>(null);
     const hostedField = usePayPalHostedFields();
@@ -106,6 +106,7 @@ const SubmitPayment = () => {
             <input
                 ref={cardHolderName}
                 className="card-field"
+                style={customStyle}
                 type="text"
                 placeholder="Full name"
             />
@@ -264,7 +265,7 @@ export const Default: FC = () => {
                 }}
             />
             {/* Custom client component to handle hosted fields submit */}
-            <SubmitPayment />
+            <SubmitPayment customStyle={customBorderFieldStyle} />
         </PayPalHostedFieldsProvider>
     );
 };

From 6fd5a4ef2c800d73590e8b9b7e32a4406ff898b3 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 16:43:27 -0500
Subject: [PATCH 07/19] docs(storybook): remove outline in custom input field

---
 src/stories/PayPalHostedField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 51d0f6e9..5eb4f717 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -106,7 +106,7 @@ const SubmitPayment = ({ customStyle }: { customStyle?: CSSProperties }) => {
             <input
                 ref={cardHolderName}
                 className="card-field"
-                style={customStyle}
+                style={{ ...customStyle, outline: "none" }}
                 type="text"
                 placeholder="Full name"
             />

From 3da001a187c77f2cd75379dc475a0ec2979bfe3d Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Thu, 7 Oct 2021 16:50:22 -0500
Subject: [PATCH 08/19] docs(hostedFields): fixed comments

---
 src/stories/PayPalHostedField.stories.tsx | 29 +++++++++--------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 5eb4f717..69d1d62e 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -21,6 +21,7 @@ import {
 const uid = generateRandomString();
 const TOKEN_URL = `${HEROKU_SERVER}/api/paypal/hosted-fields/auth`;
 const CREATE_ORDER_URL = `${HEROKU_SERVER}/api/paypal/checkout/orders`;
+const RED_COLOR = "#dc3545";
 const scriptProviderOptions: PayPalScriptOptions = {
     "client-id":
         "AdOu-W3GPkrfuTbJNuW9dWVijxvhaXHFIRuKrLDwu14UDwTTHWMFkUwuu9D8I1MAQluERl9cFOd7Mfqe",
@@ -124,15 +125,6 @@ const SubmitPayment = ({ customStyle }: { customStyle?: CSSProperties }) => {
 export default {
     title: "Example/PayPalHostedFields",
     component: PayPalHostedField,
-    parameters: {
-        docs: {
-            default: {
-                source: {
-                    code: "djhfhjfh",
-                },
-            },
-        },
-    },
     argTypes: {
         PayPalHostedFieldOptions: {
             control: { type: "null" },
@@ -220,12 +212,12 @@ export const Default: FC = () => {
             notEligibleError={<NotEligibleError />}
             styles={{
                 ".valid": { color: "#28a745" },
-                ".invalid": { color: "#dc3545" },
+                ".invalid": { color: RED_COLOR },
                 input: { "font-family": "monospace", "font-size": "16px" },
             }}
         >
             <label htmlFor="card-number">
-                Card Number<span style={{ color: "#dc3545" }}>*</span>
+                Card Number<span style={{ color: RED_COLOR }}>*</span>
             </label>
             <PayPalHostedField
                 id="card-number"
@@ -238,7 +230,7 @@ export const Default: FC = () => {
                 }}
             />
             <label htmlFor="cvv">
-                CVV<span style={{ color: "#dc3545" }}>*</span>
+                CVV<span style={{ color: RED_COLOR }}>*</span>
             </label>
             <PayPalHostedField
                 id="cvv"
@@ -252,7 +244,7 @@ export const Default: FC = () => {
                 }}
             />
             <label htmlFor="expiration-date">
-                Expiration Date<span style={{ color: "#dc3545" }}>*</span>
+                Expiration Date<span style={{ color: RED_COLOR }}>*</span>
             </label>
             <PayPalHostedField
                 id="expiration-date"
@@ -275,6 +267,7 @@ export const Default: FC = () => {
         source: {
             code: `
             () => {
+    const RED_COLOR_STYLE = { color: "#dc3545" };
     const SubmitPayment = () => {
         const cardHolderName = useRef<HTMLInputElement>(null);
         const hostedField = usePayPalHostedFields();
@@ -361,11 +354,11 @@ export const Default: FC = () => {
             notEligibleError={<NotEligibleError />}
             styles={{
                 ".valid": { color: "#28a745" },
-                ".invalid": { color: "#dc3545" },
+                ".invalid": RED_COLOR_STYLE,
                 "input": { "font-family": "monospace", "font-size": "16px" }
             }}
         >
-            <label htmlFor="card-number">Card Number<span style={{ color: "#dc3545" }}>*</span></label>
+            <label htmlFor="card-number">Card Number<span style={RED_COLOR_STYLE}>*</span></label>
             <PayPalHostedField
                 id="card-number"
                 className="card-field"
@@ -376,7 +369,7 @@ export const Default: FC = () => {
                     placeholder: "4111 1111 1111 1111",
                 }}
             />
-            <label htmlFor="cvv">CVV<span style={{ color: "#dc3545" }}>*</span></label>
+            <label htmlFor="cvv">CVV<span style={RED_COLOR_STYLE}>*</span></label>
             <PayPalHostedField
                 id="cvv"
                 className="card-field"
@@ -388,7 +381,7 @@ export const Default: FC = () => {
                     maskInput: true,
                 }}
             />
-            <label htmlFor="expiration-date">Expiration Date<span style={{ color: "#dc3545" }}>*</span></label>
+            <label htmlFor="expiration-date">Expiration Date<span style={RED_COLOR_STYLE}>*</span></label>
             <PayPalHostedField
                 id="expiration-date"
                 className="card-field"
@@ -438,7 +431,7 @@ export const ExpirationDate: FC = () => {
             notEligibleError={<NotEligibleError />}
             styles={{
                 ".valid": { color: "#28a745" },
-                ".invalid": { color: "#dc3545" },
+                ".invalid": { color: RED_COLOR },
             }}
         >
             <PayPalHostedField

From 1842282947599fcc4b067a69db550eda769c980a Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Fri, 8 Oct 2021 09:49:02 -0500
Subject: [PATCH 09/19] docs(hostedFields): constants variables

---
 .../PayPalHostedFieldsProvider.tsx            |  2 +-
 src/stories/PayPalHostedField.stories.tsx     | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
index 347fd81c..b9ed6dd8 100644
--- a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
+++ b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
@@ -32,7 +32,7 @@ export const PayPalHostedFieldsProvider: FC<PayPalHostedFieldsComponentProps> =
         const hostedFieldsContainerRef = useRef<HTMLDivElement>(null);
         const hostedFields = useRef<PayPalHostedFieldsComponent>();
         const [, setErrorState] = useState(null);
-
+        console.log("***", childrenList);
         /**
          * Executed on the mount process to validate the children
          */
diff --git a/src/stories/PayPalHostedField.stories.tsx b/src/stories/PayPalHostedField.stories.tsx
index 69d1d62e..e8d94cf1 100644
--- a/src/stories/PayPalHostedField.stories.tsx
+++ b/src/stories/PayPalHostedField.stories.tsx
@@ -22,6 +22,7 @@ const uid = generateRandomString();
 const TOKEN_URL = `${HEROKU_SERVER}/api/paypal/hosted-fields/auth`;
 const CREATE_ORDER_URL = `${HEROKU_SERVER}/api/paypal/checkout/orders`;
 const RED_COLOR = "#dc3545";
+const GREEN_COLOR = "#28a745";
 const scriptProviderOptions: PayPalScriptOptions = {
     "client-id":
         "AdOu-W3GPkrfuTbJNuW9dWVijxvhaXHFIRuKrLDwu14UDwTTHWMFkUwuu9D8I1MAQluERl9cFOd7Mfqe",
@@ -103,14 +104,15 @@ const SubmitPayment = ({ customStyle }: { customStyle?: CSSProperties }) => {
         <>
             <label title="This represents the full name as shown in the card">
                 Card Holder Name
+                <input
+                    id="card-holder"
+                    ref={cardHolderName}
+                    className="card-field"
+                    style={{ ...customStyle, outline: "none" }}
+                    type="text"
+                    placeholder="Full name"
+                />
             </label>
-            <input
-                ref={cardHolderName}
-                className="card-field"
-                style={{ ...customStyle, outline: "none" }}
-                type="text"
-                placeholder="Full name"
-            />
             <button
                 className={`btn${paying ? "" : " btn-primary"}`}
                 style={{ float: "right" }}
@@ -211,7 +213,7 @@ export const Default: FC = () => {
             }
             notEligibleError={<NotEligibleError />}
             styles={{
-                ".valid": { color: "#28a745" },
+                ".valid": { color: GREEN_COLOR },
                 ".invalid": { color: RED_COLOR },
                 input: { "font-family": "monospace", "font-size": "16px" },
             }}
@@ -353,7 +355,7 @@ export const Default: FC = () => {
             }
             notEligibleError={<NotEligibleError />}
             styles={{
-                ".valid": { color: "#28a745" },
+                ".valid": { color: "${GREEN_COLOR}" },
                 ".invalid": RED_COLOR_STYLE,
                 "input": { "font-family": "monospace", "font-size": "16px" }
             }}
@@ -430,7 +432,7 @@ export const ExpirationDate: FC = () => {
             }
             notEligibleError={<NotEligibleError />}
             styles={{
-                ".valid": { color: "#28a745" },
+                ".valid": { color: GREEN_COLOR },
                 ".invalid": { color: RED_COLOR },
             }}
         >

From fd8e2d7c22de303a53b603e912736927e2b974db Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Fri, 8 Oct 2021 09:56:33 -0500
Subject: [PATCH 10/19] fix(hostedFields): remove console.log

---
 src/components/hostedFields/PayPalHostedFieldsProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
index b9ed6dd8..347fd81c 100644
--- a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
+++ b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
@@ -32,7 +32,7 @@ export const PayPalHostedFieldsProvider: FC<PayPalHostedFieldsComponentProps> =
         const hostedFieldsContainerRef = useRef<HTMLDivElement>(null);
         const hostedFields = useRef<PayPalHostedFieldsComponent>();
         const [, setErrorState] = useState(null);
-        console.log("***", childrenList);
+
         /**
          * Executed on the mount process to validate the children
          */

From d2e4ce781aef83c325ee9526f41f17e4399a7480 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Fri, 8 Oct 2021 12:53:45 -0500
Subject: [PATCH 11/19] feat(errorMessage): reafctor errorMessage function

---
 src/components/PayPalButtons.tsx              | 33 ++++++------------
 src/components/PayPalMarks.tsx                | 31 ++++++-----------
 src/components/PayPalMessages.tsx             | 34 ++++++-------------
 .../__snapshots__/PayPalButtons.test.js.snap  |  6 +++-
 src/utils.ts                                  | 34 +++++++++++++++++++
 5 files changed, 71 insertions(+), 67 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index 74f01815..ad0334fc 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, FunctionComponent } from "react";
 import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
-import { getPayPalWindowNamespace } from "../utils";
-import { DEFAULT_PAYPAL_NAMESPACE, DATA_NAMESPACE } from "../constants";
+import { getPayPalWindowNamespace, generateErrorMessage } from "../utils";
+import { DATA_NAMESPACE } from "../constants";
 import type {
     PayPalButtonsComponent,
     OnInitActions,
@@ -79,7 +79,15 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             paypalWindowNamespace.Buttons === undefined
         ) {
             setErrorState(() => {
-                throw new Error(getErrorMessage(options));
+                throw new Error(
+                    generateErrorMessage({
+                        componentName:
+                            PayPalButtons.displayName || "PayPalButtons",
+                        requiredOption: "buttons",
+                        components: options.components,
+                        [DATA_NAMESPACE]: options["data-namespace"],
+                    })
+                );
             });
             return closeButtonsComponent;
         }
@@ -169,22 +177,3 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
         </>
     );
 };
-
-function getErrorMessage({
-    components = "",
-    [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-}) {
-    let errorMessage = `Unable to render <PayPalButtons /> because window.${dataNamespace}.Buttons is undefined.`;
-
-    // the JS SDK includes the Buttons component by default when no 'components' are specified.
-    // The 'buttons' component must be included in the 'components' list when using it with other components.
-    if (components.length && !components.includes("buttons")) {
-        const expectedComponents = `${components},buttons`;
-
-        errorMessage +=
-            "\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:" +
-            `\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`;
-    }
-
-    return errorMessage;
-}
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 45e664da..62013bbe 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, FC, ReactNode } from "react";
 import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
-import { getPayPalWindowNamespace } from "../utils";
-import { DEFAULT_PAYPAL_NAMESPACE, DATA_NAMESPACE } from "../constants";
+import { getPayPalWindowNamespace, generateErrorMessage } from "../utils";
+import { DATA_NAMESPACE } from "../constants";
 import type {
     PayPalMarksComponentOptions,
     PayPalMarksComponent,
@@ -85,7 +85,14 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             paypalWindowNamespace.Marks === undefined
         ) {
             setErrorState(() => {
-                throw new Error(getErrorMessage(options));
+                throw new Error(
+                    generateErrorMessage({
+                        componentName: PayPalMarks.displayName || "PayPalMarks",
+                        requiredOption: "marks",
+                        components: options.components,
+                        [DATA_NAMESPACE]: options["data-namespace"],
+                    })
+                );
             });
             return;
         }
@@ -104,21 +111,3 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
         </>
     );
 };
-
-function getErrorMessage({
-    components = "",
-    [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-}) {
-    let errorMessage = `Unable to render <PayPalMarks /> because window.${dataNamespace}.Marks is undefined.`;
-
-    // the JS SDK does not load the Marks component by default. It must be passed into the "components" query parameter.
-    if (!components.includes("marks")) {
-        const expectedComponents = components ? `${components},marks` : "marks";
-
-        errorMessage +=
-            "\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:" +
-            `\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`;
-    }
-
-    return errorMessage;
-}
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index 9d0e36a0..59f8be8a 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, FunctionComponent } from "react";
 import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
-import { getPayPalWindowNamespace } from "../utils";
-import { DEFAULT_PAYPAL_NAMESPACE, DATA_NAMESPACE } from "../constants";
+import { getPayPalWindowNamespace, generateErrorMessage } from "../utils";
+import { DATA_NAMESPACE } from "../constants";
 import type {
     PayPalMessagesComponentOptions,
     PayPalMessagesComponent,
@@ -40,7 +40,15 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 paypalWindowNamespace.Messages === undefined
             ) {
                 setErrorState(() => {
-                    throw new Error(getErrorMessage(options));
+                    throw new Error(
+                        generateErrorMessage({
+                            componentName:
+                                PayPalMessages.displayName || "PayPalMessages",
+                            requiredOption: "messages",
+                            components: options.components,
+                            [DATA_NAMESPACE]: options["data-namespace"],
+                        })
+                    );
                 });
                 return;
             }
@@ -76,23 +84,3 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
 
         return <div ref={messagesContainerRef} className={className} />;
     };
-
-function getErrorMessage({
-    components = "",
-    [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-}) {
-    let errorMessage = `Unable to render <PayPalMessages /> because window.${dataNamespace}.Messages is undefined.`;
-
-    // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter.
-    if (!components.includes("messages")) {
-        const expectedComponents = components
-            ? `${components},messages`
-            : "messages";
-
-        errorMessage +=
-            "\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:" +
-            `\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`;
-    }
-
-    return errorMessage;
-}
diff --git a/src/components/__snapshots__/PayPalButtons.test.js.snap b/src/components/__snapshots__/PayPalButtons.test.js.snap
index bf5ed364..c547f663 100644
--- a/src/components/__snapshots__/PayPalButtons.test.js.snap
+++ b/src/components/__snapshots__/PayPalButtons.test.js.snap
@@ -2,7 +2,11 @@
 
 exports[`<PayPalButtons /> should catch and throw unexpected zoid render errors 1`] = `"Failed to render <PayPalButtons /> component. Unknown error"`;
 
-exports[`<PayPalButtons /> should throw an error when no components are passed to the PayPalScriptProvider 1`] = `"Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined."`;
+exports[`<PayPalButtons /> should throw an error when no components are passed to the PayPalScriptProvider 1`] = `
+"Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.
+To fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:
+\`<PayPalScriptProvider options={{ components: 'buttons'}}>\`."
+`;
 
 exports[`<PayPalButtons /> should throw an error when the 'buttons' component is missing from the components list passed to the PayPalScriptProvider 1`] = `
 "Unable to render <PayPalButtons /> because window.paypal.Buttons is undefined.
diff --git a/src/utils.ts b/src/utils.ts
index 483fd601..5fb903aa 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,10 +1,18 @@
 import {
+    DATA_NAMESPACE,
     DEFAULT_PAYPAL_NAMESPACE,
     DEFAULT_BRAINTREE_NAMESPACE,
 } from "./constants";
 import type { PayPalNamespace } from "@paypal/paypal-js";
 import type { BraintreeNamespace } from "./types";
 
+type ErrorMessageParams = {
+    componentName: string;
+    requiredOption: string;
+    components?: string;
+    [DATA_NAMESPACE]?: string;
+};
+
 /**
  * Get the namespace from the window in the browser
  * this is useful to get the paypal object from window
@@ -56,3 +64,29 @@ export function hashStr(str: string): string {
 
     return hash;
 }
+
+export function generateErrorMessage({
+    componentName,
+    requiredOption,
+    components = "",
+    [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
+}: ErrorMessageParams): string {
+    const requiredOptionCapitalized = requiredOption
+        .charAt(0)
+        .toUpperCase()
+        .concat(requiredOption.substring(1));
+    let errorMessage = `Unable to render <${componentName} /> because window.${dataNamespace}.${requiredOptionCapitalized} is undefined.`;
+
+    // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter.
+    if (!components.includes(requiredOption)) {
+        const expectedComponents = [components, requiredOption]
+            .filter(Boolean)
+            .join();
+
+        errorMessage +=
+            `\nTo fix the issue, add '${requiredOption}' to the list of components passed to the parent PayPalScriptProvider:` +
+            `\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`;
+    }
+
+    return errorMessage;
+}

From bc7392212857b299a8149c270aa2ea45fde55a77 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Fri, 8 Oct 2021 13:11:52 -0500
Subject: [PATCH 12/19] fix(erroMessage): refactor params

---
 src/components/PayPalButtons.tsx  | 12 +++++-------
 src/components/PayPalMarks.tsx    | 11 +++++------
 src/components/PayPalMessages.tsx | 12 +++++-------
 src/utils.ts                      | 22 +++++++++-------------
 4 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index ad0334fc..b8307639 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -80,13 +80,11 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
         ) {
             setErrorState(() => {
                 throw new Error(
-                    generateErrorMessage({
-                        componentName:
-                            PayPalButtons.displayName || "PayPalButtons",
-                        requiredOption: "buttons",
-                        components: options.components,
-                        [DATA_NAMESPACE]: options["data-namespace"],
-                    })
+                    generateErrorMessage(
+                        PayPalButtons.displayName || "PayPalButtons",
+                        "buttons",
+                        options
+                    )
                 );
             });
             return closeButtonsComponent;
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 62013bbe..943a8b94 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -86,12 +86,11 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
         ) {
             setErrorState(() => {
                 throw new Error(
-                    generateErrorMessage({
-                        componentName: PayPalMarks.displayName || "PayPalMarks",
-                        requiredOption: "marks",
-                        components: options.components,
-                        [DATA_NAMESPACE]: options["data-namespace"],
-                    })
+                    generateErrorMessage(
+                        PayPalMarks.displayName || "PayPalMarks",
+                        "marks",
+                        options
+                    )
                 );
             });
             return;
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index 59f8be8a..120bd558 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -41,13 +41,11 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
             ) {
                 setErrorState(() => {
                     throw new Error(
-                        generateErrorMessage({
-                            componentName:
-                                PayPalMessages.displayName || "PayPalMessages",
-                            requiredOption: "messages",
-                            components: options.components,
-                            [DATA_NAMESPACE]: options["data-namespace"],
-                        })
+                        generateErrorMessage(
+                            PayPalMessages.displayName || "PayPalMessages",
+                            "messages",
+                            options
+                        )
                     );
                 });
                 return;
diff --git a/src/utils.ts b/src/utils.ts
index 5fb903aa..588e7b8d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -5,13 +5,7 @@ import {
 } from "./constants";
 import type { PayPalNamespace } from "@paypal/paypal-js";
 import type { BraintreeNamespace } from "./types";
-
-type ErrorMessageParams = {
-    componentName: string;
-    requiredOption: string;
-    components?: string;
-    [DATA_NAMESPACE]?: string;
-};
+import type { ReactPayPalScriptOptions } from "./types/scriptProviderTypes";
 
 /**
  * Get the namespace from the window in the browser
@@ -65,12 +59,14 @@ export function hashStr(str: string): string {
     return hash;
 }
 
-export function generateErrorMessage({
-    componentName,
-    requiredOption,
-    components = "",
-    [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-}: ErrorMessageParams): string {
+export function generateErrorMessage(
+    componentName: string,
+    requiredOption: string,
+    {
+        components = "",
+        [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
+    }: ReactPayPalScriptOptions
+): string {
     const requiredOptionCapitalized = requiredOption
         .charAt(0)
         .toUpperCase()

From b1dca362e0470a7c8c6199cf6bbd2ac2048e22ce Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Mon, 11 Oct 2021 10:05:44 -0500
Subject: [PATCH 13/19] fix(hostedFields): edit on hosted fields instance
 evaluation

---
 .../PayPalHostedFieldsProvider.tsx            | 21 +++++++-------
 src/components/hostedFields/utils.test.js     | 28 +++++++++----------
 src/components/hostedFields/utils.ts          |  6 ++--
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
index 347fd81c..f2c9a8f7 100644
--- a/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
+++ b/src/components/hostedFields/PayPalHostedFieldsProvider.tsx
@@ -6,7 +6,7 @@ import { useScriptProviderContext } from "../../hooks/scriptProviderHooks";
 import { DATA_NAMESPACE } from "../../constants";
 import {
     generateHostedFieldsFromChildren,
-    throwMissingHostedFieldsError,
+    generateMissingHostedFieldsError,
 } from "./utils";
 import { validateHostedFieldChildren } from "./validators";
 import { SCRIPT_LOADING_STATE } from "../../types/enums";
@@ -44,20 +44,19 @@ export const PayPalHostedFieldsProvider: FC<PayPalHostedFieldsComponentProps> =
             // Only render the hosted fields when script is loaded and hostedFields is eligible
             if (!(loadingStatus === SCRIPT_LOADING_STATE.RESOLVED)) return;
             // Get the hosted fields from the [window.paypal.HostedFields] SDK
-            if (!hostedFields.current) {
-                // Set HostedFields SDK in the mount process only
-                hostedFields.current = getPayPalWindowNamespace(
-                    options[DATA_NAMESPACE]
-                ).HostedFields;
+            hostedFields.current ??= getPayPalWindowNamespace(
+                options[DATA_NAMESPACE]
+            ).HostedFields;
 
-                if (!hostedFields.current) {
-                    throwMissingHostedFieldsError({
+            if (!hostedFields.current) {
+                throw new Error(
+                    generateMissingHostedFieldsError({
                         components: options.components,
                         [DATA_NAMESPACE]: options[DATA_NAMESPACE],
-                    });
-                }
+                    })
+                );
             }
-            if (!hostedFields?.current?.isEligible()) {
+            if (!hostedFields.current.isEligible()) {
                 return setIsEligible(false);
             }
             // Clean all the fields before the rerender
diff --git a/src/components/hostedFields/utils.test.js b/src/components/hostedFields/utils.test.js
index 50c2b6b7..c0f61363 100644
--- a/src/components/hostedFields/utils.test.js
+++ b/src/components/hostedFields/utils.test.js
@@ -2,7 +2,7 @@ import React from "react";
 
 import { PayPalHostedField } from "./PayPalHostedField";
 import {
-    throwMissingHostedFieldsError,
+    generateMissingHostedFieldsError,
     generateHostedFieldsFromChildren,
 } from "./utils";
 import { DATA_NAMESPACE } from "../../constants";
@@ -11,34 +11,32 @@ import { PAYPAL_HOSTED_FIELDS_TYPES } from "../../types/enums";
 const exceptionMessagePayPalNamespace =
     "Unable to render <PayPalHostedFieldsProvider /> because window.paypal.HostedFields is undefined.\nTo fix the issue, add 'hosted-fields' to the list of components passed to the parent PayPalScriptProvider: <PayPalScriptProvider options={{ components: 'hosted-fields'}}>";
 
-describe("throwMissingHostedFieldsError", () => {
+describe("generateMissingHostedFieldsError", () => {
     const exceptionMessage =
         "Unable to render <PayPalHostedFieldsProvider /> because window.Braintree.HostedFields is undefined.\nTo fix the issue, add 'hosted-fields' to the list of components passed to the parent PayPalScriptProvider: <PayPalScriptProvider options={{ components: 'marks,hosted-fields'}}>";
 
     test("should throw exception with Braintree namespace", () => {
-        expect(() => {
-            throwMissingHostedFieldsError({
+        expect(
+            generateMissingHostedFieldsError({
                 components: "marks",
                 [DATA_NAMESPACE]: "Braintree",
-            });
-        }).toThrow(new Error(exceptionMessage));
+            })
+        ).toEqual(exceptionMessage);
     });
 
     test("should throw exception with default namespace", () => {
-        expect(() => {
-            throwMissingHostedFieldsError({});
-        }).toThrow(new Error(exceptionMessagePayPalNamespace));
+        expect(generateMissingHostedFieldsError({})).toEqual(
+            exceptionMessagePayPalNamespace
+        );
     });
 
     test("should throw exception unknown exception ", () => {
         window.paypal = {};
 
-        expect(() => {
-            throwMissingHostedFieldsError({ components: "hosted-fields" });
-        }).toThrow(
-            new Error(
-                "Unable to render <PayPalHostedFieldsProvider /> because window.paypal.HostedFields is undefined."
-            )
+        expect(
+            generateMissingHostedFieldsError({ components: "hosted-fields" })
+        ).toEqual(
+            "Unable to render <PayPalHostedFieldsProvider /> because window.paypal.HostedFields is undefined."
         );
     });
 });
diff --git a/src/components/hostedFields/utils.ts b/src/components/hostedFields/utils.ts
index 3f663a1f..585d80bd 100644
--- a/src/components/hostedFields/utils.ts
+++ b/src/components/hostedFields/utils.ts
@@ -29,10 +29,10 @@ type PayPalHostedFieldOption = {
  * @throws {@code Error}
  *
  */
-export const throwMissingHostedFieldsError = ({
+export const generateMissingHostedFieldsError = ({
     components = "",
     [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-}: PayPalHostedFieldsNamespace): never => {
+}: PayPalHostedFieldsNamespace): string => {
     const expectedComponents = components
         ? `${components},hosted-fields`
         : "hosted-fields";
@@ -42,7 +42,7 @@ export const throwMissingHostedFieldsError = ({
         errorMessage += `\nTo fix the issue, add 'hosted-fields' to the list of components passed to the parent PayPalScriptProvider: <PayPalScriptProvider options={{ components: '${expectedComponents}'}}>`;
     }
 
-    throw new Error(errorMessage);
+    return errorMessage;
 };
 
 /**

From fccb125cba9b9ce647569b745122166673244108 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Tue, 12 Oct 2021 10:20:43 -0500
Subject: [PATCH 14/19] feat(component): expiclit set displayName prop

---
 src/components/PayPalButtons.tsx  | 4 +++-
 src/components/PayPalMarks.tsx    | 4 +++-
 src/components/PayPalMessages.tsx | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index b8307639..38ac351f 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -81,7 +81,7 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             setErrorState(() => {
                 throw new Error(
                     generateErrorMessage(
-                        PayPalButtons.displayName || "PayPalButtons",
+                        PayPalButtons.displayName as string,
                         "buttons",
                         options
                     )
@@ -175,3 +175,5 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
         </>
     );
 };
+
+PayPalButtons.displayName = "PayPalButtons";
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 943a8b94..7cea3abe 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -87,7 +87,7 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             setErrorState(() => {
                 throw new Error(
                     generateErrorMessage(
-                        PayPalMarks.displayName || "PayPalMarks",
+                        PayPalMarks.displayName as string,
                         "marks",
                         options
                     )
@@ -110,3 +110,5 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
         </>
     );
 };
+
+PayPalMarks.displayName = "PayPalMarks";
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index 120bd558..e6c77079 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -42,7 +42,7 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 setErrorState(() => {
                     throw new Error(
                         generateErrorMessage(
-                            PayPalMessages.displayName || "PayPalMessages",
+                            PayPalMessages.displayName as string,
                             "messages",
                             options
                         )
@@ -82,3 +82,5 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
 
         return <div ref={messagesContainerRef} className={className} />;
     };
+
+PayPalMessages.displayName = "PayPalMessages";

From e2c14173699ee0afa606969dbd1247be22ca0ea8 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Tue, 12 Oct 2021 17:45:56 -0500
Subject: [PATCH 15/19] feat(errormessage): refactor to set params as object

---
 src/components/PayPalButtons.tsx  | 13 ++++++++-----
 src/components/PayPalMarks.tsx    | 16 +++++++++-------
 src/components/PayPalMessages.tsx | 16 +++++++++-------
 src/utils.ts                      | 23 +++++++++++++----------
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index 38ac351f..b08ecaa7 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -78,13 +78,16 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Buttons === undefined
         ) {
+            const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+
             setErrorState(() => {
                 throw new Error(
-                    generateErrorMessage(
-                        PayPalButtons.displayName as string,
-                        "buttons",
-                        options
-                    )
+                    generateErrorMessage({
+                        componentName: PayPalButtons.displayName as string,
+                        requiredOption: "buttons",
+                        components,
+                        dataNamespace,
+                    })
                 );
             });
             return closeButtonsComponent;
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 7cea3abe..4b7f993d 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -84,16 +84,18 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Marks === undefined
         ) {
-            setErrorState(() => {
+            const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+
+            return setErrorState(() => {
                 throw new Error(
-                    generateErrorMessage(
-                        PayPalMarks.displayName as string,
-                        "marks",
-                        options
-                    )
+                    generateErrorMessage({
+                        componentName: PayPalMarks.displayName as string,
+                        requiredOption: "marks",
+                        components,
+                        dataNamespace,
+                    })
                 );
             });
-            return;
         }
 
         renderPayPalMark(paypalWindowNamespace.Marks({ ...markProps }));
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index e6c77079..f5cfbd69 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -39,16 +39,18 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 paypalWindowNamespace === undefined ||
                 paypalWindowNamespace.Messages === undefined
             ) {
-                setErrorState(() => {
+                const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+
+                return setErrorState(() => {
                     throw new Error(
-                        generateErrorMessage(
-                            PayPalMessages.displayName as string,
-                            "messages",
-                            options
-                        )
+                        generateErrorMessage({
+                            componentName: PayPalMessages.displayName as string,
+                            requiredOption: "messages",
+                            components,
+                            dataNamespace,
+                        })
                     );
                 });
-                return;
             }
 
             messages.current = paypalWindowNamespace.Messages({
diff --git a/src/utils.ts b/src/utils.ts
index 588e7b8d..81073045 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,11 +1,16 @@
 import {
-    DATA_NAMESPACE,
     DEFAULT_PAYPAL_NAMESPACE,
     DEFAULT_BRAINTREE_NAMESPACE,
 } from "./constants";
 import type { PayPalNamespace } from "@paypal/paypal-js";
 import type { BraintreeNamespace } from "./types";
-import type { ReactPayPalScriptOptions } from "./types/scriptProviderTypes";
+
+type ErrorMessageParams = {
+    componentName: string;
+    requiredOption: string;
+    components?: string;
+    dataNamespace?: string;
+};
 
 /**
  * Get the namespace from the window in the browser
@@ -59,14 +64,12 @@ export function hashStr(str: string): string {
     return hash;
 }
 
-export function generateErrorMessage(
-    componentName: string,
-    requiredOption: string,
-    {
-        components = "",
-        [DATA_NAMESPACE]: dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
-    }: ReactPayPalScriptOptions
-): string {
+export function generateErrorMessage({
+    componentName,
+    requiredOption,
+    components = "",
+    dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
+}: ErrorMessageParams): string {
     const requiredOptionCapitalized = requiredOption
         .charAt(0)
         .toUpperCase()

From 782f4006312c7512dbb226934977b2b6b214bc76 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Tue, 12 Oct 2021 18:03:57 -0500
Subject: [PATCH 16/19] fix(errorMessage): params name typo

---
 src/components/PayPalButtons.tsx  |  9 ++++++---
 src/components/PayPalMarks.tsx    |  9 ++++++---
 src/components/PayPalMessages.tsx |  9 ++++++---
 src/utils.ts                      | 14 +++++++-------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index b08ecaa7..fb83ec58 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -78,15 +78,18 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Buttons === undefined
         ) {
-            const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+            const {
+                components: sdkRequestedComponents,
+                [DATA_NAMESPACE]: sdkDataNamespace,
+            } = options;
 
             setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
                         componentName: PayPalButtons.displayName as string,
                         requiredOption: "buttons",
-                        components,
-                        dataNamespace,
+                        sdkRequestedComponents,
+                        sdkDataNamespace,
                     })
                 );
             });
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 4b7f993d..d6d78386 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -84,15 +84,18 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Marks === undefined
         ) {
-            const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+            const {
+                components: sdkRequestedComponents,
+                [DATA_NAMESPACE]: sdkDataNamespace,
+            } = options;
 
             return setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
                         componentName: PayPalMarks.displayName as string,
                         requiredOption: "marks",
-                        components,
-                        dataNamespace,
+                        sdkRequestedComponents,
+                        sdkDataNamespace,
                     })
                 );
             });
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index f5cfbd69..08342be5 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -39,15 +39,18 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 paypalWindowNamespace === undefined ||
                 paypalWindowNamespace.Messages === undefined
             ) {
-                const { components, [DATA_NAMESPACE]: dataNamespace } = options;
+                const {
+                    components: sdkRequestedComponents,
+                    [DATA_NAMESPACE]: sdkDataNamespace,
+                } = options;
 
                 return setErrorState(() => {
                     throw new Error(
                         generateErrorMessage({
                             componentName: PayPalMessages.displayName as string,
                             requiredOption: "messages",
-                            components,
-                            dataNamespace,
+                            sdkRequestedComponents,
+                            sdkDataNamespace,
                         })
                     );
                 });
diff --git a/src/utils.ts b/src/utils.ts
index 81073045..fdcc2f0b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -8,8 +8,8 @@ import type { BraintreeNamespace } from "./types";
 type ErrorMessageParams = {
     componentName: string;
     requiredOption: string;
-    components?: string;
-    dataNamespace?: string;
+    sdkRequestedComponents?: string;
+    sdkDataNamespace?: string;
 };
 
 /**
@@ -67,18 +67,18 @@ export function hashStr(str: string): string {
 export function generateErrorMessage({
     componentName,
     requiredOption,
-    components = "",
-    dataNamespace = DEFAULT_PAYPAL_NAMESPACE,
+    sdkRequestedComponents = "",
+    sdkDataNamespace = DEFAULT_PAYPAL_NAMESPACE,
 }: ErrorMessageParams): string {
     const requiredOptionCapitalized = requiredOption
         .charAt(0)
         .toUpperCase()
         .concat(requiredOption.substring(1));
-    let errorMessage = `Unable to render <${componentName} /> because window.${dataNamespace}.${requiredOptionCapitalized} is undefined.`;
+    let errorMessage = `Unable to render <${componentName} /> because window.${sdkDataNamespace}.${requiredOptionCapitalized} is undefined.`;
 
     // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter.
-    if (!components.includes(requiredOption)) {
-        const expectedComponents = [components, requiredOption]
+    if (!sdkRequestedComponents.includes(requiredOption)) {
+        const expectedComponents = [sdkRequestedComponents, requiredOption]
             .filter(Boolean)
             .join();
 

From ac3586e62c920005e1dbe305aa8592745139f06e Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Wed, 13 Oct 2021 09:22:54 -0500
Subject: [PATCH 17/19] fix(errorMessage): clean extra variables

---
 src/components/PayPalButtons.tsx  | 9 ++-------
 src/components/PayPalMarks.tsx    | 9 ++-------
 src/components/PayPalMessages.tsx | 9 ++-------
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index fb83ec58..362cfd59 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -78,18 +78,13 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Buttons === undefined
         ) {
-            const {
-                components: sdkRequestedComponents,
-                [DATA_NAMESPACE]: sdkDataNamespace,
-            } = options;
-
             setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
                         componentName: PayPalButtons.displayName as string,
                         requiredOption: "buttons",
-                        sdkRequestedComponents,
-                        sdkDataNamespace,
+                        sdkRequestedComponents: options.components,
+                        sdkDataNamespace: options[DATA_NAMESPACE],
                     })
                 );
             });
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index d6d78386..47770874 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -84,18 +84,13 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             paypalWindowNamespace === undefined ||
             paypalWindowNamespace.Marks === undefined
         ) {
-            const {
-                components: sdkRequestedComponents,
-                [DATA_NAMESPACE]: sdkDataNamespace,
-            } = options;
-
             return setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
                         componentName: PayPalMarks.displayName as string,
                         requiredOption: "marks",
-                        sdkRequestedComponents,
-                        sdkDataNamespace,
+                        sdkRequestedComponents: options.components,
+                        sdkDataNamespace: options[DATA_NAMESPACE],
                     })
                 );
             });
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index 08342be5..f6ba6ad5 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -39,18 +39,13 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 paypalWindowNamespace === undefined ||
                 paypalWindowNamespace.Messages === undefined
             ) {
-                const {
-                    components: sdkRequestedComponents,
-                    [DATA_NAMESPACE]: sdkDataNamespace,
-                } = options;
-
                 return setErrorState(() => {
                     throw new Error(
                         generateErrorMessage({
                             componentName: PayPalMessages.displayName as string,
                             requiredOption: "messages",
-                            sdkRequestedComponents,
-                            sdkDataNamespace,
+                            sdkRequestedComponents: options.components,
+                            sdkDataNamespace: options[DATA_NAMESPACE],
                         })
                     );
                 });

From b6d17b8cfa47f06718f03f54cc944ea9c28a55d2 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Wed, 13 Oct 2021 09:29:02 -0500
Subject: [PATCH 18/19] fix(errorMessage): rename parameteres names

---
 src/components/PayPalButtons.tsx  |  4 ++--
 src/components/PayPalMarks.tsx    |  4 ++--
 src/components/PayPalMessages.tsx |  5 +++--
 src/utils.ts                      | 20 ++++++++++----------
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/PayPalButtons.tsx b/src/components/PayPalButtons.tsx
index 362cfd59..d7efa451 100644
--- a/src/components/PayPalButtons.tsx
+++ b/src/components/PayPalButtons.tsx
@@ -81,8 +81,8 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
             setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
-                        componentName: PayPalButtons.displayName as string,
-                        requiredOption: "buttons",
+                        reactComponentName: PayPalButtons.displayName as string,
+                        sdkComponentKey: "buttons",
                         sdkRequestedComponents: options.components,
                         sdkDataNamespace: options[DATA_NAMESPACE],
                     })
diff --git a/src/components/PayPalMarks.tsx b/src/components/PayPalMarks.tsx
index 47770874..2ccd4eb4 100644
--- a/src/components/PayPalMarks.tsx
+++ b/src/components/PayPalMarks.tsx
@@ -87,8 +87,8 @@ export const PayPalMarks: FC<PayPalMarksComponentProps> = ({
             return setErrorState(() => {
                 throw new Error(
                     generateErrorMessage({
-                        componentName: PayPalMarks.displayName as string,
-                        requiredOption: "marks",
+                        reactComponentName: PayPalMarks.displayName as string,
+                        sdkComponentKey: "marks",
                         sdkRequestedComponents: options.components,
                         sdkDataNamespace: options[DATA_NAMESPACE],
                     })
diff --git a/src/components/PayPalMessages.tsx b/src/components/PayPalMessages.tsx
index f6ba6ad5..bf678a94 100644
--- a/src/components/PayPalMessages.tsx
+++ b/src/components/PayPalMessages.tsx
@@ -42,8 +42,9 @@ export const PayPalMessages: FunctionComponent<PayPalMessagesComponentProps> =
                 return setErrorState(() => {
                     throw new Error(
                         generateErrorMessage({
-                            componentName: PayPalMessages.displayName as string,
-                            requiredOption: "messages",
+                            reactComponentName:
+                                PayPalMessages.displayName as string,
+                            sdkComponentKey: "messages",
                             sdkRequestedComponents: options.components,
                             sdkDataNamespace: options[DATA_NAMESPACE],
                         })
diff --git a/src/utils.ts b/src/utils.ts
index fdcc2f0b..8dfbe008 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -6,8 +6,8 @@ import type { PayPalNamespace } from "@paypal/paypal-js";
 import type { BraintreeNamespace } from "./types";
 
 type ErrorMessageParams = {
-    componentName: string;
-    requiredOption: string;
+    reactComponentName: string;
+    sdkComponentKey: string;
     sdkRequestedComponents?: string;
     sdkDataNamespace?: string;
 };
@@ -65,25 +65,25 @@ export function hashStr(str: string): string {
 }
 
 export function generateErrorMessage({
-    componentName,
-    requiredOption,
+    reactComponentName,
+    sdkComponentKey,
     sdkRequestedComponents = "",
     sdkDataNamespace = DEFAULT_PAYPAL_NAMESPACE,
 }: ErrorMessageParams): string {
-    const requiredOptionCapitalized = requiredOption
+    const requiredOptionCapitalized = sdkComponentKey
         .charAt(0)
         .toUpperCase()
-        .concat(requiredOption.substring(1));
-    let errorMessage = `Unable to render <${componentName} /> because window.${sdkDataNamespace}.${requiredOptionCapitalized} is undefined.`;
+        .concat(sdkComponentKey.substring(1));
+    let errorMessage = `Unable to render <${reactComponentName} /> because window.${sdkDataNamespace}.${requiredOptionCapitalized} is undefined.`;
 
     // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter.
-    if (!sdkRequestedComponents.includes(requiredOption)) {
-        const expectedComponents = [sdkRequestedComponents, requiredOption]
+    if (!sdkRequestedComponents.includes(sdkComponentKey)) {
+        const expectedComponents = [sdkRequestedComponents, sdkComponentKey]
             .filter(Boolean)
             .join();
 
         errorMessage +=
-            `\nTo fix the issue, add '${requiredOption}' to the list of components passed to the parent PayPalScriptProvider:` +
+            `\nTo fix the issue, add '${sdkComponentKey}' to the list of components passed to the parent PayPalScriptProvider:` +
             `\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`;
     }
 

From 8a753e32bad1982a9ea00f47f02a2ca2a74e7733 Mon Sep 17 00:00:00 2001
From: Arturo Riveron Borodovisina <aborodovisina@paypal.com>
Date: Fri, 15 Oct 2021 11:12:56 -0500
Subject: [PATCH 19/19] docs(errorMessage):  minor edit on comments

---
 src/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils.ts b/src/utils.ts
index 8dfbe008..069d52b5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -76,7 +76,8 @@ export function generateErrorMessage({
         .concat(sdkComponentKey.substring(1));
     let errorMessage = `Unable to render <${reactComponentName} /> because window.${sdkDataNamespace}.${requiredOptionCapitalized} is undefined.`;
 
-    // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter.
+    // The JS SDK only loads the buttons component by default.
+    // All other components like messages and marks must be requested using the "components" query parameter
     if (!sdkRequestedComponents.includes(sdkComponentKey)) {
         const expectedComponents = [sdkRequestedComponents, sdkComponentKey]
             .filter(Boolean)