From b3175fd9e3ae9440525b289377eb91acb9d8ffde Mon Sep 17 00:00:00 2001
From: jscheinhorn <jscheinhorn@paypal.com>
Date: Wed, 1 Nov 2023 14:08:40 -0400
Subject: [PATCH 1/2] feat: show style options

---
 client/public/index.js | 52 ++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/client/public/index.js b/client/public/index.js
index b448cc8..a6ac315 100644
--- a/client/public/index.js
+++ b/client/public/index.js
@@ -65,39 +65,41 @@ paypal
 
 paypal
   .PaymentFields({
-    fundingSource: paypal.FUNDING.IDEAL,
+    // style object is optional
     style: {
+      // customize field attributes (optional)
       variables: {
-        fontFamily: "'Helvetica Neue', Arial, sans-serif",
-        fontSizeBase: "0.9375rem",
-        fontSizeSm: "0.93rem",
-        fontSizeM: "0.93rem",
-        fontSizeLg: "1.0625rem",
-        textColor: "#2c2e2f",
-        colorTextPlaceholder: "#2c2e2f",
-        colorBackground: "#fff",
-        colorInfo: "#0dcaf0",
-        colorDanger: "#d20000",
-        borderRadius: "0.2rem",
-        borderColor: "#dfe1e5",
-        borderWidth: "1px",
-        borderFocusColor: "black",
-        spacingUnit: "10px",
+        fontFamily: "'Helvetica Neue', Arial, sans-serif", // applies to all payment fields text
+        fontSizeBase: "0.9375rem", // applies to input, placeholder, and dropdown text values
+        fontSizeM: "0.93rem", // the payment fields title description
+        textColor: "#2c2e2f", // applies payment fields title description, input, and dropdown text
+        colorTextPlaceholder: "#2c2e2f", // applies to the placeholder text
+        colorBackground: "#fff", // background color of the input and dropdown fields
+        colorDanger: "#d20000", // applies to the invalid field border and validation text
+        borderRadius: "0.2rem", // for the input and dropdown fields
+        borderColor: "#dfe1e5", // for the input and dropdown fields
+        borderWidth: "1px", // for the input and dropdown fields
+        borderFocusColor: "black", // color for the invalid field border and validation text
+        spacingUnit: "10px", // spacing between multiple input fields
       },
+
+      // set custom rules to apply to fields classes (optional)
+      // see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
       rules: {
-        ".Input": {},
-        ".Input:hover": {},
-        ".Input:focus": {
-        },
-        ".Input:active": {},
-        ".Input--invalid": {},
-        ".Label": {},
-        ".Error": {
-          marginTop: '2px',
+        ".Input": {}, // overwrite properties for the input fields
+        ".Input:hover": {}, // applies to the input field on mouse hover
+        ".Input:focus": { // applies to the focused input field
+          color: 'blue',
+          boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
         },
+        ".Input:active": {}, // applies when input fields are clicked
+        ".Input--invalid": {}, // applies to input fields when invalid input is entered
+        ".Label": {}, // overwrite properties for the input field labels
       },
     },
+
     fields: {
+      // fields prefill info (optional)
       name: {
         value: "",
       },

From 1c8d48bd3bbbf97a244726c62407a8719aced314 Mon Sep 17 00:00:00 2001
From: jscheinhorn <jscheinhorn@paypal.com>
Date: Thu, 16 Nov 2023 11:41:38 -0500
Subject: [PATCH 2/2] fix: replace deleted funding source

---
 client/public/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/public/index.js b/client/public/index.js
index a6ac315..730482e 100644
--- a/client/public/index.js
+++ b/client/public/index.js
@@ -65,6 +65,7 @@ paypal
 
 paypal
   .PaymentFields({
+    fundingSource: paypal.FUNDING.IDEAL,
     // style object is optional
     style: {
       // customize field attributes (optional)