From 63f536ef22dc0304b01d703a232ce99819743608 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Tue, 29 Oct 2024 13:58:14 +0530
Subject: [PATCH 1/2] feat: added dynamic fields for SEPA (#624)

---
 src/App.res                               |  32 ++
 src/CardTheme.res                         |   4 +-
 src/CardUtils.res                         |   2 +-
 src/Components/AddBankAccount.res         |   7 +-
 src/Components/DynamicFields.res          |  37 +++
 src/Components/PayNowButton.res           |  17 +-
 src/LoaderController.res                  |  10 +-
 src/LocaleStrings/ArabicLocale.res        |   1 +
 src/LocaleStrings/CatalanLocale.res       |   1 +
 src/LocaleStrings/ChineseLocale.res       |   1 +
 src/LocaleStrings/DeutschLocale.res       |   1 +
 src/LocaleStrings/DutchLocale.res         |   1 +
 src/LocaleStrings/EnglishGBLocale.res     |   1 +
 src/LocaleStrings/EnglishLocale.res       |   1 +
 src/LocaleStrings/FrenchBelgiumLocale.res |   1 +
 src/LocaleStrings/FrenchLocale.res        |   1 +
 src/LocaleStrings/HebrewLocale.res        |   1 +
 src/LocaleStrings/ItalianLocale.res       |   1 +
 src/LocaleStrings/JapaneseLocale.res      |   1 +
 src/LocaleStrings/LocaleStringTypes.res   |   1 +
 src/LocaleStrings/PolishLocale.res        |   1 +
 src/LocaleStrings/PortugueseLocale.res    |   1 +
 src/LocaleStrings/RussianLocale.res       |   1 +
 src/LocaleStrings/SpanishLocale.res       |   1 +
 src/LocaleStrings/SwedishLocale.res       |   1 +
 src/Payments/ACHBankDebit.res             |   2 +-
 src/Payments/BankDebitModal.res           | 344 ++++++++++++----------
 src/Payments/BecsBankDebit.res            |   2 +-
 src/Payments/PaymentMethodsRecord.res     |   5 +
 src/Payments/PaymentMethodsWrapper.res    |   9 +-
 src/Payments/SepaBankDebit.res            |  93 +++---
 src/Types/ACHTypes.res                    |   1 +
 src/Utilities/DynamicFieldsUtils.res      |  74 +++--
 src/Utilities/PaymentBody.res             |  45 +--
 src/Utilities/RecoilAtoms.res             |   1 +
 src/Utilities/Utils.res                   |   2 +
 src/orca-loader/LoaderPaymentElement.res  |   4 +
 37 files changed, 415 insertions(+), 294 deletions(-)

diff --git a/src/App.res b/src/App.res
index 020d9cd9a..eec095614 100644
--- a/src/App.res
+++ b/src/App.res
@@ -16,6 +16,38 @@ let make = () => {
     None
   }, [logger])
 
