From cf4196d78815b553661a56fb1c91430240ed8f40 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 23 Apr 2024 14:13:13 +0530
Subject: [PATCH 1/4] refactor: paymentMethodList changes

---
 src/Components/AccordionContainer.res |  8 ++++----
 src/LoaderController.res              | 24 +++++++++++++-----------
 src/PaymentElement.res                | 20 ++++++++++----------
 src/PaymentElementRenderer.res        |  4 ++--
 src/PaymentOptions.res                |  4 ++--
 src/Utilities/PaymentHelpers.res      |  8 ++++----
 src/Utilities/RecoilAtoms.res         |  2 +-
 7 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/Components/AccordionContainer.res b/src/Components/AccordionContainer.res
index 4914ab034..a2fd9cf77 100644
--- a/src/Components/AccordionContainer.res
+++ b/src/Components/AccordionContainer.res
@@ -2,13 +2,13 @@ open RecoilAtoms
 module Loader = {
   @react.component
   let make = (~cardShimmerCount) => {
-    let list = Recoil.useRecoilValueFromAtom(list)
+    let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
     let layoutClass = CardUtils.getLayoutClass(layout)
     open PaymentType
     open PaymentElementShimmer
-    switch list {
+    switch paymentMethodList {
     | SemiLoaded =>
       Array.make(~length=cardShimmerCount - 1, "")
       ->Array.mapWithIndex((_, i) => {
@@ -61,7 +61,7 @@ module Loader = {
 @react.component
 let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
-  let list = Recoil.useRecoilValueFromAtom(list)
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (showMore, setShowMore) = React.useState(_ => false)
@@ -81,7 +81,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
       !showMore &&
       !layoutClass.spacedAccordionItems &&
       index == 0 &&
-      list == SemiLoaded &&
+      paymentMethodList == SemiLoaded &&
       cardOptionDetails->Array.length == 1
     ) {
       `${themeObj.borderRadius} ${themeObj.borderRadius} 0px 0px`
diff --git a/src/LoaderController.res b/src/LoaderController.res
index e0b5a9aba..cb94999d4 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -5,7 +5,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   //<...>//
   let (configAtom, setConfig) = Recoil.useRecoilState(configAtom)
   let (keys, setKeys) = Recoil.useRecoilState(keys)
-  let (paymentlist, setList) = Recoil.useRecoilState(list)
+  let (paymentMethodList, setPaymentMethodList) = Recoil.useRecoilState(paymentMethodList)
   let (_, setSessions) = Recoil.useRecoilState(sessions)
   let (options, setOptions) = Recoil.useRecoilState(elementOptions)
   let (optionsPayment, setOptionsPayment) = Recoil.useRecoilState(optionAtom)
@@ -126,7 +126,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     handlePostMessage([("iframeMounted", true->JSON.Encode.bool)])
     handlePostMessage([("applePayMounted", true->JSON.Encode.bool)])
     logger.setLogInitiated()
-    let updatedState: PaymentType.loadType = switch paymentlist {
+    let updatedState: PaymentType.loadType = switch paymentMethodList {
     | Loading =>
       showCardFormByDefault && checkPriorityList(paymentMethodOrder) ? SemiLoaded : Loading
     | x => x
@@ -142,7 +142,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     | Loading =>
       logger.setLogInfo(~value="Loading", ~eventName=LOADER_CHANGED, ~latency=finalLoadLatency, ())
     | SemiLoaded => {
-        setList(_ => updatedState)
+        setPaymentMethodList(_ => updatedState)
         logger.setLogInfo(
           ~value="SemiLoaded",
           ~eventName=LOADER_CHANGED,
@@ -361,8 +361,8 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
           )
         }
         if dict->getDictIsSome("paymentMethodList") {
-          let list = dict->getJsonObjectFromDict("paymentMethodList")
-          let listDict = list->getDictFromJson
+          let paymentMethodList = dict->getJsonObjectFromDict("paymentMethodList")
+          let listDict = paymentMethodList->getDictFromJson
           if optionsPayment.business.name === "" {
             setOptionsPayment(prev => {
               ...prev,
@@ -377,14 +377,16 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
             Date.now() -. launchTime
           }
           let updatedState: PaymentType.loadType =
-            list == Dict.make()->JSON.Encode.object
-              ? LoadError(list)
+            paymentMethodList == Dict.make()->JSON.Encode.object
+              ? LoadError(paymentMethodList)
               : switch listDict->Dict.get("error") {
-                | Some(_) => LoadError(list)
+                | Some(_) => LoadError(paymentMethodList)
                 | None =>
                   let isNonEmptyPaymentMethodList =
                     listDict->getArray("payment_methods")->Array.length > 0
-                  isNonEmptyPaymentMethodList ? Loaded(list) : LoadError(list)
+                  isNonEmptyPaymentMethodList
+                    ? Loaded(paymentMethodList)
+                    : LoadError(paymentMethodList)
                 }
 
           let evalMethodsList = () =>
@@ -424,7 +426,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
             }
           }
 
-          setList(_ => updatedState)
+          setPaymentMethodList(_ => updatedState)
         }
         if dict->getDictIsSome("customerPaymentMethods") {
           let customerPaymentMethods = dict->PaymentType.createCustomerObjArr
@@ -439,7 +441,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
           }
 
           let evalMethodsList = () =>
-            switch paymentlist {
+            switch paymentMethodList {
             | Loaded(_) =>
               logger.setLogInfo(
                 ~value="Loaded",
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index 04a3cd033..2f977ef85 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -21,7 +21,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let optionAtomValue = Recoil.useRecoilValueFromAtom(optionAtom)
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
   let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
-  let methodslist = Recoil.useRecoilValueFromAtom(list)
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let paymentOrder = paymentMethodOrder->getOptionalArr->removeDuplicate
   let (sessions, setSessions) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (paymentOptions, setPaymentOptions) = React.useState(_ => [])
@@ -115,7 +115,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   )
 
   let (walletList, paymentOptionsList, actualList) = React.useMemo(() => {
-    switch methodslist {
+    switch paymentMethodList {
     | Loaded(paymentlist) =>
       let paymentOrder =
         paymentOrder->Array.length > 0 ? paymentOrder : PaymentModeType.defaultOrder
@@ -140,7 +140,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     | _ => ([], [], [])
     }
   }, (
-    methodslist,
+    paymentMethodList,
     paymentMethodOrder,
     isApplePayReady,
     isGooglePayReady,
@@ -149,7 +149,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   ))
 
   React.useEffect(() => {
-    switch methodslist {
+    switch paymentMethodList {
     | Loaded(paymentlist) =>
       let plist = paymentlist->getDictFromJson->PaymentMethodsRecord.itemToObjMapper
 
@@ -186,7 +186,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     | _ => ()
     }
     None
-  }, (methodslist, walletList, paymentOptionsList, actualList))
+  }, (paymentMethodList, walletList, paymentOptionsList, actualList))
   React.useEffect(() => {
     switch sessionsObj {
     | Loaded(ssn) => setSessions(_ => ssn)
@@ -226,7 +226,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
         ? prev
         : layoutClass.defaultCollapsed
         ? ""
-        : switch methodslist {
+        : switch paymentMethodList {
           | SemiLoaded
           | LoadError(_) =>
             showCardFormByDefault && checkPriorityList(paymentMethodOrder) ? "card" : ""
@@ -238,7 +238,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
           }
     )
     None
-  }, (layoutClass.defaultCollapsed, paymentOptions, methodslist, selectedOption))
+  }, (layoutClass.defaultCollapsed, paymentOptions, paymentMethodList, selectedOption))
   React.useEffect(() => {
     if layoutClass.\"type" == Tabs {
       let isCard: bool = cardOptions->Array.includes(selectedOption)
@@ -391,7 +391,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
 
   React.useEffect(() => {
     let evalMethodsList = () =>
-      switch methodslist {
+      switch paymentMethodList {
       | SemiLoaded | LoadError(_) | Loaded(_) =>
         handlePostMessage([("ready", true->JSON.Encode.bool)])
       | _ => ()
@@ -409,7 +409,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       }
     }
     None
-  }, (methodslist, customerPaymentMethods))
+  }, (paymentMethodList, customerPaymentMethods))
 
   <>
     <RenderIf condition={paymentLabel->Option.isSome}>
@@ -467,7 +467,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     <PoweredBy />
-    {switch methodslist {
+    {switch paymentMethodList {
     | LoadError(_) => React.null
     | _ =>
       <RenderIf condition={paymentOptions->Array.length == 0 && walletOptions->Array.length == 0}>
diff --git a/src/PaymentElementRenderer.res b/src/PaymentElementRenderer.res
index ed3bbfbd9..0931b4e71 100644
--- a/src/PaymentElementRenderer.res
+++ b/src/PaymentElementRenderer.res
@@ -11,8 +11,8 @@ let make = (
   }
   let {showLoader} = Recoil.useRecoilValueFromAtom(configAtom)
   let sessions = Recoil.useRecoilValueFromAtom(sessions)
-  let list = Recoil.useRecoilValueFromAtom(list)
-  switch (sessions, list) {
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
+  switch (sessions, paymentMethodList) {
   | (_, Loading) =>
     <RenderIf condition=showLoader>
       <PaymentElementShimmer />
diff --git a/src/PaymentOptions.res b/src/PaymentOptions.res
index a578136ca..82749de93 100644
--- a/src/PaymentOptions.res
+++ b/src/PaymentOptions.res
@@ -2,11 +2,11 @@ open RecoilAtoms
 module TabLoader = {
   @react.component
   let make = (~cardShimmerCount) => {
-    let list = Recoil.useRecoilValueFromAtom(list)
+    let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     open PaymentType
     open PaymentElementShimmer
-    switch list {
+    switch paymentMethodList {
     | SemiLoaded =>
       Array.make(~length=cardShimmerCount - 1, "")
       ->Array.mapWithIndex((_, i) => {
diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
index d7746678e..f80b6d179 100644
--- a/src/Utilities/PaymentHelpers.res
+++ b/src/Utilities/PaymentHelpers.res
@@ -728,7 +728,7 @@ let rec intentCall = (
 
 let usePaymentSync = (optLogger: option<OrcaLogger.loggerMake>, paymentType: payment) => {
   open RecoilAtoms
-  let list = Recoil.useRecoilValueFromAtom(list)
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let switchToCustomPod = Recoil.useRecoilValueFromAtom(switchToCustomPod)
   let setIsManualRetryEnabled = Recoil.useSetRecoilState(isManualRetryEnabled)
@@ -760,7 +760,7 @@ let usePaymentSync = (optLogger: option<OrcaLogger.loggerMake>, paymentType: pay
           (),
         )->ignore
       }
-      switch list {
+      switch paymentMethodList {
       | Loaded(_) => paymentSync()
       | _ => ()
       }
@@ -799,7 +799,7 @@ let usePaymentIntent = (optLogger, paymentType) => {
   open RecoilAtoms
   let blockConfirm = Recoil.useRecoilValueFromAtom(isConfirmBlocked)
   let switchToCustomPod = Recoil.useRecoilValueFromAtom(switchToCustomPod)
-  let list = Recoil.useRecoilValueFromAtom(list)
+  let paymentMethodList = Recoil.useRecoilValueFromAtom(paymentMethodList)
   let keys = Recoil.useRecoilValueFromAtom(keys)
 
   let (isManualRetryEnabled, setIsManualRetryEnabled) = Recoil.useRecoilState(isManualRetryEnabled)
@@ -925,7 +925,7 @@ let usePaymentIntent = (optLogger, paymentType) => {
         callIntent(bodyStr)
       }
 
-      switch list {
+      switch paymentMethodList {
       | LoadError(data)
       | Loaded(data) =>
         let paymentList = data->getDictFromJson->PaymentMethodsRecord.itemToObjMapper
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index 52aa93726..5f15a891f 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -6,7 +6,7 @@ let portalNodes = Recoil.atom("portalNodes", PortalState.defaultDict)
 let elementOptions = Recoil.atom("elementOptions", ElementType.defaultOptions)
 let optionAtom = Recoil.atom("options", PaymentType.defaultOptions)
 let sessions = Recoil.atom("sessions", PaymentType.Loading)
-let list = Recoil.atom("paymentMethodList", PaymentType.Loading)
+let paymentMethodList = Recoil.atom("paymentMethodList", PaymentType.Loading)
 let loggerAtom = Recoil.atom("component", OrcaLogger.defaultLoggerConfig)
 let sessionId = Recoil.atom("sessionId", "")
 let isConfirmBlocked = Recoil.atom("isConfirmBlocked", false)

From 5e1054e9df62ef6094b322ad21234c7262fbe011 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Tue, 23 Apr 2024 14:15:59 +0530
Subject: [PATCH 2/4] docs: template changes

---
 .github/PULL_REQUEST_TEMPLATE.md | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index c91742e85..7cf01bff4 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -14,17 +14,6 @@
 
 <!-- Describe your changes in detail -->
 
-## Motivation and Context
-
-<!--
-Why is this change required? What problem does it solve?
-If it fixes an open issue, please link to the issue here.
-
-If you don't have an issue, we'd recommend starting with one first so the PR
-can focus on the implementation (unless its an obvious bug or documentation fix
-that will have little conversation).
--->
-
 ## How did you test it?
 
 <!--

From 6ed640feffa4398cc120b6cc5c88edcf07755064 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Wed, 24 Apr 2024 12:13:23 +0530
Subject: [PATCH 3/4] refactor: list prop drilldown removal

---
 src/Components/DynamicFields.res             | 11 ++--
 src/Components/SavedCardItem.res             |  3 --
 src/Components/SavedMethods.res              | 12 ++---
 src/Components/Surcharge.res                 | 17 +++---
 src/Components/SurchargeUtils.res            | 18 +++----
 src/Hooks/UtilityHooks.res                   | 18 +++++--
 src/PaymentElement.res                       | 57 ++++++++++----------
 src/Payments/ACHBankDebit.res                |  7 +--
 src/Payments/ACHBankDebit.resi               |  2 +-
 src/Payments/ACHBankDebitLazy.res            |  5 +-
 src/Payments/ACHBankTransfer.res             |  7 +--
 src/Payments/ACHBankTransfer.resi            |  2 +-
 src/Payments/ACHBankTransferLazy.res         |  5 +-
 src/Payments/ApplePay.res                    | 13 +++--
 src/Payments/ApplePay.resi                   |  1 -
 src/Payments/ApplePayLazy.res                |  1 -
 src/Payments/BacsBankDebit.res               |  4 +-
 src/Payments/BacsBankDebit.resi              |  2 +-
 src/Payments/BacsBankDebitLazy.res           |  5 +-
 src/Payments/BacsBankTransfer.res            | 16 +++---
 src/Payments/BacsBankTransfer.resi           |  7 +--
 src/Payments/BacsBankTransferLazy.res        |  5 +-
 src/Payments/BecsBankDebit.res               |  4 +-
 src/Payments/BecsBankDebit.resi              |  2 +-
 src/Payments/BecsBankDebitLazy.res           |  5 +-
 src/Payments/Boleto.res                      |  5 +-
 src/Payments/Boleto.resi                     |  4 +-
 src/Payments/BoletoLazy.res                  |  5 +-
 src/Payments/CardPayment.res                 | 18 +++----
 src/Payments/GPay.res                        | 13 +++--
 src/Payments/GPay.resi                       |  1 -
 src/Payments/GPayLazy.res                    |  1 -
 src/Payments/KlarnaPayment.res               |  8 +--
 src/Payments/KlarnaPaymentLazy.res           |  5 +-
 src/Payments/KlarnaSDK.res                   |  8 +--
 src/Payments/KlarnaSDK.resi                  |  2 +-
 src/Payments/KlarnaSDKLazy.res               |  5 +-
 src/Payments/PayPal.res                      |  9 ++--
 src/Payments/PayPal.resi                     |  2 +-
 src/Payments/PayPalLazy.res                  |  2 +-
 src/Payments/PaymentMethodsRecord.res        | 12 +++--
 src/Payments/PaymentMethodsWrapper.res       | 10 ++--
 src/Payments/PaymentMethodsWrapperLazy.res   |  1 -
 src/Payments/PaymentRequestButtonElement.res | 22 ++++----
 src/Payments/PaypalSDK.res                   |  9 ++--
 src/Payments/PaypalSDK.resi                  |  2 +-
 src/Payments/PaypalSDKLazy.res               |  5 +-
 src/Payments/SepaBankDebit.res               |  4 +-
 src/Payments/SepaBankDebit.resi              |  2 +-
 src/Payments/SepaBankDebitLazy.res           |  5 +-
 src/Payments/SepaBankTransfer.res            |  7 +--
 src/Payments/SepaBankTransfer.resi           |  2 +-
 src/Payments/SepaBankTransferLazy.res        |  5 +-
 src/Utilities/DynamicFieldsUtils.res         | 22 ++++++--
 src/Utilities/PaymentUtils.res               |  6 ++-
 src/orca-loader/Elements.res                 | 17 +++---
 56 files changed, 215 insertions(+), 233 deletions(-)

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 0a5a1dcac..0baefdf0f 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -2,7 +2,6 @@ open RecoilAtoms
 @react.component
 let make = (
   ~paymentType,
-  ~list,
   ~paymentMethod,
   ~paymentMethodType,
   ~setRequiredFieldsBody,
@@ -14,6 +13,8 @@ let make = (
   ~isBancontact=false,
 ) => {
   open Utils
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
   React.useEffect(() => {
     setRequiredFieldsBody(_ => Dict.make())
     None
@@ -23,7 +24,7 @@ let make = (
 
   //<...>//
   let paymentMethodTypes = DynamicFieldsUtils.usePaymentMethodTypeFromList(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod,
     ~paymentMethodType,
   )
@@ -693,7 +694,7 @@ let make = (
                 | SpecialField(element) => element
                 | InfoElement =>
                   <>
-                    <Surcharge list paymentMethod paymentMethodType />
+                    <Surcharge paymentMethod paymentMethodType />
                     {if fieldsArr->Array.length > 1 {
                       bottomElement
                     } else {
@@ -718,7 +719,7 @@ let make = (
       </RenderIf>
       <RenderIf condition={isOnlyInfoElementPresent}>
         {<>
-          <Surcharge list paymentMethod paymentMethodType />
+          <Surcharge paymentMethod paymentMethodType />
           {if fieldsArr->Array.length > 1 {
             bottomElement
           } else {
@@ -727,7 +728,7 @@ let make = (
         </>}
       </RenderIf>
       <RenderIf condition={!isInfoElementPresent}>
-        <Surcharge list paymentMethod paymentMethodType />
+        <Surcharge paymentMethod paymentMethodType />
       </RenderIf>
     </>}
   </RenderIf>
diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res
index c4f9efa17..863080f1b 100644
--- a/src/Components/SavedCardItem.res
+++ b/src/Components/SavedCardItem.res
@@ -8,7 +8,6 @@ let make = (
   ~savedCardlength,
   ~cvcProps,
   ~paymentType,
-  ~list,
   ~setRequiredFieldsBody,
 ) => {
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
@@ -156,7 +155,6 @@ let make = (
               </RenderIf>
               <DynamicFields
                 paymentType
-                list
                 paymentMethod=paymentItem.paymentMethod
                 paymentMethodType
                 setRequiredFieldsBody
@@ -164,7 +162,6 @@ let make = (
                 savedMethod=paymentItem
               />
               <Surcharge
-                list
                 paymentMethod=paymentItem.paymentMethod
                 paymentMethodType
                 cardBrand={cardBrand->CardUtils.getCardType}
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 6ac0ccaef..743cc4ce3 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -6,7 +6,6 @@ let make = (
   ~loadSavedCards: PaymentType.savedCardsLoadState,
   ~cvcProps,
   ~paymentType,
-  ~list,
 ) => {
   open CardUtils
   open Utils
@@ -27,6 +26,7 @@ let make = (
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
   let savedCardlength = savedMethods->Array.length
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
     switch obj.paymentMethodType {
@@ -40,7 +40,6 @@ let make = (
   let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
     ~displaySavedPaymentMethodsCheckbox,
     ~isSaveCardsChecked,
-    ~list,
     ~isGuestCustomer,
   )
 
@@ -69,7 +68,6 @@ let make = (
         savedCardlength
         cvcProps
         paymentType
-        list
         setRequiredFieldsBody
       />
     })
@@ -177,8 +175,10 @@ let make = (
   useSubmitPaymentData(submitCallback)
 
   let conditionsForShowingSaveCardCheckbox = React.useMemo(() => {
-    !isGuestCustomer && list.payment_type === NEW_MANDATE && displaySavedPaymentMethodsCheckbox
-  }, (isGuestCustomer, list.payment_type, displaySavedPaymentMethodsCheckbox))
+    !isGuestCustomer &&
+    paymentMethodListValue.payment_type === NEW_MANDATE &&
+    displaySavedPaymentMethodsCheckbox
+  }, (isGuestCustomer, paymentMethodListValue.payment_type, displaySavedPaymentMethodsCheckbox))
 
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
@@ -208,7 +208,7 @@ let make = (
         <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
       </div>
     </RenderIf>
-    <RenderIf condition={list.payment_type === SETUP_MANDATE}>
+    <RenderIf condition={paymentMethodListValue.payment_type === SETUP_MANDATE}>
       <div
         className="opacity-50 text-xs mb-2 text-left"
         style={ReactDOMStyle.make(
diff --git a/src/Components/Surcharge.res b/src/Components/Surcharge.res
index 9e5e5789a..bd2ff8430 100644
--- a/src/Components/Surcharge.res
+++ b/src/Components/Surcharge.res
@@ -1,14 +1,14 @@
 @react.component
 let make = (
-  ~list,
   ~paymentMethod,
   ~paymentMethodType,
   ~cardBrand=CardUtils.NOTFOUND,
   ~isForWallets=false,
 ) => {
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
   let getPaymentMethodTypes = paymentMethodType => {
     PaymentMethodsRecord.getPaymentMethodTypeFromList(
-      ~list,
+      ~paymentMethodListValue,
       ~paymentMethod,
       ~paymentMethodType=PaymentUtils.getPaymentMethodName(
         ~paymentMethodType=paymentMethod,
@@ -19,7 +19,9 @@ let make = (
 
   let paymentMethodTypes = paymentMethodType->getPaymentMethodTypes
 
-  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(~list)
+  let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(
+    ~paymentMethodListValue,
+  )
   let getSurchargeUtilsMessage = SurchargeUtils.useMessageGetter()
 
   let getSurchargeMessage = () => {
@@ -27,7 +29,8 @@ let make = (
       getOneClickWalletsMessage()
     } else {
       switch paymentMethodTypes.surcharge_details {
-      | Some(surchargeDetails) => getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
+      | Some(surchargeDetails) =>
+        getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~paymentMethodListValue)
       | None =>
         if paymentMethod === "card" {
           let creditPaymentMethodTypes = getPaymentMethodTypes("credit")
@@ -50,18 +53,18 @@ let make = (
               getSurchargeUtilsMessage(
                 ~paymentMethod,
                 ~surchargeDetails={creditSurchargeDetails},
-                ~list,
+                ~paymentMethodListValue,
               )
             } else {
               getSurchargeUtilsMessage(
                 ~paymentMethod,
                 ~surchargeDetails={debitSurchargeDetails},
-                ~list,
+                ~paymentMethodListValue,
               )
             }
           | (None, Some(surchargeDetails))
           | (Some(surchargeDetails), None) =>
-            getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list)
+            getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~paymentMethodListValue)
           | (None, None) => None
           }
         } else {
diff --git a/src/Components/SurchargeUtils.res b/src/Components/SurchargeUtils.res
index 355f63d99..e6f2ebd71 100644
--- a/src/Components/SurchargeUtils.res
+++ b/src/Components/SurchargeUtils.res
@@ -13,7 +13,7 @@ type walletSurchargeDetails = {
   surchargeDetails: PaymentMethodsRecord.surchargeDetails,
 }
 
-let useSurchargeDetailsForOneClickWallets = (~list) => {
+let useSurchargeDetailsForOneClickWallets = (~paymentMethodListValue) => {
   let areOneClickWalletsRendered = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.areOneClickWalletsRendered,
   )
@@ -29,7 +29,7 @@ let useSurchargeDetailsForOneClickWallets = (~list) => {
       if isWalletBtnRendered {
         let paymentMethodType =
           PaymentMethodsRecord.getPaymentMethodTypeFromList(
-            ~list,
+            ~paymentMethodListValue,
             ~paymentMethod="wallet",
             ~paymentMethodType=wallet.paymentMethodType,
           )->Option.getOr(PaymentMethodsRecord.defaultPaymentMethodType)
@@ -47,7 +47,7 @@ let useSurchargeDetailsForOneClickWallets = (~list) => {
         acc
       }
     })
-  }, (areOneClickWalletsRendered, list))
+  }, (areOneClickWalletsRendered, paymentMethodListValue))
 }
 
 let useMessageGetter = () => {
@@ -56,14 +56,14 @@ let useMessageGetter = () => {
   let getMessage = (
     ~surchargeDetails: PaymentMethodsRecord.surchargeDetails,
     ~paymentMethod,
-    ~list: PaymentMethodsRecord.list,
+    ~paymentMethodListValue: PaymentMethodsRecord.paymentMethodList,
   ) => {
     let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Float.toString
 
     let localeStrForSurcharge = if paymentMethod === "card" {
-      localeString.surchargeMsgAmountForCard(list.currency, surchargeValue)
+      localeString.surchargeMsgAmountForCard(paymentMethodListValue.currency, surchargeValue)
     } else {
-      localeString.surchargeMsgAmount(list.currency, surchargeValue)
+      localeString.surchargeMsgAmount(paymentMethodListValue.currency, surchargeValue)
     }
 
     Some(localeStrForSurcharge)
@@ -72,10 +72,10 @@ let useMessageGetter = () => {
   getMessage
 }
 
-let useOneClickWalletsMessageGetter = (~list) => {
+let useOneClickWalletsMessageGetter = (~paymentMethodListValue) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
 
-  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~list)
+  let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~paymentMethodListValue)
 
   let getOneClickWalletsMessage = () => {
     if oneClickWalletsArr->Array.length !== 0 {
@@ -83,7 +83,7 @@ let useOneClickWalletsMessageGetter = (~list) => {
         let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Float.toString
         let myMsg =
           <>
-            <strong> {React.string(`${list.currency} ${amount}`)} </strong>
+            <strong> {React.string(`${paymentMethodListValue.currency} ${amount}`)} </strong>
             {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)}
           </>
         let msgToConcat = if index === 0 {
diff --git a/src/Hooks/UtilityHooks.res b/src/Hooks/UtilityHooks.res
index feb416e0b..b75bc6dc6 100644
--- a/src/Hooks/UtilityHooks.res
+++ b/src/Hooks/UtilityHooks.res
@@ -25,12 +25,20 @@ let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false
 let useIsCustomerAcceptanceRequired = (
   ~displaySavedPaymentMethodsCheckbox,
   ~isSaveCardsChecked,
-  ~list: PaymentMethodsRecord.list,
   ~isGuestCustomer,
-) => React.useMemo(() => {
+) => {
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
+  React.useMemo(() => {
     if displaySavedPaymentMethodsCheckbox {
-      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+      isSaveCardsChecked || paymentMethodListValue.payment_type === SETUP_MANDATE
     } else {
-      !(isGuestCustomer || list.payment_type === NORMAL)
+      !(isGuestCustomer || paymentMethodListValue.payment_type === NORMAL)
     }
-  }, (isSaveCardsChecked, list.payment_type, isGuestCustomer, displaySavedPaymentMethodsCheckbox))
+  }, (
+    isSaveCardsChecked,
+    paymentMethodListValue.payment_type,
+    isGuestCustomer,
+    displaySavedPaymentMethodsCheckbox,
+  ))
+}
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index 2f977ef85..debaee20c 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -28,7 +28,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
-  let (list, setList) = React.useState(_ => PaymentMethodsRecord.defaultList)
+  let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
+    PaymentUtils.paymentMethodListValue,
+  )
   let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
@@ -41,9 +43,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (paymentToken, setPaymentToken) = Recoil.useRecoilState(paymentTokenAtom)
   let (savedMethods, setSavedMethods) = React.useState(_ => [])
   let (
-    loadSavedCards: PaymentType.savedCardsLoadState,
-    setLoadSavedCards: (PaymentType.savedCardsLoadState => PaymentType.savedCardsLoadState) => unit,
-  ) = React.useState(_ => PaymentType.LoadingSavedCards)
+    loadSavedCards: savedCardsLoadState,
+    setLoadSavedCards: (savedCardsLoadState => savedCardsLoadState) => unit,
+  ) = React.useState(_ => LoadingSavedCards)
 
   React.useEffect(() => {
     switch (displaySavedPaymentMethods, customerPaymentMethods) {
@@ -103,13 +105,13 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   }, [savedMethods])
 
   let areAllGooglePayRequiredFieldsPrefilled = DynamicFieldsUtils.useAreAllRequiredFieldsPrefilled(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod="wallet",
     ~paymentMethodType="google_pay",
   )
 
   let areAllApplePayRequiredFieldsPrefilled = DynamicFieldsUtils.useAreAllRequiredFieldsPrefilled(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod="wallet",
     ~paymentMethodType="apple_pay",
   )
@@ -157,7 +159,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
         paymentOptionsList
       })
       setWalletOptions(_ => walletList)
-      setList(_ => plist)
+      setPaymentMethodListValue(_ => plist)
       showCardFormByDefault
         ? if !(actualList->Array.includes(selectedOption)) && selectedOption !== "" {
             ErrorUtils.manageErrorWarning(
@@ -289,7 +291,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let checkoutEle = {
     <ErrorBoundary key={selectedOption}>
       {switch selectedOption->PaymentModeType.paymentMode {
-      | Card => <CardPayment cardProps expiryProps cvcProps paymentType list />
+      | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
         <SessionPaymentWrapper type_=Others>
           {switch klarnaTokenObj {
@@ -297,48 +299,48 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
             switch optToken {
             | Some(token) =>
               <React.Suspense fallback={loader()}>
-                <KlarnaSDKLazy sessionObj=token list />
+                <KlarnaSDKLazy sessionObj=token />
               </React.Suspense>
             | None =>
               <React.Suspense fallback={loader()}>
-                <KlarnaPaymentLazy paymentType list />
+                <KlarnaPaymentLazy paymentType />
               </React.Suspense>
             }
           | _ =>
             <React.Suspense fallback={loader()}>
-              <KlarnaPaymentLazy paymentType list />
+              <KlarnaPaymentLazy paymentType />
             </React.Suspense>
           }}
         </SessionPaymentWrapper>
       | ACHTransfer =>
         <React.Suspense fallback={loader()}>
-          <ACHBankTransferLazy paymentType list />
+          <ACHBankTransferLazy paymentType />
         </React.Suspense>
       | SepaTransfer =>
         <React.Suspense fallback={loader()}>
-          <SepaBankTransferLazy paymentType list />
+          <SepaBankTransferLazy paymentType />
         </React.Suspense>
       | BacsTransfer =>
         <React.Suspense fallback={loader()}>
-          <BacsBankTransferLazy paymentType list />
+          <BacsBankTransferLazy paymentType />
         </React.Suspense>
       | ACHBankDebit =>
         <React.Suspense fallback={loader()}>
-          <ACHBankDebitLazy paymentType list />
+          <ACHBankDebitLazy paymentType />
         </React.Suspense>
       | SepaBankDebit =>
         <React.Suspense fallback={loader()}>
-          <SepaBankDebitLazy paymentType list />
+          <SepaBankDebitLazy paymentType />
         </React.Suspense>
       | BacsBankDebit =>
         <React.Suspense fallback={loader()}>
-          <BacsBankDebitLazy paymentType list />
+          <BacsBankDebitLazy paymentType />
         </React.Suspense>
       | BanContactCard =>
-        <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true list />
+        <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true />
       | BecsBankDebit =>
         <React.Suspense fallback={loader()}>
-          <BecsBankDebitLazy paymentType list />
+          <BecsBankDebitLazy paymentType />
         </React.Suspense>
       | GooglePay =>
         switch gPayToken {
@@ -349,16 +351,13 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
               <GPayLazy
                 paymentType
                 sessionObj=optToken
-                list
                 thirdPartySessionObj=googlePayThirdPartyOptToken
                 walletOptions
               />
             </React.Suspense>
           | _ =>
             <React.Suspense fallback={loader()}>
-              <GPayLazy
-                paymentType sessionObj=optToken list thirdPartySessionObj=None walletOptions
-              />
+              <GPayLazy paymentType sessionObj=optToken thirdPartySessionObj=None walletOptions />
             </React.Suspense>
           }
         | _ => React.null
@@ -366,16 +365,16 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       | ApplePay =>
         switch applePayToken {
         | ApplePayTokenOptional(optToken) =>
-          <ApplePayLazy sessionObj=optToken list walletOptions paymentType />
+          <ApplePayLazy sessionObj=optToken walletOptions paymentType />
         | _ => React.null
         }
       | Boleto =>
         <React.Suspense fallback={loader()}>
-          <BoletoLazy paymentType list />
+          <BoletoLazy paymentType />
         </React.Suspense>
       | _ =>
         <React.Suspense fallback={loader()}>
-          <PaymentMethodsWrapperLazy paymentType list paymentMethodName=selectedOption />
+          <PaymentMethodsWrapperLazy paymentType paymentMethodName=selectedOption />
         </React.Suspense>
       }}
     </ErrorBoundary>
@@ -418,16 +417,14 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     <RenderIf condition={!showFields && displaySavedPaymentMethods}>
-      <SavedMethods
-        paymentToken setPaymentToken savedMethods loadSavedCards cvcProps paymentType list
-      />
+      <SavedMethods paymentToken setPaymentToken savedMethods loadSavedCards cvcProps paymentType />
     </RenderIf>
     <RenderIf
       condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
         showFields}>
       <div className="flex flex-col place-items-center">
         <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
-          <PaymentRequestButtonElement sessions walletOptions list />
+          <PaymentRequestButtonElement sessions walletOptions />
         </ErrorBoundary>
         <RenderIf
           condition={paymentOptions->Array.length > 0 &&
diff --git a/src/Payments/ACHBankDebit.res b/src/Payments/ACHBankDebit.res
index 9b47ae98b..c2f4a4165 100644
--- a/src/Payments/ACHBankDebit.res
+++ b/src/Payments/ACHBankDebit.res
@@ -3,7 +3,7 @@ open Utils
 open PaymentModeType
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
 
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -26,6 +26,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
   let (city, _) = Recoil.useLoggedRecoilState(userAddressCity, "city", loggerState)
   let (postalCode, _) = Recoil.useLoggedRecoilState(userAddressPincode, "postal_code", loggerState)
   let (state, _) = Recoil.useLoggedRecoilState(userAddressState, "state", loggerState)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   OutsideClick.useOutsideClick(
     ~refs=ArrayOfRef([toolTipRef]),
@@ -73,7 +74,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
             ~city=city.value,
             ~postalCode=postalCode.value,
             ~state=state.value,
-            ~paymentType=list.payment_type,
+            ~paymentType=paymentMethodListValue.payment_type,
           )
           intent(~bodyArr=body, ~confirmParam=confirm.confirmParams, ~handleUserError=false, ())
         | None => ()
@@ -107,7 +108,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
         </div>
       </RenderIf>
     </div>
-    <Surcharge list paymentMethod="bank_debit" paymentMethodType="ach" />
+    <Surcharge paymentMethod="bank_debit" paymentMethodType="ach" />
     <Terms mode=ACHBankDebit />
     <FullScreenPortal>
       <BankDebitModal setModalData />
diff --git a/src/Payments/ACHBankDebit.resi b/src/Payments/ACHBankDebit.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/ACHBankDebit.resi
+++ b/src/Payments/ACHBankDebit.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/ACHBankDebitLazy.res b/src/Payments/ACHBankDebitLazy.res
index 91cfcd9c6..46ed49ac6 100644
--- a/src/Payments/ACHBankDebitLazy.res
+++ b/src/Payments/ACHBankDebitLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./ACHBankDebit.bs.js"))
diff --git a/src/Payments/ACHBankTransfer.res b/src/Payments/ACHBankTransfer.res
index 9d83c3257..f49fda76d 100644
--- a/src/Payments/ACHBankTransfer.res
+++ b/src/Payments/ACHBankTransfer.res
@@ -2,13 +2,14 @@ open RecoilAtoms
 open Utils
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankTransfer)
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let complete = email.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == ""
@@ -25,7 +26,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     if confirm.doSubmit {
       if complete {
-        let (connectors, _) = list->PaymentUtils.getConnectors(BankTransfer(ACH))
+        let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(BankTransfer(ACH))
         intent(
           ~bodyArr=PaymentBody.achBankTransferBody(~email=email.value, ~connectors),
           ~confirmParam=confirm.confirmParams,
@@ -44,7 +45,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     className="flex flex-col animate-slowShow"
     style={ReactDOMStyle.make(~gridGap=themeObj.spacingTab, ())}>
     <EmailPaymentInput paymentType />
-    <Surcharge list paymentMethod="bank_transfer" paymentMethodType="ach" />
+    <Surcharge paymentMethod="bank_transfer" paymentMethodType="ach" />
     <InfoElement />
   </div>
 }
diff --git a/src/Payments/ACHBankTransfer.resi b/src/Payments/ACHBankTransfer.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/ACHBankTransfer.resi
+++ b/src/Payments/ACHBankTransfer.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/ACHBankTransferLazy.res b/src/Payments/ACHBankTransferLazy.res
index 709da254c..bc1f80d04 100644
--- a/src/Payments/ACHBankTransferLazy.res
+++ b/src/Payments/ACHBankTransferLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./ACHBankTransfer.bs.js"))
diff --git a/src/Payments/ApplePay.res b/src/Payments/ApplePay.res
index a3a985a23..7b98a18b4 100644
--- a/src/Payments/ApplePay.res
+++ b/src/Payments/ApplePay.res
@@ -2,7 +2,6 @@ open Utils
 @react.component
 let make = (
   ~sessionObj: option<JSON.t>,
-  ~list: PaymentMethodsRecord.list,
   ~paymentType: option<CardThemeType.mode>,
   ~walletOptions: array<string>,
 ) => {
@@ -25,17 +24,18 @@ let make = (
   let areRequiredFieldsEmpty = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsEmpty)
   let isWallet = walletOptions->Array.includes("apple_pay")
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let applePayPaymentMethodType = React.useMemo(() => {
     switch PaymentMethodsRecord.getPaymentMethodTypeFromList(
-      ~list,
+      ~paymentMethodListValue,
       ~paymentMethod="wallet",
       ~paymentMethodType="apple_pay",
     ) {
     | Some(paymentMethodType) => paymentMethodType
     | None => PaymentMethodsRecord.defaultPaymentMethodType
     }
-  }, [list])
+  }, [paymentMethodListValue])
 
   let paymentExperience = React.useMemo(() => {
     switch applePayPaymentMethodType.payment_experience[0] {
@@ -49,15 +49,15 @@ let make = (
   }, [sessionObj])
 
   let (connectors, _) = isInvokeSDKFlow
-    ? list->PaymentUtils.getConnectors(Wallets(ApplePay(SDK)))
-    : list->PaymentUtils.getConnectors(Wallets(ApplePay(Redirect)))
+    ? paymentMethodListValue->PaymentUtils.getConnectors(Wallets(ApplePay(SDK)))
+    : paymentMethodListValue->PaymentUtils.getConnectors(Wallets(ApplePay(Redirect)))
 
   let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
 
   let processPayment = bodyArr => {
     let requestBody = PaymentUtils.appendedCustomerAcceptance(
       ~isGuestCustomer,
-      ~paymentType=list.payment_type,
+      ~paymentType=paymentMethodListValue.payment_type,
       ~body=bodyArr,
     )
 
@@ -388,7 +388,6 @@ let make = (
       | Some(val) => val
       | _ => NONE
       }}
-      list
       paymentMethod="wallet"
       paymentMethodType="apple_pay"
       setRequiredFieldsBody
diff --git a/src/Payments/ApplePay.resi b/src/Payments/ApplePay.resi
index 4bfdd53ce..45efe9c77 100644
--- a/src/Payments/ApplePay.resi
+++ b/src/Payments/ApplePay.resi
@@ -1,7 +1,6 @@
 @react.component
 let default: (
   ~sessionObj: option<JSON.t>,
-  ~list: PaymentMethodsRecord.list,
   ~paymentType: option<CardThemeType.mode>,
   ~walletOptions: array<string>,
 ) => React.element
diff --git a/src/Payments/ApplePayLazy.res b/src/Payments/ApplePayLazy.res
index 2f625849d..0198ffa87 100644
--- a/src/Payments/ApplePayLazy.res
+++ b/src/Payments/ApplePayLazy.res
@@ -2,7 +2,6 @@ open LazyUtils
 
 type props = {
   sessionObj: option<JSON.t>,
-  list: PaymentMethodsRecord.list,
   paymentType: CardThemeType.mode,
   walletOptions: array<string>,
 }
diff --git a/src/Payments/BacsBankDebit.res b/src/Payments/BacsBankDebit.res
index e8378463d..8538f5615 100644
--- a/src/Payments/BacsBankDebit.res
+++ b/src/Payments/BacsBankDebit.res
@@ -21,7 +21,7 @@ let formatSortCode = sortcode => {
 let cleanSortCode = str => str->String.replaceRegExp(%re("/-/g"), "")
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
 
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -146,7 +146,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     <EmailPaymentInput paymentType />
     <FullNamePaymentInput paymentType={paymentType} customFieldName=Some("Bank Holder Name") />
     <AddressPaymentInput paymentType />
-    <Surcharge list paymentMethod="bank_debit" paymentMethodType="bacs" />
+    <Surcharge paymentMethod="bank_debit" paymentMethodType="bacs" />
   </div>
 }
 
diff --git a/src/Payments/BacsBankDebit.resi b/src/Payments/BacsBankDebit.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/BacsBankDebit.resi
+++ b/src/Payments/BacsBankDebit.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/BacsBankDebitLazy.res b/src/Payments/BacsBankDebitLazy.res
index 0e217ffa2..a66897bfe 100644
--- a/src/Payments/BacsBankDebitLazy.res
+++ b/src/Payments/BacsBankDebitLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./BacsBankDebit.bs.js"))
diff --git a/src/Payments/BacsBankTransfer.res b/src/Payments/BacsBankTransfer.res
index da18c9815..d6a06358b 100644
--- a/src/Payments/BacsBankTransfer.res
+++ b/src/Payments/BacsBankTransfer.res
@@ -1,12 +1,7 @@
 open RecoilAtoms
 open Utils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
-
-let default = (props: props) => {
+let default = (paymentType: CardThemeType.mode) => {
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -14,6 +9,7 @@ let default = (props: props) => {
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
   let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState)
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == "" || fullName.value == ""
@@ -30,7 +26,7 @@ let default = (props: props) => {
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     if confirm.doSubmit {
       if complete {
-        let (connectors, _) = props.list->PaymentUtils.getConnectors(BankTransfer(Bacs))
+        let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(BankTransfer(Bacs))
         intent(
           ~bodyArr=PaymentBody.bacsBankTransferBody(
             ~email=email.value,
@@ -52,9 +48,9 @@ let default = (props: props) => {
   <div
     className="flex flex-col animate-slowShow"
     style={ReactDOMStyle.make(~gridGap=themeObj.spacingTab, ())}>
-    <EmailPaymentInput paymentType=props.paymentType />
-    <FullNamePaymentInput paymentType={props.paymentType} />
-    <Surcharge list=props.list paymentMethod="bank_transfer" paymentMethodType="bacs" />
+    <EmailPaymentInput paymentType />
+    <FullNamePaymentInput paymentType />
+    <Surcharge paymentMethod="bank_transfer" paymentMethodType="bacs" />
     <InfoElement />
   </div>
 }
diff --git a/src/Payments/BacsBankTransfer.resi b/src/Payments/BacsBankTransfer.resi
index 6a906b902..99fa10d96 100644
--- a/src/Payments/BacsBankTransfer.resi
+++ b/src/Payments/BacsBankTransfer.resi
@@ -1,6 +1 @@
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
-
-let default: props => React.element
+let default: CardThemeType.mode => React.element
diff --git a/src/Payments/BacsBankTransferLazy.res b/src/Payments/BacsBankTransferLazy.res
index 143a2ade9..54454654d 100644
--- a/src/Payments/BacsBankTransferLazy.res
+++ b/src/Payments/BacsBankTransferLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./BacsBankTransfer.bs.js"))
diff --git a/src/Payments/BecsBankDebit.res b/src/Payments/BecsBankDebit.res
index 5c8d31963..8293a744c 100644
--- a/src/Payments/BecsBankDebit.res
+++ b/src/Payments/BecsBankDebit.res
@@ -3,7 +3,7 @@ open RecoilAtomTypes
 open Utils
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let cleanBSB = str => str->String.replaceRegExp(%re("/-/g"), "")
 
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -88,7 +88,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     <FullScreenPortal>
       <BankDebitModal setModalData />
     </FullScreenPortal>
-    <Surcharge list paymentMethod="bank_debit" paymentMethodType="becs" />
+    <Surcharge paymentMethod="bank_debit" paymentMethodType="becs" />
     <Terms mode=PaymentModeType.BecsBankDebit />
   </div>
 }
diff --git a/src/Payments/BecsBankDebit.resi b/src/Payments/BecsBankDebit.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/BecsBankDebit.resi
+++ b/src/Payments/BecsBankDebit.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/BecsBankDebitLazy.res b/src/Payments/BecsBankDebitLazy.res
index d7877b6d0..329665952 100644
--- a/src/Payments/BecsBankDebitLazy.res
+++ b/src/Payments/BecsBankDebitLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./BecsBankDebit.bs.js"))
diff --git a/src/Payments/Boleto.res b/src/Payments/Boleto.res
index 1f40666bd..6d4227177 100644
--- a/src/Payments/Boleto.res
+++ b/src/Payments/Boleto.res
@@ -23,9 +23,8 @@ let formatSocialSecurityNumber = socialSecurityNumber => {
 }
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
-
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
 
@@ -104,7 +103,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
       inputRef=socialSecurityNumberRef
       placeholder="000.000.000-00"
     />
-    <Surcharge list paymentMethod="voucher" paymentMethodType="boleto" />
+    <Surcharge paymentMethod="voucher" paymentMethodType="boleto" />
     <InfoElement />
   </div>
 }
diff --git a/src/Payments/Boleto.resi b/src/Payments/Boleto.resi
index 4c48424cc..af2a465df 100644
--- a/src/Payments/Boleto.resi
+++ b/src/Payments/Boleto.resi
@@ -1,5 +1,5 @@
 let cleanSocialSecurityNumber: string => string
 let formatSocialSecurityNumber: string => string
 @react.component
-let make: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
-let default: props<CardThemeType.mode, PaymentMethodsRecord.list> => React.element
+let make: (~paymentType: CardThemeType.mode) => React.element
+let default: props<CardThemeType.mode> => React.element
diff --git a/src/Payments/BoletoLazy.res b/src/Payments/BoletoLazy.res
index 454cba077..86f2e2254 100644
--- a/src/Payments/BoletoLazy.res
+++ b/src/Payments/BoletoLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./Boleto.bs.js"))
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index 14aee6d5b..d8083f7f6 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -8,7 +8,6 @@ let make = (
   ~cvcProps,
   ~isBancontact=false,
   ~paymentType: CardThemeType.mode,
-  ~list: PaymentMethodsRecord.list,
 ) => {
   open PaymentType
   open PaymentModeType
@@ -18,6 +17,7 @@ let make = (
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let (nickname, setNickname) = React.useState(_ => "")
 
@@ -96,7 +96,6 @@ let make = (
   let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
     ~displaySavedPaymentMethodsCheckbox,
     ~isSaveCardsChecked,
-    ~list,
     ~isGuestCustomer,
   )
 
@@ -180,9 +179,9 @@ let make = (
   let paymentMethod = isBancontact ? "bank_redirect" : "card"
   let paymentMethodType = isBancontact ? "bancontact_card" : "debit"
   let conditionsForShowingSaveCardCheckbox =
-    list.mandate_payment->Option.isNone &&
+    paymentMethodListValue.mandate_payment->Option.isNone &&
     !isGuestCustomer &&
-    list.payment_type !== SETUP_MANDATE &&
+    paymentMethodListValue.payment_type !== SETUP_MANDATE &&
     options.displaySavedPaymentMethodsCheckbox &&
     !isBancontact
 
@@ -263,7 +262,6 @@ let make = (
           </RenderIf>
           <DynamicFields
             paymentType
-            list
             paymentMethod
             paymentMethodType
             setRequiredFieldsBody
@@ -288,12 +286,14 @@ let make = (
       </div>
     </RenderIf>
     <RenderIf condition={showFields || isBancontact}>
-      <Surcharge
-        list paymentMethod paymentMethodType cardBrand={cardBrand->CardUtils.getCardType}
-      />
+      <Surcharge paymentMethod paymentMethodType cardBrand={cardBrand->CardUtils.getCardType} />
     </RenderIf>
     <RenderIf condition={!isBancontact}>
-      {switch (list.mandate_payment, options.terms.card, list.payment_type) {
+      {switch (
+        paymentMethodListValue.mandate_payment,
+        options.terms.card,
+        paymentMethodListValue.payment_type,
+      ) {
       | (Some(_), Auto, NEW_MANDATE)
       | (Some(_), Auto, SETUP_MANDATE)
       | (_, Always, NEW_MANDATE)
diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res
index 400a078af..0138a25f0 100644
--- a/src/Payments/GPay.res
+++ b/src/Payments/GPay.res
@@ -6,7 +6,6 @@ open GooglePayType
 @react.component
 let make = (
   ~sessionObj: option<SessionsType.token>,
-  ~list: PaymentMethodsRecord.list,
   ~thirdPartySessionObj: option<JSON.t>,
   ~paymentType: option<CardThemeType.mode>,
   ~walletOptions: array<string>,
@@ -30,13 +29,14 @@ let make = (
   let isGooglePayThirdPartyFlow = React.useMemo(() => {
     thirdPartySessionObj->Option.isSome
   }, [sessionObj])
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
 
   let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
 
   let googlePayPaymentMethodType = switch PaymentMethodsRecord.getPaymentMethodTypeFromList(
-    ~list,
+    ~paymentMethodListValue,
     ~paymentMethod="wallet",
     ~paymentMethodType="google_pay",
   ) {
@@ -55,8 +55,8 @@ let make = (
       paymentExperience == PaymentMethodsRecord.InvokeSDK
   }, [sessionObj])
   let (connectors, _) = isInvokeSDKFlow
-    ? list->PaymentUtils.getConnectors(Wallets(Gpay(SDK)))
-    : list->PaymentUtils.getConnectors(Wallets(Gpay(Redirect)))
+    ? paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Gpay(SDK)))
+    : paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Gpay(Redirect)))
 
   let isDelayedSessionToken = React.useMemo(() => {
     thirdPartySessionObj
@@ -91,7 +91,7 @@ let make = (
         let obj = metadata->getDictFromJson->itemToObjMapper
         let gPayBody = PaymentUtils.appendedCustomerAcceptance(
           ~isGuestCustomer,
-          ~paymentType=list.payment_type,
+          ~paymentType=paymentMethodListValue.payment_type,
           ~body=PaymentBody.gpayBody(~payObj=obj, ~connectors),
         )
 
@@ -214,7 +214,7 @@ let make = (
       addGooglePayButton()
     }
     None
-  }, (status, list, sessionObj, thirdPartySessionObj, isGPayReady))
+  }, (status, paymentMethodListValue, sessionObj, thirdPartySessionObj, isGPayReady))
 
   React.useEffect0(() => {
     let handleGooglePayMessages = (ev: Window.event) => {
@@ -293,7 +293,6 @@ let make = (
           | Some(val) => val
           | _ => NONE
           }}
-          list
           paymentMethod="wallet"
           paymentMethodType="google_pay"
           setRequiredFieldsBody
diff --git a/src/Payments/GPay.resi b/src/Payments/GPay.resi
index 304c446b3..3e95448d9 100644
--- a/src/Payments/GPay.resi
+++ b/src/Payments/GPay.resi
@@ -1,7 +1,6 @@
 @react.component
 let default: (
   ~sessionObj: option<SessionsType.token>,
-  ~list: PaymentMethodsRecord.list,
   ~thirdPartySessionObj: option<JSON.t>,
   ~paymentType: option<CardThemeType.mode>,
   ~walletOptions: array<string>,
diff --git a/src/Payments/GPayLazy.res b/src/Payments/GPayLazy.res
index db56d64af..5d4fa241f 100644
--- a/src/Payments/GPayLazy.res
+++ b/src/Payments/GPayLazy.res
@@ -2,7 +2,6 @@ open LazyUtils
 
 type props = {
   sessionObj: option<SessionsType.token>,
-  list: PaymentMethodsRecord.list,
   thirdPartySessionObj: option<JSON.t>,
   paymentType: CardThemeType.mode,
   walletOptions: array<string>,
diff --git a/src/Payments/KlarnaPayment.res b/src/Payments/KlarnaPayment.res
index 7a6c1f802..38649f4ed 100644
--- a/src/Payments/KlarnaPayment.res
+++ b/src/Payments/KlarnaPayment.res
@@ -1,12 +1,13 @@
 open PaymentType
 open RecoilAtoms
 @react.component
-let make = (~paymentType, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType) => {
   let (loggerState, _setLoggerState) = Recoil.useRecoilState(loggerAtom)
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), KlarnaRedirect)
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let showAddressDetails = getShowAddressDetails(
     ~billingDetails=fields.billingDetails,
@@ -41,7 +42,8 @@ let make = (~paymentType, ~list: PaymentMethodsRecord.list) => {
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
     let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper
-    let (connectors, _) = list->PaymentUtils.getConnectors(PayLater(Klarna(Redirect)))
+    let (connectors, _) =
+      paymentMethodListValue->PaymentUtils.getConnectors(PayLater(Klarna(Redirect)))
     let body = PaymentBody.klarnaRedirectionBody(
       ~fullName=fullName.value,
       ~email=email.value,
@@ -73,7 +75,7 @@ let make = (~paymentType, ~list: PaymentMethodsRecord.list) => {
         options=countryNames
       />
     </RenderIf>
-    <Surcharge list paymentMethod="pay_later" paymentMethodType="klarna" />
+    <Surcharge paymentMethod="pay_later" paymentMethodType="klarna" />
     <InfoElement />
   </div>
 }
diff --git a/src/Payments/KlarnaPaymentLazy.res b/src/Payments/KlarnaPaymentLazy.res
index e773d6861..a2a1d95cd 100644
--- a/src/Payments/KlarnaPaymentLazy.res
+++ b/src/Payments/KlarnaPaymentLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./KlarnaPayment.bs.js"))
diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res
index 6541703cf..86c4c0384 100644
--- a/src/Payments/KlarnaSDK.res
+++ b/src/Payments/KlarnaSDK.res
@@ -22,12 +22,13 @@ type some = {
 @val external klarnaInit: some = "Klarna.Payments"
 
 @react.component
-let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) => {
+let make = (~sessionObj: SessionsType.token) => {
   open Utils
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Other)
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let status = CommonHooks.useScript("https://x.klarnacdn.net/kp/lib/v1/api.js") // Klarna SDK script
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let handleCloseLoader = () => {
     Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
@@ -55,7 +56,8 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
         },
         Dict.make()->JSON.Encode.object,
         (res: res) => {
-          let (connectors, _) = list->PaymentUtils.getConnectors(PayLater(Klarna(SDK)))
+          let (connectors, _) =
+            paymentMethodListValue->PaymentUtils.getConnectors(PayLater(Klarna(SDK)))
           let body = PaymentBody.klarnaSDKbody(~token=res.authorization_token, ~connectors)
           res.approved
             ? intent(~bodyArr=body, ~confirmParam=confirm.confirmParams, ~handleUserError=false, ())
@@ -91,7 +93,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
   let bottomElement = <InfoElement />
   <div className="p-1 animate-slowShow">
     <div id="klarna-payments" className="m-3 hidden" />
-    <Surcharge list paymentMethod="pay_later" paymentMethodType="klarna" />
+    <Surcharge paymentMethod="pay_later" paymentMethodType="klarna" />
     <Block bottomElement />
   </div>
 }
diff --git a/src/Payments/KlarnaSDK.resi b/src/Payments/KlarnaSDK.resi
index eb6917d4a..975369c2c 100644
--- a/src/Payments/KlarnaSDK.resi
+++ b/src/Payments/KlarnaSDK.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~sessionObj: SessionsType.token) => React.element
diff --git a/src/Payments/KlarnaSDKLazy.res b/src/Payments/KlarnaSDKLazy.res
index c2820ddc1..3a530eeef 100644
--- a/src/Payments/KlarnaSDKLazy.res
+++ b/src/Payments/KlarnaSDKLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  sessionObj: SessionsType.token,
-  list: PaymentMethodsRecord.list,
-}
+type props = {sessionObj: SessionsType.token}
 
 let make: props => React.element = reactLazy(() => import_("./KlarnaSDK.bs.js"))
diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res
index a8cbee38d..526c7af6f 100644
--- a/src/Payments/PayPal.res
+++ b/src/Payments/PayPal.res
@@ -11,12 +11,14 @@ module Loader = {
 let payPalIcon = <Icon size=35 width=90 name="paypal" />
 
 @react.component
-let make = (~list: PaymentMethodsRecord.list) => {
+let make = () => {
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let (paypalClicked, setPaypalClicked) = React.useState(_ => false)
   let {publishableKey, sdkHandleOneClickConfirmPayment} = Recoil.useRecoilValueFromAtom(keys)
   let options = Recoil.useRecoilValueFromAtom(optionAtom)
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(areOneClickWalletsRendered)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+
   let (_, _, labelType) = options.wallets.style.type_
   let _label = switch labelType {
   | Paypal(val) => val->PaypalSDKTypes.getLabel
@@ -45,12 +47,13 @@ let make = (~list: PaymentMethodsRecord.list) => {
     ->then(result => {
       let result = result->JSON.Decode.bool->Option.getOr(false)
       if result {
-        let (connectors, _) = list->PaymentUtils.getConnectors(Wallets(Paypal(Redirect)))
+        let (connectors, _) =
+          paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Paypal(Redirect)))
         let body = PaymentBody.paypalRedirectionBody(~connectors)
 
         let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
           ~isGuestCustomer,
-          ~paymentType=list.payment_type,
+          ~paymentType=paymentMethodListValue.payment_type,
           ~body,
         )
 
diff --git a/src/Payments/PayPal.resi b/src/Payments/PayPal.resi
index eff7e922c..47fa1ac2e 100644
--- a/src/Payments/PayPal.resi
+++ b/src/Payments/PayPal.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~list: PaymentMethodsRecord.list) => React.element
+let default: unit => React.element
diff --git a/src/Payments/PayPalLazy.res b/src/Payments/PayPalLazy.res
index ab26b325b..ccf657148 100644
--- a/src/Payments/PayPalLazy.res
+++ b/src/Payments/PayPalLazy.res
@@ -1,5 +1,5 @@
 open LazyUtils
 
-type props = {list: PaymentMethodsRecord.list}
+type props = {}
 
 let make: props => React.element = reactLazy(() => import_("./PayPal.bs.js"))
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index 636541c8b..4e0b7815c 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -718,7 +718,7 @@ type mandate = {
 }
 type payment_type = NORMAL | NEW_MANDATE | SETUP_MANDATE | NONE
 
-type list = {
+type paymentMethodList = {
   redirect_url: string,
   currency: string,
   payment_methods: array<methods>,
@@ -969,7 +969,7 @@ let itemToObjMapper = dict => {
   }
 }
 
-let buildFromPaymentList = (plist: list) => {
+let buildFromPaymentList = (plist: paymentMethodList) => {
   let paymentMethodArr = plist.payment_methods
 
   paymentMethodArr
@@ -1004,9 +1004,13 @@ let buildFromPaymentList = (plist: list) => {
   })
 }
 
-let getPaymentMethodTypeFromList = (~list: list, ~paymentMethod, ~paymentMethodType) => {
+let getPaymentMethodTypeFromList = (
+  ~paymentMethodListValue,
+  ~paymentMethod,
+  ~paymentMethodType,
+) => {
   (
-    list.payment_methods
+    paymentMethodListValue.payment_methods
     ->Array.find(item => {
       item.payment_method == paymentMethod
     })
diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
index 5a2ddb197..d0f96629c 100644
--- a/src/Payments/PaymentMethodsWrapper.res
+++ b/src/Payments/PaymentMethodsWrapper.res
@@ -3,19 +3,16 @@ open RecoilAtomTypes
 open Utils
 
 @react.component
-let make = (
-  ~paymentType: CardThemeType.mode,
-  ~list: PaymentMethodsRecord.list,
-  ~paymentMethodName: string,
-) => {
+let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let blikCode = Recoil.useRecoilValueFromAtom(userBlikCode)
   let phoneNumber = Recoil.useRecoilValueFromAtom(userPhoneNumber)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Other)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
   let optionPaymentMethodDetails =
-    list
+    paymentMethodListValue
     ->PaymentMethodsRecord.buildFromPaymentList
     ->Array.find(x =>
       x.paymentMethodName ===
@@ -115,7 +112,6 @@ let make = (
     style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
     <DynamicFields
       paymentType
-      list
       paymentMethod=paymentMethodDetails.methodType
       paymentMethodType=paymentMethodName
       setRequiredFieldsBody
diff --git a/src/Payments/PaymentMethodsWrapperLazy.res b/src/Payments/PaymentMethodsWrapperLazy.res
index ba4c297ed..19cb39d6d 100644
--- a/src/Payments/PaymentMethodsWrapperLazy.res
+++ b/src/Payments/PaymentMethodsWrapperLazy.res
@@ -2,7 +2,6 @@ open LazyUtils
 
 type props = {
   paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
   paymentMethodName: string,
 }
 
diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
index 685deea76..868d141d3 100644
--- a/src/Payments/PaymentRequestButtonElement.res
+++ b/src/Payments/PaymentRequestButtonElement.res
@@ -36,9 +36,10 @@ module WalletsSaveDetailsText = {
 }
 
 @react.component
-let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
+let make = (~sessions, ~walletOptions) => {
   open SessionsType
   let dict = sessions->Utils.getDictFromJson
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let sessionObj = React.useMemo(() => itemToObjMapper(dict, Others), [dict])
   let paypalToken = React.useMemo(
@@ -75,17 +76,12 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
                     <GPayLazy
                       paymentType=NONE
                       sessionObj=optToken
-                      list
                       thirdPartySessionObj=googlePayThirdPartyOptToken
                       walletOptions
                     />
                   | _ =>
                     <GPayLazy
-                      paymentType=NONE
-                      sessionObj=optToken
-                      list
-                      thirdPartySessionObj=None
-                      walletOptions
+                      paymentType=NONE sessionObj=optToken thirdPartySessionObj=None walletOptions
                     />
                   }
                 | _ => React.null
@@ -96,16 +92,16 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
                 {switch paypalToken {
                 | OtherTokenOptional(optToken) =>
                   switch optToken {
-                  | Some(token) => <PaypalSDKLazy sessionObj=token list />
-                  | None => <PayPalLazy list />
+                  | Some(token) => <PaypalSDKLazy sessionObj=token />
+                  | None => <PayPalLazy />
                   }
-                | _ => <PayPalLazy list />
+                | _ => <PayPalLazy />
                 }}
               </SessionPaymentWrapper>
             | ApplePayWallet =>
               switch applePayToken {
               | ApplePayTokenOptional(optToken) =>
-                <ApplePayLazy sessionObj=optToken list paymentType=NONE walletOptions />
+                <ApplePayLazy sessionObj=optToken paymentType=NONE walletOptions />
               | _ => React.null
               }
 
@@ -117,7 +113,7 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
       </ErrorBoundary>
     })
     ->React.array}
-    <Surcharge list paymentMethod="wallet" paymentMethodType="google_pay" isForWallets=true />
-    <WalletsSaveDetailsText paymentType=list.payment_type />
+    <Surcharge paymentMethod="wallet" paymentMethodType="google_pay" isForWallets=true />
+    <WalletsSaveDetailsText paymentType=paymentMethodListValue.payment_type />
   </div>
 }
diff --git a/src/Payments/PaypalSDK.res b/src/Payments/PaypalSDK.res
index 8e3e28dc1..45fc32d5a 100644
--- a/src/Payments/PaypalSDK.res
+++ b/src/Payments/PaypalSDK.res
@@ -1,10 +1,11 @@
 @react.component
-let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) => {
+let make = (~sessionObj: SessionsType.token) => {
   let {iframeId, publishableKey, sdkHandleOneClickConfirmPayment} = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.keys,
   )
   let (loggerState, _setLoggerState) = Recoil.useRecoilState(RecoilAtoms.loggerAtom)
   let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let token = sessionObj.token
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal)
@@ -88,14 +89,16 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
                             data,
                             (_err, payload) => {
                               let (connectors, _) =
-                                list->PaymentUtils.getConnectors(Wallets(Paypal(SDK)))
+                                paymentMethodListValue->PaymentUtils.getConnectors(
+                                  Wallets(Paypal(SDK)),
+                                )
                               let body = PaymentBody.paypalSdkBody(
                                 ~token=payload.nonce,
                                 ~connectors,
                               )
                               let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
                                 ~isGuestCustomer,
-                                ~paymentType=list.payment_type,
+                                ~paymentType=paymentMethodListValue.payment_type,
                                 ~body,
                               )
 
diff --git a/src/Payments/PaypalSDK.resi b/src/Payments/PaypalSDK.resi
index eb6917d4a..975369c2c 100644
--- a/src/Payments/PaypalSDK.resi
+++ b/src/Payments/PaypalSDK.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~sessionObj: SessionsType.token) => React.element
diff --git a/src/Payments/PaypalSDKLazy.res b/src/Payments/PaypalSDKLazy.res
index e4a47a07a..c3be96f97 100644
--- a/src/Payments/PaypalSDKLazy.res
+++ b/src/Payments/PaypalSDKLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  sessionObj: SessionsType.token,
-  list: PaymentMethodsRecord.list,
-}
+type props = {sessionObj: SessionsType.token}
 
 let make: props => React.element = reactLazy(() => import_("./PaypalSDK.bs.js"))
diff --git a/src/Payments/SepaBankDebit.res b/src/Payments/SepaBankDebit.res
index 10e2f9ca3..51a1133e2 100644
--- a/src/Payments/SepaBankDebit.res
+++ b/src/Payments/SepaBankDebit.res
@@ -4,7 +4,7 @@ open Utils
 open PaymentModeType
 
 @react.component
-let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => {
+let make = (~paymentType: CardThemeType.mode) => {
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankDebits)
 
@@ -84,7 +84,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     <FullScreenPortal>
       <BankDebitModal setModalData />
     </FullScreenPortal>
-    <Surcharge list paymentMethod="bank_debit" paymentMethodType="sepa" />
+    <Surcharge paymentMethod="bank_debit" paymentMethodType="sepa" />
     <Terms mode=SepaBankDebit />
   </div>
 }
diff --git a/src/Payments/SepaBankDebit.resi b/src/Payments/SepaBankDebit.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/SepaBankDebit.resi
+++ b/src/Payments/SepaBankDebit.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/SepaBankDebitLazy.res b/src/Payments/SepaBankDebitLazy.res
index b59b25c5c..8c936e9c6 100644
--- a/src/Payments/SepaBankDebitLazy.res
+++ b/src/Payments/SepaBankDebitLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./SepaBankDebit.bs.js"))
diff --git a/src/Payments/SepaBankTransfer.res b/src/Payments/SepaBankTransfer.res
index 3cda203f3..e3ab567b6 100644
--- a/src/Payments/SepaBankTransfer.res
+++ b/src/Payments/SepaBankTransfer.res
@@ -2,7 +2,7 @@ open RecoilAtoms
 open Utils
 
 @react.component
-let make = (~paymentType, ~list) => {
+let make = (~paymentType) => {
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
@@ -23,6 +23,7 @@ let make = (~paymentType, ~list) => {
     ->Option.getOr(Country.defaultTimeZone)
   let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == "" || fullName.value == ""
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bank_transfer")
 
@@ -36,7 +37,7 @@ let make = (~paymentType, ~list) => {
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
     if confirm.doSubmit {
       if complete {
-        let (connectors, _) = list->PaymentUtils.getConnectors(BankTransfer(Sepa))
+        let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(BankTransfer(Sepa))
         intent(
           ~bodyArr=PaymentBody.sepaBankTransferBody(
             ~email=email.value,
@@ -71,7 +72,7 @@ let make = (~paymentType, ~list) => {
         options=countryNames
       />
     </RenderIf>
-    <Surcharge list paymentMethod="bank_transfer" paymentMethodType="sepa" />
+    <Surcharge paymentMethod="bank_transfer" paymentMethodType="sepa" />
     <InfoElement />
   </div>
 }
diff --git a/src/Payments/SepaBankTransfer.resi b/src/Payments/SepaBankTransfer.resi
index 8cebb61b1..f20dac89a 100644
--- a/src/Payments/SepaBankTransfer.resi
+++ b/src/Payments/SepaBankTransfer.resi
@@ -1,2 +1,2 @@
 @react.component
-let default: (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) => React.element
+let default: (~paymentType: CardThemeType.mode) => React.element
diff --git a/src/Payments/SepaBankTransferLazy.res b/src/Payments/SepaBankTransferLazy.res
index ed4a07498..c49f82aa9 100644
--- a/src/Payments/SepaBankTransferLazy.res
+++ b/src/Payments/SepaBankTransferLazy.res
@@ -1,8 +1,5 @@
 open LazyUtils
 
-type props = {
-  paymentType: CardThemeType.mode,
-  list: PaymentMethodsRecord.list,
-}
+type props = {paymentType: CardThemeType.mode}
 
 let make: props => React.element = reactLazy(() => import_("./SepaBankTransfer.bs.js"))
diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
index 34c9b7dff..173df2648 100644
--- a/src/Utilities/DynamicFieldsUtils.res
+++ b/src/Utilities/DynamicFieldsUtils.res
@@ -686,21 +686,33 @@ let useSubmitCallback = () => {
   }, (line1, line2, state, city, postalCode))
 }
 
-let usePaymentMethodTypeFromList = (~list, ~paymentMethod, ~paymentMethodType) => {
+let usePaymentMethodTypeFromList = (
+  ~paymentMethodListValue,
+  ~paymentMethod,
+  ~paymentMethodType,
+) => {
   React.useMemo(() => {
     PaymentMethodsRecord.getPaymentMethodTypeFromList(
-      ~list,
+      ~paymentMethodListValue,
       ~paymentMethod,
       ~paymentMethodType=PaymentUtils.getPaymentMethodName(
         ~paymentMethodType=paymentMethod,
         ~paymentMethodName=paymentMethodType,
       ),
     )->Option.getOr(PaymentMethodsRecord.defaultPaymentMethodType)
-  }, (list, paymentMethod, paymentMethodType))
+  }, (paymentMethodListValue, paymentMethod, paymentMethodType))
 }
 
-let useAreAllRequiredFieldsPrefilled = (~list, ~paymentMethod, ~paymentMethodType) => {
-  let paymentMethodTypes = usePaymentMethodTypeFromList(~list, ~paymentMethod, ~paymentMethodType)
+let useAreAllRequiredFieldsPrefilled = (
+  ~paymentMethodListValue,
+  ~paymentMethod,
+  ~paymentMethodType,
+) => {
+  let paymentMethodTypes = usePaymentMethodTypeFromList(
+    ~paymentMethodListValue,
+    ~paymentMethod,
+    ~paymentMethodType,
+  )
 
   paymentMethodTypes.required_fields->Array.reduce(true, (acc, requiredField) => {
     acc && requiredField.value != ""
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index c99bd8398..9f0c7be20 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -1,5 +1,7 @@
+let paymentMethodListValue = Recoil.atom("paymentMethodListValue", PaymentMethodsRecord.defaultList)
+
 let paymentListLookupNew = (
-  list: PaymentMethodsRecord.list,
+  list: PaymentMethodsRecord.paymentMethodList,
   ~order,
   ~showApplePay,
   ~showGooglePay,
@@ -155,7 +157,7 @@ let getExperienceType = method => {
   }
 }
 
-let getConnectors = (list: PaymentMethodsRecord.list, method: connectorType) => {
+let getConnectors = (list: PaymentMethodsRecord.paymentMethodList, method: connectorType) => {
   let paymentMethod =
     list.payment_methods->Array.find(item => item.payment_method == method->getMethod)
   switch paymentMethod {
diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
index 35d57fe0a..af0a9a8d9 100644
--- a/src/orca-loader/Elements.res
+++ b/src/orca-loader/Elements.res
@@ -120,16 +120,19 @@ let make = (
         let isPaymentMethodsData = dict->Utils.getString("data", "") === "payment_methods"
         if isPaymentMethodsData {
           let json = dict->Utils.getJsonFromDict("response", JSON.Encode.null)
-          let isApplePayPresent =
-            PaymentMethodsRecord.getPaymentMethodTypeFromList(
-              ~list=json->Utils.getDictFromJson->PaymentMethodsRecord.itemToObjMapper,
-              ~paymentMethod="wallet",
-              ~paymentMethodType="apple_pay",
-            )->Belt.Option.isSome
+          let isApplePayPresent = PaymentMethodsRecord.getPaymentMethodTypeFromList(
+            ~paymentMethodListValue=json
+            ->Utils.getDictFromJson
+            ->PaymentMethodsRecord.itemToObjMapper,
+            ~paymentMethod="wallet",
+            ~paymentMethodType="apple_pay",
+          )->Belt.Option.isSome
 
           let isGooglePayPresent =
             PaymentMethodsRecord.getPaymentMethodTypeFromList(
-              ~list=json->Utils.getDictFromJson->PaymentMethodsRecord.itemToObjMapper,
+              ~paymentMethodListValue=json
+              ->Utils.getDictFromJson
+              ->PaymentMethodsRecord.itemToObjMapper,
               ~paymentMethod="wallet",
               ~paymentMethodType="google_pay",
             )->Belt.Option.isSome

From d635f134286b9f0bb43bf5e4d3106e045b3717d0 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Mon, 6 May 2024 17:54:19 +0530
Subject: [PATCH 4/4] fix: wallet issue fix

---
 src/WalletElement.res | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/WalletElement.res b/src/WalletElement.res
index d94f56742..741491e49 100644
--- a/src/WalletElement.res
+++ b/src/WalletElement.res
@@ -5,10 +5,12 @@ let make = (~paymentType) => {
   let (sessions, setSessions) = React.useState(_ => Dict.make()->JSON.Encode.object)
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
 
-  let (list, setList) = React.useState(_ => PaymentMethodsRecord.defaultList)
+  let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
+    PaymentUtils.paymentMethodListValue,
+  )
 
   let (walletList, _, _) = PaymentUtils.useGetPaymentMethodList(
-    ~paymentMethodListValue=list,
+    ~paymentMethodListValue,
     ~paymentOptions=[],
     ~paymentType,
   )
@@ -18,7 +20,7 @@ let make = (~paymentType) => {
     | Loaded(paymentlist) =>
       let plist = paymentlist->Utils.getDictFromJson->PaymentMethodsRecord.itemToObjMapper
       setWalletOptions(_ => walletList)
-      setList(_ => plist)
+      setPaymentMethodListValue(_ => plist)
     | _ => ()
     }
     None