+  React.useEffect0(() => {
+    let handleMetaDataPostMessage = (ev: Window.event) => {
+      let json = ev.data->Utils.safeParse
+      let dict = json->Utils.getDictFromJson
+
+      if dict->Dict.get("metadata")->Option.isSome {
+        let metadata = dict->Utils.getJsonObjectFromDict("metadata")
+        let config = metadata->Utils.getDictFromJson->Dict.get("config")
+
+        switch config {
+        | Some(config) => {
+            let config = CardTheme.itemToObjMapper(
+              config->Utils.getDictFromJson,
+              DefaultTheme.default,
+              DefaultTheme.defaultRules,
+              logger,
+            )
+
+            CardUtils.generateFontsLink(config.fonts)
+            let dict = config.appearance.rules->Utils.getDictFromJson
+            if dict->Dict.toArray->Array.length > 0 {
+              Utils.generateStyleSheet("", dict, "mystyle")
+            }
+          }
+        | None => ()
+        }
+      }
+    }
+    Window.addEventListener("message", handleMetaDataPostMessage)
+    Some(() => Window.removeEventListener("message", handleMetaDataPostMessage))
+  })
+
   let renderFullscreen = switch paymentMode {
   | "paymentMethodCollect" =>
     <LoaderController paymentMode setIntegrateErrorError logger initTimestamp>
diff --git a/src/CardTheme.res b/src/CardTheme.res
index 28aa2a226..c5cd8eb1d 100644
--- a/src/CardTheme.res
+++ b/src/CardTheme.res
@@ -3,7 +3,7 @@ open Utils
 open ErrorUtils
 
 let getTheme = (val, logger) => {
-  switch val {
+  switch val->String.toLowerCase {
   | "default" => Default
   | "brutal" => Brutal
   | "midnight" => Midnight
@@ -360,7 +360,7 @@ let getAppearance = (
       variables: getVariables("variables", json, default, logger),
       rules: mergeJsons(rulesJson, getJsonObjectFromDict(json, "rules")),
       innerLayout: getWarningString(json, "innerLayout", "spaced", ~logger)->getInnerLayout,
-      labels: switch getWarningString(json, "labels", "above", ~logger) {
+      labels: switch getWarningString(json, "labels", "above", ~logger)->String.toLowerCase {
       | "above" => Above
       | "floating" => Floating
       | "none" => Never
diff --git a/src/CardUtils.res b/src/CardUtils.res
index 9341d889d..e917851b9 100644
--- a/src/CardUtils.res
+++ b/src/CardUtils.res
@@ -424,7 +424,7 @@ let cvcNumberInRange = (val, cardBrand) => {
   })
   cvcLengthInRange
 }
-let genreateFontsLink = (fonts: array<CardThemeType.fonts>) => {
+let generateFontsLink = (fonts: array<CardThemeType.fonts>) => {
   if fonts->Array.length > 0 {
     fonts
     ->Array.map(item =>
diff --git a/src/Components/AddBankAccount.res b/src/Components/AddBankAccount.res
index b89e379a2..d49f5787e 100644
--- a/src/Components/AddBankAccount.res
+++ b/src/Components/AddBankAccount.res
@@ -6,7 +6,7 @@ module ToolTip = {
     let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
     <RenderIf condition={openTip}>
       <button
-        className="h-auto max-w-20 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
+        className="h-auto max-w-30 w-auto cursor-pointer absolute m-1 px-1 py-2 top-[-3rem] right-[1em]"
         style={
           background: themeObj.colorBackground,
           color: themeObj.colorDanger,
@@ -30,15 +30,18 @@ module ToolTip = {
 @react.component
 let make = (~modalData, ~setModalData) => {
   let isDataAvailable = modalData->Option.isSome
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let (openToolTip, setOpenToolTip) = React.useState(_ => false)
   let toolTipRef = React.useRef(Nullable.null)
 
   let openModal = () => {
+    let metaData = [("config", config->Identity.anyTypeToJson)]->getJsonFromArrayOfJson
+
     messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("iframeId", iframeId->JSON.Encode.string),
+      ("metadata", metaData),
     ])
   }
   <div
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 973f2b3ec..ee1fe6e3d 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -93,10 +93,17 @@ let make = (
   let line1Ref = React.useRef(Nullable.null)
   let line2Ref = React.useRef(Nullable.null)
   let cityRef = React.useRef(Nullable.null)
+  let bankAccountNumberRef = React.useRef(Nullable.null)
   let postalRef = React.useRef(Nullable.null)
   let (selectedBank, setSelectedBank) = Recoil.useRecoilState(userBank)
   let (country, setCountry) = Recoil.useRecoilState(userCountry)
 
+  let (bankAccountNumber, setBankAccountNumber) = Recoil.useLoggedRecoilState(
+    userBankAccountNumber,
+    "bankAccountNumber",
+    logger,
+  )
+
   let defaultCardProps = (
     None,
     _ => (),
@@ -462,6 +469,34 @@ let make = (
           | PixKey => <PixPaymentInput label="pixKey" />
           | PixCPF => <PixPaymentInput label="pixCPF" />
           | PixCNPJ => <PixPaymentInput label="pixCNPJ" />
+          | BankAccountNumber | IBAN =>
+            <PaymentField
+              fieldName="IBAN"
+              setValue={setBankAccountNumber}
+              value=bankAccountNumber
+              onChange={ev => {
+                let value = ReactEvent.Form.target(ev)["value"]
+                setBankAccountNumber(_ => {
+                  isValid: Some(value !== ""),
+                  value,
+                  errorString: value !== "" ? "" : localeString.ibanEmptyText,
+                })
+              }}
+              onBlur={ev => {
+                let value = ReactEvent.Focus.target(ev)["value"]
+                setBankAccountNumber(prev => {
+                  ...prev,
+                  errorString: value !== "" ? "" : localeString.ibanEmptyText,
+                  isValid: Some(value !== ""),
+                })
+              }}
+              paymentType
+              type_="text"
+              name="bankAccountNumber"
+              maxLength=42
+              inputRef=bankAccountNumberRef
+              placeholder="DE00 0000 0000 0000 0000 00"
+            />
           | Email
           | InfoElement
           | Country
@@ -777,6 +812,8 @@ let make = (
                 | PhoneCountryCode
                 | VpaId
                 | LanguagePreference(_)
+                | BankAccountNumber
+                | IBAN
                 | None => React.null
                 }}
               </div>
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
index b2f6edd0b..55c73b11c 100644
--- a/src/Components/PayNowButton.res
+++ b/src/Components/PayNowButton.res
@@ -10,7 +10,7 @@ module Loader = {
   }
 }
 @react.component
-let make = () => {
+let make = (~onClickHandler=?, ~label=?) => {
   open RecoilAtoms
   open Utils
   let (showLoader, setShowLoader) = React.useState(() => false)
@@ -19,8 +19,10 @@ let make = () => {
   let {sdkHandleConfirmPayment} = optionAtom->Recoil.useRecoilValueFromAtom
 
   let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
-  let buttonText = sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
-
+  let buttonText = switch label {
+  | Some(val) => val
+  | None => sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
+  }
 
   let handleMessage = (event: Types.event) => {
     let json = event.data->Identity.anyTypeToJson->getStringFromJson("")->safeParse
@@ -35,6 +37,13 @@ let make = () => {
     }
   }
 
+  let onClickHandlerFunc = _ => {
+    switch onClickHandler {
+    | Some(fn) => fn()
+    | None => ()
+    }
+  }
+
   let handleOnClick = _ => {
     setIsPayNowButtonDisable(_ => true)
     setShowLoader(_ => true)
@@ -45,7 +54,7 @@ let make = () => {
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
       disabled=isPayNowButtonDisable
-      onClick=handleOnClick
+      onClick={onClickHandler->Option.isNone ? handleOnClick : onClickHandlerFunc}
       className={`w-full flex flex-row justify-center items-center`}
       style={
         borderRadius: themeObj.buttonBorderRadius,
diff --git a/src/LoaderController.res b/src/LoaderController.res
index 9343459f3..b46360cbd 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -36,11 +36,9 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   let setUserAddressPincode = Recoil.useLoggedSetRecoilState(userAddressPincode, "pin", logger)
   let setUserAddressState = Recoil.useLoggedSetRecoilState(userAddressState, "state", logger)
   let setUserAddressCountry = Recoil.useLoggedSetRecoilState(userAddressCountry, "country", logger)
-  let (_country, setCountry) = Recoil.useRecoilState(userCountry)
-  let (isCompleteCallbackUsed, setIsCompleteCallbackUsed) = Recoil.useRecoilState(
-    isCompleteCallbackUsed,
-  )
-  let (isPaymentButtonHandlerProvided, setIsPaymentButtonHandlerProvided) = Recoil.useRecoilState(
+  let setCountry = Recoil.useSetRecoilState(userCountry)
+  let setIsCompleteCallbackUsed = Recoil.useSetRecoilState(isCompleteCallbackUsed)
+  let setIsPaymentButtonHandlerProvided = Recoil.useSetRecoilState(
     isPaymentButtonHandlerProvidedAtom,
   )
 
@@ -194,7 +192,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
   })
 
   React.useEffect(() => {
-    CardUtils.genreateFontsLink(config.fonts)
+    CardUtils.generateFontsLink(config.fonts)
     let dict = config.appearance.rules->getDictFromJson
     if dict->Dict.toArray->Array.length > 0 {
       generateStyleSheet("", dict, "themestyle")
diff --git a/src/LocaleStrings/ArabicLocale.res b/src/LocaleStrings/ArabicLocale.res
index 247592b7a..e492009a7 100644
--- a/src/LocaleStrings/ArabicLocale.res
+++ b/src/LocaleStrings/ArabicLocale.res
@@ -12,6 +12,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   accountNumberText: `رقم حساب`,
   cvcTextLabel: `رمز الحماية`,
   emailLabel: `البريد الإلكتروني`,
+  ibanEmptyText: `لا يمكن أن يكون رقم IBAN فارغًا`,
   emailEmptyText: `لا يمكن أن يكون البريد الإلكتروني فارغًا`,
   emailInvalidText: `عنوان البريد الإلكتروني غير صالح`,
   fullNameLabel: `الاسم الكامل`,
diff --git a/src/LocaleStrings/CatalanLocale.res b/src/LocaleStrings/CatalanLocale.res
index 212b572bc..e264a64a3 100644
--- a/src/LocaleStrings/CatalanLocale.res
+++ b/src/LocaleStrings/CatalanLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nom del titular de la targeta`,
   cardNickname: `Sobrenom de la targeta`,
   billingNamePlaceholder: `Nom i cognom`,
+  ibanEmptyText: `L'IBAN no pot estar buit`,
   emailEmptyText: `El correu electrònic no pot estar buit`,
   emailInvalidText: `adressa de correu invàlida`,
   line1EmptyText: `La línia d'adreça 1 no pot estar buida`,
diff --git a/src/LocaleStrings/ChineseLocale.res b/src/LocaleStrings/ChineseLocale.res
index ad0eb7940..5b33bb1f0 100644
--- a/src/LocaleStrings/ChineseLocale.res
+++ b/src/LocaleStrings/ChineseLocale.res
@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `省/州不能为空`,
   accountNumberText: `账户号码`,
   emailLabel: `电子邮箱`,
+  ibanEmptyText: `IBAN 不能为空`,
   emailEmptyText: `电子邮箱不能为空`,
   emailInvalidText: `无效的电子邮箱地址`,
   fullNameLabel: `全名`,
diff --git a/src/LocaleStrings/DeutschLocale.res b/src/LocaleStrings/DeutschLocale.res
index c9423bdee..493d95f92 100644
--- a/src/LocaleStrings/DeutschLocale.res
+++ b/src/LocaleStrings/DeutschLocale.res
@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `Der Status darf nicht leer sein`,
   accountNumberText: `Accountnummer`,
   emailLabel: `Email`,
+  ibanEmptyText: `IBAN darf nicht leer sein`,
   emailEmptyText: `E-Mail darf nicht leer sein`,
   emailInvalidText: `Ungültige E-Mail-Adresse`,
   fullNameLabel: `Vollständiger Name`,
diff --git a/src/LocaleStrings/DutchLocale.res b/src/LocaleStrings/DutchLocale.res
index db6a6986c..9c978c0e5 100644
--- a/src/LocaleStrings/DutchLocale.res
+++ b/src/LocaleStrings/DutchLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Naam van de kaarthouder`,
   cardNickname: `Kaartbijnaam`,
   billingNamePlaceholder: `Voornaam en achternaam`,
+  ibanEmptyText: `IBAN mag niet leeg zijn`,
   emailEmptyText: `E-mail mag niet leeg zijn`,
   emailInvalidText: `Ongeldig e-mailadres`,
   line1EmptyText: `Adresregel 1 mag niet leeg zijn`,
diff --git a/src/LocaleStrings/EnglishGBLocale.res b/src/LocaleStrings/EnglishGBLocale.res
index 604b4c083..295fe8a7a 100644
--- a/src/LocaleStrings/EnglishGBLocale.res
+++ b/src/LocaleStrings/EnglishGBLocale.res
@@ -11,6 +11,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   sortCodeText: "Sort Code",
   cvcTextLabel: "CVC",
   emailLabel: "Email",
+  ibanEmptyText: "IBAN cannot be empty",
   emailEmptyText: "Email cannot be empty",
   emailInvalidText: "Invalid email address",
   line1Label: "Address line 1",
diff --git a/src/LocaleStrings/EnglishLocale.res b/src/LocaleStrings/EnglishLocale.res
index a18c16939..8fd2700fb 100644
--- a/src/LocaleStrings/EnglishLocale.res
+++ b/src/LocaleStrings/EnglishLocale.res
@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: "State cannot be empty",
   accountNumberText: "Account Number",
   emailLabel: "Email",
+  ibanEmptyText: "IBAN cannot be empty",
   emailEmptyText: "Email cannot be empty",
   emailInvalidText: "Invalid email address",
   fullNameLabel: "Full name",
diff --git a/src/LocaleStrings/FrenchBelgiumLocale.res b/src/LocaleStrings/FrenchBelgiumLocale.res
index 1d0b676fe..ca0c80456 100644
--- a/src/LocaleStrings/FrenchBelgiumLocale.res
+++ b/src/LocaleStrings/FrenchBelgiumLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nom du titulaire`,
   cardNickname: `Pseudonyme de la carte`,
   billingNamePlaceholder: `Nom et prénom`,
+  ibanEmptyText: `L'IBAN ne peut pas être vide`,
   emailEmptyText: `L'e-mail ne peut pas être vide`,
   emailInvalidText: `Adresse e-mail invalide`,
   line1EmptyText: `La ligne d'adresse 1 ne peut pas être vide`,
diff --git a/src/LocaleStrings/FrenchLocale.res b/src/LocaleStrings/FrenchLocale.res
index 2ec78fcf5..8b1c35ad5 100644
--- a/src/LocaleStrings/FrenchLocale.res
+++ b/src/LocaleStrings/FrenchLocale.res
@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `L'état ne peut pas être vide`,
   accountNumberText: `Numéro de compte`,
   emailLabel: `E-mail`,
+  ibanEmptyText: `L'IBAN ne peut pas être vide`,
   emailEmptyText: `L'e-mail ne peut pas être vide`,
   emailInvalidText: "Adresse e-mail invalide",
   fullNameLabel: `Nom complet`,
diff --git a/src/LocaleStrings/HebrewLocale.res b/src/LocaleStrings/HebrewLocale.res
index e82b20dca..8d80d05d3 100644
--- a/src/LocaleStrings/HebrewLocale.res
+++ b/src/LocaleStrings/HebrewLocale.res
@@ -25,6 +25,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   stateEmptyText: `המדינה לא יכולה להיות ריקה`,
   accountNumberText: `מספר חשבון`,
   emailLabel: `אימייל`,
+  ibanEmptyText: `ה-IBAN אינו יכול להיות ריק`,
   emailEmptyText: `אימייל לא יכול להיות ריק`,
   emailInvalidText: `כתובת אימייל לא חוקית`,
   fullNameLabel: `שם מלא`,
diff --git a/src/LocaleStrings/ItalianLocale.res b/src/LocaleStrings/ItalianLocale.res
index 76be5854f..8764a6f48 100644
--- a/src/LocaleStrings/ItalianLocale.res
+++ b/src/LocaleStrings/ItalianLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nome del titolare della carta`,
   cardNickname: `Soprannome della carta`,
   billingNamePlaceholder: `Nome e cognome`,
+  ibanEmptyText: `L'IBAN non può essere vuoto`,
   emailEmptyText: `L'e-mail non può essere vuota`,
   emailInvalidText: `indirizzo email non valido`,
   line1EmptyText: `La riga dell'indirizzo 1 non può essere vuota`,
diff --git a/src/LocaleStrings/JapaneseLocale.res b/src/LocaleStrings/JapaneseLocale.res
index 37351cac7..bb0955da9 100644
--- a/src/LocaleStrings/JapaneseLocale.res
+++ b/src/LocaleStrings/JapaneseLocale.res
@@ -12,6 +12,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cvcTextLabel: `セキュリティコード`,
   accountNumberText: `口座番号`,
   emailLabel: `Eメール`,
+  ibanEmptyText: `IBANは空にできません`,
   emailEmptyText: `電子メールを空にすることはできません`,
   emailInvalidText: `無効なメールアドレス`,
   fullNameLabel: `フルネーム`,
diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res
index 96aff377a..4c5bb39b2 100644
--- a/src/LocaleStrings/LocaleStringTypes.res
+++ b/src/LocaleStrings/LocaleStringTypes.res
@@ -14,6 +14,7 @@ type localeStrings = {
   sortCodeText: string,
   cvcTextLabel: string,
   emailLabel: string,
+  ibanEmptyText: string,
   emailEmptyText: string,
   emailInvalidText: string,
   accountNumberText: string,
diff --git a/src/LocaleStrings/PolishLocale.res b/src/LocaleStrings/PolishLocale.res
index 636253a3b..1e7c2b867 100644
--- a/src/LocaleStrings/PolishLocale.res
+++ b/src/LocaleStrings/PolishLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Imię i nazwisko posiadacza karty`,
   cardNickname: `Przezwisko karty`,
   billingNamePlaceholder: `Imię i nazwisko`,
+  ibanEmptyText: `IBAN nie może być pusty`,
   emailEmptyText: `Adres e-mail nie może być pusty`,
   emailInvalidText: `Niepoprawny adres email`,
   line1EmptyText: `Linia adresu 1 nie może być pusta`,
diff --git a/src/LocaleStrings/PortugueseLocale.res b/src/LocaleStrings/PortugueseLocale.res
index 6e9876416..02221b1ac 100644
--- a/src/LocaleStrings/PortugueseLocale.res
+++ b/src/LocaleStrings/PortugueseLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nome do titular do cartão`,
   cardNickname: `Apelido do cartão`,
   billingNamePlaceholder: `Nome e sobrenome`,
+  ibanEmptyText: `O IBAN não pode estar vazio`,
   emailEmptyText: `O e-mail não pode ficar vazio`,
   emailInvalidText: `Endereço de email invalido`,
   line1EmptyText: `A linha de endereço 1 não pode ficar vazia`,
diff --git a/src/LocaleStrings/RussianLocale.res b/src/LocaleStrings/RussianLocale.res
index 28e2b864f..59b2b7af9 100644
--- a/src/LocaleStrings/RussianLocale.res
+++ b/src/LocaleStrings/RussianLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Имя держателя карты`,
   cardNickname: `Прозвище карты`,
   billingNamePlaceholder: `Имя и фамилия`,
+  ibanEmptyText: `IBAN не может быть пустым`,
   emailEmptyText: `Электронная почта не может быть пустой`,
   emailInvalidText: `Неверный адрес электронной почты`,
   line1EmptyText: `Адресная строка 1 не может быть пустой.`,
diff --git a/src/LocaleStrings/SpanishLocale.res b/src/LocaleStrings/SpanishLocale.res
index 9f85433b4..003d003e1 100644
--- a/src/LocaleStrings/SpanishLocale.res
+++ b/src/LocaleStrings/SpanishLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Nombre del titular de la tarjeta`,
   cardNickname: `Apodo de la tarjeta`,
   billingNamePlaceholder: `Nombre y apellido`,
+  ibanEmptyText: `El IBAN no puede estar vacío`,
   emailEmptyText: `El correo electrónico no puede estar vacío.`,
   emailInvalidText: `Dirección de correo electrónico no válida`,
   line1EmptyText: `La línea de dirección 1 no puede estar vacía`,
diff --git a/src/LocaleStrings/SwedishLocale.res b/src/LocaleStrings/SwedishLocale.res
index 3f09d9edb..d3dfd43c5 100644
--- a/src/LocaleStrings/SwedishLocale.res
+++ b/src/LocaleStrings/SwedishLocale.res
@@ -49,6 +49,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHolderName: `Korthållarens namn`,
   cardNickname: `Kortets smeknamn`,
   billingNamePlaceholder: `Förnamn och efternamn`,
+  ibanEmptyText: `IBAN får inte vara tomt`,
   emailEmptyText: `E-post får inte vara tom`,
   emailInvalidText: `Ogiltig e-postadress`,
   line1EmptyText: `Adressrad 1 får inte vara tom`,
diff --git a/src/Payments/ACHBankDebit.res b/src/Payments/ACHBankDebit.res
index 1dfb6e605..55eb6184a 100644
--- a/src/Payments/ACHBankDebit.res
+++ b/src/Payments/ACHBankDebit.res
@@ -127,7 +127,7 @@ let make = (~paymentType: CardThemeType.mode) => {
         <Surcharge paymentMethod="bank_debit" paymentMethodType="ach" />
         <Terms mode=ACHBankDebit />
         <FullScreenPortal>
-          <BankDebitModal setModalData />
+          <BankDebitModal setModalData paymentType />
         </FullScreenPortal>
       </div>
     </RenderIf>
diff --git a/src/Payments/BankDebitModal.res b/src/Payments/BankDebitModal.res
index 2476e3f40..86e9a6d88 100644
--- a/src/Payments/BankDebitModal.res
+++ b/src/Payments/BankDebitModal.res
@@ -106,7 +106,7 @@ module AccountNumberCard = {
 
 let clearSpaces = str => str->String.replaceRegExp(%re("/\D+/g"), "")
 @react.component
-let make = (~setModalData) => {
+let make = (~setModalData, ~paymentType: CardThemeType.mode) => {
   let selectedOption = Recoil.useRecoilValueFromAtom(RecoilAtoms.selectedOptionAtom)
   let (routingNumber, setRoutingNumber) = React.useState(_ => "")
   let (iban, setIban) = React.useState(_ => "")
@@ -116,6 +116,8 @@ let make = (~setModalData) => {
   let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (accountType, setAccountType) = React.useState(() => "Savings")
 
+  let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make())
+
   let (openModal, setOpenModal) = React.useState(_ => false)
 
   let (accountNum, setAccountNum) = React.useState(_ => "")
@@ -183,25 +185,66 @@ let make = (~setModalData) => {
     iban !== "" ||
     (accountNum->String.length > 0 && sortCode->String.length > 0)
 
-  <Modal loader=false testMode=true openModal setOpenModal>
-    <div className="flex flex-col w-full h-auto overflow-scroll">
-      <div className={`flex flex-col`}>
-        <div
-          style={color: themeObj.colorPrimary, marginBottom: "5px"}
-          className="self-start font-semibold text-lg text-[#151A1F]">
-          {React.string(localeString.billingDetailsText)}
-        </div>
-        <div className="my-4">
-          <AddressPaymentInput
-            paymentType=CardThemeType.Payment
-            className=" focus:outline-none border border-gray-300 focus:border-[#006DF9] rounded-md text-sm"
-          />
-        </div>
-        <div
-          style={color: themeObj.colorPrimary, marginBottom: "5px"}
-          className="self-start font-semibold text-lg text-[#151A1F]">
-          {React.string("Bank Details")}
-        </div>
+  let onClickHandler = () => {
+    setModalData(_ => Some({
+      routingNumber,
+      accountNumber: accountNum,
+      accountHolderName,
+      accountType: accountType->String.toLowerCase,
+      iban,
+      sortCode,
+      requiredFieldsBody,
+    }))
+    Modal.close(setOpenModal)
+  }
+
+  let dynamicFieldsModalBody =
+    <>
+      <DynamicFields
+        paymentType paymentMethod="bank_debit" paymentMethodType="sepa" setRequiredFieldsBody
+      />
+      <PayNowButton onClickHandler label="Done" />
+    </>
+
+  let nonDynamicFieldsModalBody =
+    <>
+      <div
+        style={color: themeObj.colorPrimary, marginBottom: "5px"}
+        className="self-start font-semibold text-lg text-[#151A1F]">
+        {React.string(localeString.billingDetailsText)}
+      </div>
+      <div className="my-4">
+        <AddressPaymentInput
+          paymentType=CardThemeType.Payment
+          className="focus:outline-none border border-gray-300 focus:border-[#006DF9] rounded-md text-sm"
+        />
+      </div>
+      <div
+        style={color: themeObj.colorPrimary, marginBottom: "5px"}
+        className="self-start font-semibold text-lg text-[#151A1F]">
+        {React.string("Bank Details")}
+      </div>
+      <div
+        className={`Label mb-1 mt-5`}
+        style={
+          fontWeight: themeObj.fontWeightNormal,
+          fontSize: themeObj.fontSizeLg,
+          color: themeObj.colorText,
+          marginBottom: "5px",
+        }>
+        {React.string("Account Holder Name")}
+      </div>
+      <Input
+        value=accountHolderName
+        inputRef=nameRef
+        onChange=handleAccountHolderNameChange
+        type_="tel"
+        className={`p-2 text-base px-4`}
+        maxLength=17
+        placeholder="eg: John Doe"
+        onBlur={_ => setInputFocus(_ => NONE)}
+      />
+      <RenderIf condition={isSepaDebit}>
         <div
           className={`Label mb-1 mt-5`}
           style={
@@ -210,155 +253,140 @@ let make = (~setModalData) => {
             color: themeObj.colorText,
             marginBottom: "5px",
           }>
-          {React.string("Account Holder Name")}
+          {React.string("IBAN")}
         </div>
         <Input
-          value=accountHolderName
-          inputRef=nameRef
-          onChange=handleAccountHolderNameChange
-          type_="tel"
-          className={`p-2 text-base px-4`}
-          maxLength=17
-          placeholder="eg: John Doe"
-          onBlur={_ => setInputFocus(_ => NONE)}
+          value=iban
+          onChange=changeIBAN
+          type_="text"
+          maxLength=42
+          inputRef=ibanRef
+          placeholder="eg: DE00 0000 0000 0000 0000 00"
         />
-        <RenderIf condition={isSepaDebit}>
-          <div
-            className={`Label mb-1 mt-5`}
-            style={
-              fontWeight: themeObj.fontWeightNormal,
-              fontSize: themeObj.fontSizeLg,
-              color: themeObj.colorText,
-              marginBottom: "5px",
-            }>
-            {React.string("IBAN")}
+      </RenderIf>
+      <div className="flex flex-row items-center w-full justify-between">
+        <RenderIf condition={isAchDebit}>
+          <div className="w-full" style={marginRight: "1rem"}>
+            <div
+              className={`Label mb-1 mt-5`}
+              style={
+                fontWeight: themeObj.fontWeightNormal,
+                fontSize: themeObj.fontSizeLg,
+                color: themeObj.colorText,
+                marginBottom: "5px",
+              }>
+              {React.string("Routing number")}
+            </div>
+            <Input
+              value=routingNumber
+              inputRef=routeref
+              isValid=isRoutingValid
+              setIsValid=setIsRoutingValid
+              onChange=handleRoutingChange
+              type_="tel"
+              className={` p-2 text-base px-4`}
+              maxLength=9
+              placeholder="123456789"
+              errorString=routingError
+              onBlur=routingBlur
+              onFocus={_ => setInputFocus(_ => Routing)}
+            />
           </div>
-          <Input
-            value=iban
-            onChange=changeIBAN
-            type_="text"
-            maxLength=42
-            inputRef=ibanRef
-            placeholder="eg: DE00 0000 0000 0000 0000 00"
-          />
         </RenderIf>
-        <div className="flex flex-row items-center w-full justify-between">
-          <RenderIf condition={isAchDebit}>
-            <div className="w-full" style={marginRight: "1rem"}>
-              <div
-                className={`Label mb-1 mt-5`}
-                style={
-                  fontWeight: themeObj.fontWeightNormal,
-                  fontSize: themeObj.fontSizeLg,
-                  color: themeObj.colorText,
-                  marginBottom: "5px",
-                }>
-                {React.string("Routing number")}
-              </div>
-              <Input
-                value=routingNumber
-                inputRef=routeref
-                isValid=isRoutingValid
-                setIsValid=setIsRoutingValid
-                onChange=handleRoutingChange
-                type_="tel"
-                className={` p-2 text-base px-4`}
-                maxLength=9
-                placeholder="123456789"
-                errorString=routingError
-                onBlur=routingBlur
-                onFocus={_ => setInputFocus(_ => Routing)}
-              />
+        <RenderIf condition={isAchDebit || isBecsDebit}>
+          <div className="w-full ">
+            <div
+              className={`Label mb-1 mt-5`}
+              style={
+                fontWeight: themeObj.fontWeightNormal,
+                fontSize: themeObj.fontSizeLg,
+                color: themeObj.colorText,
+                marginBottom: "5px",
+              }>
+              {React.string("Account number")}
             </div>
-          </RenderIf>
-          <RenderIf condition={isAchDebit || isBecsDebit}>
-            <div className="w-full ">
-              <div
-                className={`Label mb-1 mt-5`}
-                style={
-                  fontWeight: themeObj.fontWeightNormal,
-                  fontSize: themeObj.fontSizeLg,
-                  color: themeObj.colorText,
-                  marginBottom: "5px",
-                }>
-                {React.string("Account number")}
-              </div>
-              <Input
-                value=accountNum
-                inputRef=accountRef
-                onChange=handleAccountNumChange
-                type_="tel"
-                className={`p-2 text-base px-4`}
-                maxLength={isBecsDebit ? 9 : 17}
-                placeholder="000123456789"
-                onFocus={_ => setInputFocus(_ => Account)}
-                onBlur={_ => setInputFocus(_ => NONE)}
-              />
-            </div>
-          </RenderIf>
-        </div>
-        <RenderIf condition={isAchDebit}>
-          <div
-            className="w-full mb-1 mt-5"
-            style={
-              fontWeight: themeObj.fontWeightNormal,
-              fontSize: themeObj.fontSizeLg,
-              color: themeObj.colorText,
-              marginBottom: "5px",
-            }>
-            <DropdownField
-              appearance=config.appearance
-              fieldName="Account type"
-              value=accountType
-              setValue=setAccountType
-              disabled=false
-              options=[
-                {
-                  value: "Savings",
-                },
-                {
-                  value: "Checking",
-                },
-              ]
-              className=" focus:outline-none border border-gray-300 focus:border-[#006DF9] rounded-md text-sm"
+            <Input
+              value=accountNum
+              inputRef=accountRef
+              onChange=handleAccountNumChange
+              type_="tel"
+              className={`p-2 text-base px-4`}
+              maxLength={isBecsDebit ? 9 : 17}
+              placeholder="000123456789"
+              onFocus={_ => setInputFocus(_ => Account)}
+              onBlur={_ => setInputFocus(_ => NONE)}
             />
           </div>
         </RenderIf>
-        <RenderIf condition={isBecsDebit}>
-          <div
-            className={`Label mb-1 mt-5`}
-            style={
-              fontWeight: themeObj.fontWeightNormal,
-              fontSize: themeObj.fontSizeLg,
-              color: themeObj.colorText,
-              marginBottom: "5px",
-            }>
-            {React.string("BSB")}
-          </div>
-          <Input
-            value=sortCode
-            inputRef=sortCodeRef
-            onChange=changeSortCode
-            type_="tel"
-            className={`p-2 text-base px-4`}
-            maxLength=7
-            placeholder="eg: 000-000"
+      </div>
+      <RenderIf condition={isAchDebit}>
+        <div
+          className="w-full mb-1 mt-5"
+          style={
+            fontWeight: themeObj.fontWeightNormal,
+            fontSize: themeObj.fontSizeLg,
+            color: themeObj.colorText,
+            marginBottom: "5px",
+          }>
+          <DropdownField
+            appearance=config.appearance
+            fieldName="Account type"
+            value=accountType
+            setValue=setAccountType
+            disabled=false
+            options=[
+              {
+                value: "Savings",
+              },
+              {
+                value: "Checking",
+              },
+            ]
+            className=" focus:outline-none border border-gray-300 focus:border-[#006DF9] rounded-md text-sm"
           />
-        </RenderIf>
-        <Button
-          active=submitActive
-          onclick={_ => {
-            setModalData(_ => Some({
-              routingNumber,
-              accountNumber: accountNum,
-              accountHolderName,
-              accountType: accountType->String.toLowerCase,
-              iban,
-              sortCode,
-            }))
-            Modal.close(setOpenModal)
-          }}
+        </div>
+      </RenderIf>
+      <RenderIf condition={isBecsDebit}>
+        <div
+          className={`Label mb-1 mt-5`}
+          style={
+            fontWeight: themeObj.fontWeightNormal,
+            fontSize: themeObj.fontSizeLg,
+            color: themeObj.colorText,
+            marginBottom: "5px",
+          }>
+          {React.string("BSB")}
+        </div>
+        <Input
+          value=sortCode
+          inputRef=sortCodeRef
+          onChange=changeSortCode
+          type_="tel"
+          className={`p-2 text-base px-4`}
+          maxLength=7
+          placeholder="eg: 000-000"
         />
+      </RenderIf>
+      <Button
+        active=submitActive
+        onclick={_ => {
+          setModalData(_ => Some({
+            routingNumber,
+            accountNumber: accountNum,
+            accountHolderName,
+            accountType: accountType->String.toLowerCase,
+            iban,
+            sortCode,
+          }))
+          Modal.close(setOpenModal)
+        }}
+      />
+    </>
+
+  <Modal loader=false testMode=true openModal setOpenModal>
+    <div className="flex flex-col w-full h-auto overflow-scroll">
+      <div className={`flex flex-col`}>
+        {isSepaDebit ? dynamicFieldsModalBody : nonDynamicFieldsModalBody}
         <PoweredBy className="mt-5" />
       </div>
     </div>
diff --git a/src/Payments/BecsBankDebit.res b/src/Payments/BecsBankDebit.res
index 5efaab715..fc34d78fd 100644
--- a/src/Payments/BecsBankDebit.res
+++ b/src/Payments/BecsBankDebit.res
@@ -90,7 +90,7 @@ let make = (~paymentType: CardThemeType.mode) => {
     <FullNamePaymentInput paymentType />
     <AddBankAccount modalData setModalData />
     <FullScreenPortal>
-      <BankDebitModal setModalData />
+      <BankDebitModal setModalData paymentType />
     </FullScreenPortal>
     <Surcharge paymentMethod="bank_debit" paymentMethodType="becs" />
     <Terms mode=PaymentModeType.BecsBankDebit />
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index 89de6d6ce..d235c6bec 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -44,6 +44,8 @@ type paymentMethodsFields =
   | PixCPF
   | PixCNPJ
   | LanguagePreference(array<string>)
+  | BankAccountNumber
+  | IBAN
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -593,6 +595,8 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
   | ("user_cpf", _) => PixCPF
   | ("user_cnpj", _) => PixCNPJ
   | ("user_pix_key", _) => PixKey
+  | ("user_bank_account_number", _) => BankAccountNumber
+  | ("user_iban", _) => BankAccountNumber
   | _ => None
   }
 }
@@ -675,6 +679,7 @@ let dynamicFieldsEnabledPaymentMethods = [
   "afterpay_clearpay",
   "mifinity",
   "upi_collect",
+  "sepa",
 ]
 
 let getIsBillingField = requiredFieldType => {
diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
index 2af98cd17..857a796e8 100644
--- a/src/Payments/PaymentMethodsWrapper.res
+++ b/src/Payments/PaymentMethodsWrapper.res
@@ -71,8 +71,8 @@ let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
           ->Array.filter(item => item.displayName == selectedBank)
           ->Array.get(0)
           ->Option.getOr(Bank.defaultBank)
-        intent(
-          ~bodyArr=PaymentBody.getPaymentBody(
+        let body =
+          PaymentBody.getPaymentBody(
             ~paymentMethod=paymentMethodDetails.methodType,
             ~paymentMethodType=paymentMethodName,
             ~country=countryCode.isoAlpha2,
@@ -89,7 +89,10 @@ let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
           ->JSON.Encode.object
           ->flattenObject(true)
           ->mergeTwoFlattenedJsonDicts(requiredFieldsBody)
-          ->getArrayOfTupleFromDict,
+          ->getArrayOfTupleFromDict
+
+        intent(
+          ~bodyArr=body,
           ~confirmParam=confirm.confirmParams,
           ~handleUserError=false,
           ~iframeId,
diff --git a/src/Payments/SepaBankDebit.res b/src/Payments/SepaBankDebit.res
index 8570a25b0..00c1d6a07 100644
--- a/src/Payments/SepaBankDebit.res
+++ b/src/Payments/SepaBankDebit.res
@@ -1,5 +1,4 @@
 open RecoilAtoms
-open RecoilAtomTypes
 open Utils
 open PaymentModeType
 
@@ -17,12 +16,7 @@ let make = (~paymentType: CardThemeType.mode) => {
 
   let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState)
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
-  let (line1, _) = Recoil.useLoggedRecoilState(userAddressline1, "line1", loggerState)
-  let (line2, _) = Recoil.useLoggedRecoilState(userAddressline2, "line2", loggerState)
-  let (country, _) = Recoil.useLoggedRecoilState(userAddressCountry, "country", loggerState)
-  let (city, _) = Recoil.useLoggedRecoilState(userAddressCity, "city", loggerState)
-  let (postalCode, _) = Recoil.useLoggedRecoilState(userAddressPincode, "postal_code", loggerState)
-  let (state, _) = Recoil.useLoggedRecoilState(userAddressState, "state", loggerState)
+
   let setComplete = Recoil.useSetRecoilState(fieldsComplete)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
@@ -35,21 +29,23 @@ let make = (~paymentType: CardThemeType.mode) => {
   let isVerifyPMAuthConnectorConfigured =
     displaySavedPaymentMethods && pmAuthMapper->Dict.get("sepa")->Option.isSome
 
-  let complete =
-    email.value != "" &&
-    fullName.value != "" &&
-    email.isValid->Option.getOr(false) &&
-    switch modalData {
-    | Some(val: ACHTypes.data) => val.iban !== "" || val.accountHolderName !== ""
-    | None => false
-    }
-  let empty =
-    email.value == "" ||
-    fullName.value == "" ||
-    switch modalData {
-    | Some(val: ACHTypes.data) => val.iban === "" || val.accountHolderName === ""
-    | None => true
-    }
+  let complete = switch modalData {
+  | Some(data: ACHTypes.data) =>
+    data.requiredFieldsBody
+    ->Option.getOr(Dict.make())
+    ->Dict.valuesToArray
+    ->Array.reduce(true, (acc, ele) => acc && ele !== ""->JSON.Encode.string)
+  | None => false
+  }
+
+  let empty = switch modalData {
+  | Some(data: ACHTypes.data) =>
+    data.requiredFieldsBody
+    ->Option.getOr(Dict.make())
+    ->Dict.valuesToArray
+    ->Array.reduce(true, (acc, ele) => acc && ele !== ""->JSON.Encode.string)
+  | None => true
+  }
 
   UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="sepa_bank_debit")
 
@@ -60,60 +56,49 @@ let make = (~paymentType: CardThemeType.mode) => {
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->safeParse
-    let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper
+    let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
 
     if confirm.doSubmit {
       if complete {
         switch modalData {
-        | Some(data: ACHTypes.data) => {
-            let body = PaymentBody.sepaBankDebitBody(
-              ~fullName=fullName.value,
-              ~email=email.value,
-              ~data,
-              ~line1=line1.value,
-              ~line2=line2.value,
-              ~country=getCountryCode(country.value).isoAlpha2,
-              ~city=city.value,
-              ~postalCode=postalCode.value,
-              ~state=state.value,
-            )
-            intent(
-              ~bodyArr=body,
-              ~confirmParam=confirm.confirmParams,
-              ~handleUserError=false,
-              ~manualRetry=isManualRetryEnabled,
-            )
-          }
+        | Some(data: ACHTypes.data) =>
+          let bodyFields = data.requiredFieldsBody->Option.getOr(Dict.make())
+          let sepaBody =
+            PaymentBody.dynamicPaymentBody("bank_debit", "sepa")
+            ->Dict.fromArray
+            ->JSON.Encode.object
+            ->flattenObject(true)
+            ->mergeTwoFlattenedJsonDicts(bodyFields)
+            ->getArrayOfTupleFromDict
+          intent(
+            ~bodyArr=sepaBody,
+            ~confirmParam=confirm.confirmParams,
+            ~handleUserError=false,
+            ~manualRetry=isManualRetryEnabled,
+          )
         | None => ()
         }
-        ()
       } else {
         postFailedSubmitResponse(~errortype="validation_error", ~message="Please enter all fields")
       }
     }
   }, (email, fullName, modalData, isManualRetryEnabled))
   useSubmitPaymentData(submitCallback)
-  <>
-    <RenderIf condition={isVerifyPMAuthConnectorConfigured}>
-      <AddBankDetails paymentMethodType="sepa" />
-    </RenderIf>
-    <RenderIf condition={!isVerifyPMAuthConnectorConfigured}>
-      <div
+
+  isVerifyPMAuthConnectorConfigured
+    ? <AddBankDetails paymentMethodType="sepa" />
+    : <div
         className="flex flex-col animate-slowShow"
         style={
           gridGap: {config.appearance.innerLayout === Spaced ? themeObj.spacingGridColumn : ""},
         }>
-        <EmailPaymentInput paymentType />
-        <FullNamePaymentInput paymentType />
         <AddBankAccount modalData setModalData />
         <FullScreenPortal>
-          <BankDebitModal setModalData />
+          <BankDebitModal setModalData paymentType />
         </FullScreenPortal>
         <Surcharge paymentMethod="bank_debit" paymentMethodType="sepa" />
         <Terms mode=SepaBankDebit />
       </div>
-    </RenderIf>
-  </>
 }
 
 let default = make
diff --git a/src/Types/ACHTypes.res b/src/Types/ACHTypes.res
index ea217604d..4ea8e33e6 100644
--- a/src/Types/ACHTypes.res
+++ b/src/Types/ACHTypes.res
@@ -5,4 +5,5 @@ type data = {
   accountType: string,
   iban: string,
   sortCode: string,
+  requiredFieldsBody?: Dict.t<JSON.t>,
 }
diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
index f41c10b79..380d087ed 100644
--- a/src/Utilities/DynamicFieldsUtils.res
+++ b/src/Utilities/DynamicFieldsUtils.res
@@ -131,6 +131,7 @@ let useRequiredFieldsEmptyAndValid = (
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
   let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
   let dateOfBirth = Recoil.useRecoilValueFromAtom(dateOfBirth)
+  let bankAccountNumber = Recoil.useRecoilValueFromAtom(userBankAccountNumber)
 
   let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress(billingAddress)
 
@@ -173,6 +174,9 @@ let useRequiredFieldsEmptyAndValid = (
       | PixCNPJ => pixCNPJ.isValid->Option.getOr(false)
       | PixCPF => pixCPF.isValid->Option.getOr(false)
       | PixKey => pixKey.isValid->Option.getOr(false)
+      | BankAccountNumber
+      | IBAN =>
+        bankAccountNumber.value !== ""
       | _ => true
       }
     })
@@ -221,6 +225,9 @@ let useRequiredFieldsEmptyAndValid = (
         let (month, year) = getExpiryDates(cardExpiry)
         month === "" || year === "" || cvcNumber === ""
       | DateOfBirth => dateOfBirth->Js.Nullable.isNullable
+      | BankAccountNumber
+      | IBAN =>
+        bankAccountNumber.value === ""
       | _ => false
       }
     })
@@ -234,26 +241,25 @@ let useRequiredFieldsEmptyAndValid = (
     billingName.value,
     line1.value,
     dateOfBirth,
-    (
-      email,
-      vpaId,
-      line2.value,
-      selectedBank,
-      phone.value,
-      city.value,
-      postalCode,
-      state.value,
-      blikCode.value,
-      pixCNPJ.value,
-      pixKey.value,
-      pixCPF.value,
-      isCardValid,
-      isExpiryValid,
-      isCVCValid,
-      cardNumber,
-      cardExpiry,
-      cvcNumber,
-    ),
+    email,
+    vpaId,
+    line2.value,
+    selectedBank,
+    phone.value,
+    city.value,
+    postalCode,
+    state.value,
+    blikCode.value,
+    pixCNPJ.value,
+    pixKey.value,
+    pixCPF.value,
+    isCardValid,
+    isExpiryValid,
+    isCVCValid,
+    cardNumber,
+    cardExpiry,
+    cvcNumber,
+    bankAccountNumber,
   ))
 }
 
@@ -299,6 +305,11 @@ let useSetInitialRequiredFields = (
     "dateOfBirth",
     logger,
   )
+  let (bankAccountNumber, setBankAccountNumber) = Recoil.useLoggedRecoilState(
+    userBankAccountNumber,
+    "bankAccountNumber",
+    logger,
+  )
 
   React.useEffect(() => {
     let getNameValue = (item: PaymentMethodsRecord.required_fields) => {
@@ -423,6 +434,9 @@ let useSetInitialRequiredFields = (
           }
         | None => ()
         }
+      | IBAN
+      | BankAccountNumber =>
+        setFields(setBankAccountNumber, bankAccountNumber, requiredField, false)
       | LanguagePreference(_)
       | SpecialField(_)
       | InfoElement
@@ -478,6 +492,7 @@ let useRequiredFieldsBody = (
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
   let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
   let dateOfBirth = Recoil.useRecoilValueFromAtom(dateOfBirth)
+  let bankAccountNumber = Recoil.useRecoilValueFromAtom(userBankAccountNumber)
 
   let getFieldValueFromFieldType = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
     switch fieldType {
@@ -531,6 +546,9 @@ let useRequiredFieldsBody = (
     | PixCNPJ => pixCNPJ.value
     | PixCPF => pixCPF.value
     | PixKey => pixKey.value
+    | IBAN
+    | BankAccountNumber =>
+      bankAccountNumber.value
     | StateAndCity
     | CountryAndPincode(_)
     | SpecialField(_)
@@ -631,6 +649,7 @@ let useRequiredFieldsBody = (
     selectedBank,
     cryptoCurrencyNetworks,
     dateOfBirth,
+    bankAccountNumber,
   ))
 }
 
@@ -649,7 +668,9 @@ let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.payment
   | PixCNPJ
   | DateOfBirth
   | Currency(_)
-  | VpaId => true
+  | VpaId
+  | IBAN
+  | BankAccountNumber => true
   | _ => false
   }
 }
@@ -768,6 +789,11 @@ let useSubmitCallback = () => {
     logger,
   )
   let (city, setCity) = Recoil.useLoggedRecoilState(userAddressCity, "city", logger)
+  let (bankAccountNumber, setBankAccountNumber) = Recoil.useLoggedRecoilState(
+    userBankAccountNumber,
+    "bankAccountNumber",
+    logger,
+  )
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
 
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -806,6 +832,12 @@ let useSubmitCallback = () => {
           errorString: localeString.cityEmptyText,
         })
       }
+      if bankAccountNumber.value === "" {
+        setBankAccountNumber(prev => {
+          ...prev,
+          errorString: localeString.ibanEmptyText,
+        })
+      }
     }
   }, (line1, line2, state, city, postalCode))
 }
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index ba6e8f922..ca2d37baa 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -224,47 +224,6 @@ let achBankDebitBody = (
     ),
   ])
 
-let sepaBankDebitBody = (
-  ~fullName,
-  ~email,
-  ~data: ACHTypes.data,
-  ~line1,
-  ~line2,
-  ~country,
-  ~city,
-  ~postalCode,
-  ~state,
-) =>
-  bankDebitsCommonBody("sepa")->Array.concat([
-    (
-      "payment_method_data",
-      [
-        billingDetailsTuple(
-          ~fullName,
-          ~email,
-          ~line1,
-          ~line2,
-          ~city,
-          ~state,
-          ~postalCode,
-          ~country,
-        ),
-        (
-          "bank_debit",
-          [
-            (
-              "sepa_bank_debit",
-              [
-                ("iban", data.iban->JSON.Encode.string),
-                ("bank_account_holder_name", data.accountHolderName->JSON.Encode.string),
-              ]->Utils.getJsonFromArrayOfJson,
-            ),
-          ]->Utils.getJsonFromArrayOfJson,
-        ),
-      ]->Utils.getJsonFromArrayOfJson,
-    ),
-  ])
-
 let bacsBankDebitBody = (
   ~email,
   ~accNum,
@@ -1001,11 +960,15 @@ let appendRedirectPaymentMethods = [
   "ali_pay_hk",
 ]
 
+let appendBankeDebitMethods = ["sepa"]
+
 let appendPaymentMethodExperience = (paymentMethodType, isQrPaymentMethod) =>
   if isQrPaymentMethod {
     paymentMethodType ++ "_qr"
   } else if appendRedirectPaymentMethods->Array.includes(paymentMethodType) {
     paymentMethodType ++ "_redirect"
+  } else if appendBankeDebitMethods->Array.includes(paymentMethodType) {
+    paymentMethodType ++ "_bank_debit"
   } else {
     paymentMethodType
   }
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index d1207655f..438334e52 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -75,6 +75,7 @@ let userPixCPF = Recoil.atom("userPixCPF", defaultFieldValues)
 let userPixCNPJ = Recoil.atom("userPixCNPJ", defaultFieldValues)
 let isCompleteCallbackUsed = Recoil.atom("isCompleteCallbackUsed", false)
 let isPaymentButtonHandlerProvidedAtom = Recoil.atom("isPaymentButtonHandlerProvidedAtom", false)
+let userBankAccountNumber = Recoil.atom("userBankAccountNumber", defaultFieldValues)
 
 type areOneClickWalletsRendered = {
   isGooglePay: bool,
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index 07e923f70..7cdbd5a50 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -1,6 +1,8 @@
 @val external document: 'a = "document"
 @val external window: Dom.element = "window"
 @val @scope("window") external iframeParent: Dom.element = "parent"
+@send external body: ('a, Dom.element) => Dom.element = "body"
+
 @val @scope("window") external topParent: Dom.element = "top"
 type event = {data: string}
 external dictToObj: Dict.t<'a> => {..} = "%identity"
diff --git a/src/orca-loader/LoaderPaymentElement.res b/src/orca-loader/LoaderPaymentElement.res
index add7383b7..987786f12 100644
--- a/src/orca-loader/LoaderPaymentElement.res
+++ b/src/orca-loader/LoaderPaymentElement.res
@@ -334,6 +334,10 @@ let make = (
                             ("options", options),
                           ]->Dict.fromArray,
                         )
+                        let fullScreenEle = Window.querySelector(`#orca-fullscreen`)
+                        fullScreenEle->Window.iframePostMessage(
+                          [("metadata", fullscreenMetadata.contents)]->Dict.fromArray,
+                        )
                       }
                     }
                     addSmartEventListener(

From 344855d2a4b9bf6817aa4c0e455eaf3afa608a2a Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 29 Oct 2024 08:30:04 +0000
Subject: [PATCH 2/2] chore(release): 0.98.0 [skip ci]

# [0.98.0](https://github.com/juspay/hyperswitch-web/compare/v0.97.0...v0.98.0) (2024-10-29)

### Features

* added dynamic fields for SEPA ([#624](https://github.com/juspay/hyperswitch-web/issues/624)) ([63f536e](https://github.com/juspay/hyperswitch-web/commit/63f536ef22dc0304b01d703a232ce99819743608))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 962929a15..2b1699d50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [0.98.0](https://github.com/juspay/hyperswitch-web/compare/v0.97.0...v0.98.0) (2024-10-29)
+
+
+### Features
+
+* added dynamic fields for SEPA ([#624](https://github.com/juspay/hyperswitch-web/issues/624)) ([63f536e](https://github.com/juspay/hyperswitch-web/commit/63f536ef22dc0304b01d703a232ce99819743608))
+
 # [0.97.0](https://github.com/juspay/hyperswitch-web/compare/v0.96.3...v0.97.0) (2024-10-29)
 
 
diff --git a/package-lock.json b/package-lock.json
index ff68b0145..6854a3977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.97.0",
+      "version": "0.98.0",
       "hasInstallScript": true,
       "dependencies": {
         "@glennsl/rescript-fetch": "^0.2.0",
diff --git a/package.json b/package.json
index b65050649..ac3b4df12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "main": "index.js",
   "private": true,
   "dependencies": {