Skip to content

feat: pix automatico #1435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aritro2002 wants to merge 7 commits into
base: main
Choose a base branch
from
+649 −52
Open

feat: pix automatico #1435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5efa391
feat: pix automatio
aritro2002 Mar 23, 2026
f85da1a
refactor: apply suggested changes
aritro2002 Apr 3, 2026
2f1689e
refactor: apply suggested changes
aritro2002 Apr 4, 2026
9d91aa7
refactor: apply suggested changes
aritro2002 Apr 9, 2026
63725b4
Merge branch 'main' of https://github.com/juspay/hyperswitch-web into…
aritro2002 Apr 14, 2026
8807fe1
refactor: apply suggested changes
aritro2002 Apr 14, 2026
0bfbff6
refactor: apply suggested changes
aritro2002 Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions src/Components/DynamicFields.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,12 +157,16 @@ let make = (
let cityRef = React.useRef(Nullable.null)
let bankAccountNumberRef = React.useRef(Nullable.null)
let sourceBankAccountIdRef = React.useRef(Nullable.null)
let branchCodeRef = React.useRef(Nullable.null)
let bankIdentifierRef = 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.useRecoilState(userBankAccountNumber)
let (sourceBankAccountId, setSourceBankAccountId) = Recoil.useRecoilState(sourceBankAccountId)
let (branchCode, setBranchCode) = Recoil.useRecoilState(userBranchCode)
let (bankIdentifier, setBankIdentifier) = Recoil.useRecoilState(userBankIdentifier)
let countryList = CountryStateDataRefs.countryDataRef.contents
let stateNames = getStateNames({
value: country,
Expand Down Expand Up @@ -474,6 +478,7 @@ let make = (
| PixKey => <PixPaymentInput fieldType="pixKey" />
| PixCPF => <PixPaymentInput fieldType="pixCPF" />
| PixCNPJ => <PixPaymentInput fieldType="pixCNPJ" />
| PixAccountNumber => <PixPaymentInput fieldType="pixAccountNumber" />
| BankAccountNumber | IBAN =>
<PaymentField
fieldName="IBAN"
Expand Down Expand Up @@ -527,6 +532,58 @@ let make = (
inputRef=sourceBankAccountIdRef
placeholder="DE00 0000 0000 0000 0000 00"
/>
| BranchCode =>
<PaymentField
fieldName=localeString.branchCodeLabel
setValue={setBranchCode}
value=branchCode
onChange={ev => {
let value = ReactEvent.Form.target(ev)["value"]
setBranchCode(_ => {
isValid: Some(value !== ""),
value,
errorString: value !== "" ? "" : localeString.branchCodeEmptyText,
})
}}
onBlur={ev => {
let value = ReactEvent.Focus.target(ev)["value"]
setBranchCode(prev => {
...prev,
isValid: Some(value !== ""),
})
}}
type_="text"
name="branchCode"
maxLength=20
inputRef=branchCodeRef
placeholder=localeString.branchCodePlaceholder
/>
| BankIdentifier =>
<PaymentField
fieldName=localeString.bankIdentifierLabel
setValue={setBankIdentifier}
value=bankIdentifier
onChange={ev => {
let value = ReactEvent.Form.target(ev)["value"]
setBankIdentifier(_ => {
isValid: Some(value !== ""),
value,
errorString: value !== "" ? "" : localeString.bankIdentifierEmptyText,
})
}}
onBlur={ev => {
let value = ReactEvent.Focus.target(ev)["value"]
setBankIdentifier(prev => {
...prev,
isValid: Some(value !== ""),
})
}}
type_="text"
name="bankIdentifier"
maxLength=20
inputRef=bankIdentifierRef
placeholder=localeString.bankIdentifierPlaceholder
/>
| DocumentNumber
| Email
| InfoElement
Expand Down Expand Up @@ -809,6 +866,7 @@ let make = (
| PixKey
| PixCPF
| PixCNPJ
| PixAccountNumber
| DocumentType(_)
| DocumentNumber
| CardNumber
Expand Down Expand Up @@ -837,6 +895,8 @@ let make = (
| BankAccountNumber
| IBAN
| SourceBankAccountId
| BranchCode
| BankIdentifier
| None => React.null
}}
</DynamicFieldsToRenderWrapper>
Expand Down
44 changes: 39 additions & 5 deletions src/Components/Loader.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,42 @@
type loaderPaymentMethod =
| PixAutomaticoPush
| Other

type loaderTextConfig = {
title: string,
subtitle: string,
}

let parsePaymentMethod = methodString => {
switch methodString {
| "pix_automatico_push" => PixAutomaticoPush
Copy link
Copy Markdown

@claude-code-pr-reviewer claude-code-pr-reviewer Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The loader checks for "pix_automatico_push", but PaymentMethodsRecord.res and DynamicFieldsUtils.res use "pix_automatico_push_transfer". The loader will never match and always show generic "Other" text for Pix Automatico Push payments.

Suggested Fix:

let parsePaymentMethod = methodString => {
  switch methodString {
  | "pix_automatico_push_transfer" => PixAutomaticoPush
  | _ => Other
  }
}

posted by PR reviewer bot

| _ => Other
}
}

let getLoaderTextConfig = (
paymentMethod: loaderPaymentMethod,
~localeString: LocaleStringTypes.localeStrings,
) => {
switch paymentMethod {
| PixAutomaticoPush => {
Copy link
Copy Markdown

@claude-code-pr-reviewer claude-code-pr-reviewer Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

User-facing loader text is hardcoded in English, violating the codebase's i18n pattern used elsewhere (see PaymentMethodsRecord.res and locale files).

Suggested Fix:
Add to LocaleStringTypes.res:

type localeStrings = {
  ...
  loaderProcessingTitle: string,
  loaderProcessingSubtitle: string,
  loaderPixPushTitle: string,
  loaderPixPushSubtitle: string,
}

Then pass localeString prop to Loader component.

posted by PR reviewer bot

title: localeString.loaderPaymentConfirmBankingAppTitle,
subtitle: localeString.loaderPaymentConfirmBankingAppSubtitle,
}
| Other => {
title: localeString.loaderPaymentProcessingTitle,
subtitle: localeString.loaderPaymentProcessingSubtitle,
}
}
}

@react.component
let make = (~branding="auto", ~showText=true) => {
let make = (~branding="auto", ~showText=true, ~paymentMethod="") => {
let arr = ["hyperswitch-triangle", "hyperswitch-square", "hyperswitch-circle"]
let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)

let parsedPaymentMethod = parsePaymentMethod(paymentMethod)
let textConfig = getLoaderTextConfig(parsedPaymentMethod, ~localeString)

<div className="flex flex-col gap-10 justify-center items-center">
<div className="flex flex-row gap-10">
Expand Down Expand Up @@ -33,12 +69,10 @@ let make = (~branding="auto", ~showText=true) => {
<RenderIf condition={showText}>
<div className="flex flex-col gap-5">
<div className="font-semibold text-sm text-gray-200 self-center ">
{React.string("We are processing your payment...")}
{React.string(textConfig.title)}
</div>
<div className="font-medium text-xs text-gray-400 self-center text-center w-3/4 ">
{React.string(
"You have been redirected to new tab to complete your payments. Status will be updated automatically",
)}
{React.string(textConfig.subtitle)}
</div>
</div>
</RenderIf>
Expand Down
20 changes: 17 additions & 3 deletions src/Components/PaymentLoader.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,30 @@
let make = () => {
open Utils
let (branding, setBranding) = React.useState(_ => "auto")
let (paymentMethod, setPaymentMethod) = React.useState(_ => "")
let setConfig = Recoil.useSetRecoilState(RecoilAtoms.configAtom)

React.useEffect0(() => {
messageParentWindow([("iframeMountedCallback", true->JSON.Encode.bool)])
let handle = (ev: Window.event) => {
let json = ev.data->safeParse
let dict = json->getDictFromJson
if dict->Utils.getBool("fullScreenIframeMounted", false) {
if dict->getDictFromDict("options")->getOptionString("branding")->Option.isSome {
setBranding(_ => dict->getDictFromDict("options")->getString("branding", "auto"))
let optionsDict = dict->getDictFromDict("options")
if optionsDict->getOptionString("branding")->Option.isSome {
setBranding(_ => optionsDict->getString("branding", "auto"))
}
let locale = optionsDict->getString("locale", "auto")
CardTheme.getLocaleObject(locale)
->Promise.thenResolve(localeString => {
setConfig(prev => {...prev, localeString})
})
->Promise.catch(_ => Promise.resolve())
->ignore
let metadata = dict->getJsonObjectFromDict("metadata")
let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make())
let paymentMethodStr = metaDataDict->getString("paymentMethod", "")
setPaymentMethod(_ => paymentMethodStr)
}
}
Window.addEventListener("message", handle)
Expand All @@ -25,7 +39,7 @@ let make = () => {

<div className={`h-screen w-screen flex m-auto items-center ${styles}`}>
<div className={`flex flex-col justify-center m-auto visible`}>
<Loader branding />
<Loader branding paymentMethod />
</div>
</div>
}
39 changes: 38 additions & 1 deletion src/Components/PixPaymentInput.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ let make = (~fieldType="") => {
let (pixCNPJ, setPixCNPJ) = Recoil.useRecoilState(userPixCNPJ)
let (pixCPF, setPixCPF) = Recoil.useRecoilState(userPixCPF)
let (pixKey, setPixKey) = Recoil.useRecoilState(userPixKey)
let (pixAccountNumber, setPixAccountNumber) = Recoil.useRecoilState(userPixAccountNumber)
let (sourceBankAccountId, setSourceBankAccountId) = Recoil.useRecoilState(sourceBankAccountId)
let (branchCode, setBranchCode) = Recoil.useRecoilState(userBranchCode)
let (bankIdentifier, setBankIdentifier) = Recoil.useRecoilState(userBankIdentifier)
let inputRef = React.useRef(Nullable.null)

let validatePixKey = (val): RecoilAtomTypes.field =>
Expand Down Expand Up @@ -72,6 +75,14 @@ let make = (~fieldType="") => {
Some(14),
validatePixCNPJ,
)
| "pixAccountNumber" => (
localeString.pixAccountNumberLabel,
setPixAccountNumber,
pixAccountNumber,
localeString.pixAccountNumberPlaceholder,
None,
validatePixKey,
)
| _ => (
"",
_ => (),
Expand Down Expand Up @@ -123,14 +134,40 @@ let make = (~fieldType="") => {
errorString: localeString.pixCPFEmptyText,
})
}
if pixAccountNumber.value == "" {
setPixAccountNumber(prev => {
...prev,
errorString: localeString.pixAccountNumberEmptyText,
})
}
if sourceBankAccountId.value == "" {
setSourceBankAccountId(prev => {
...prev,
errorString: localeString.sourceBankAccountIdEmptyText,
})
}
if branchCode.value == "" {
setBranchCode(prev => {
...prev,
errorString: localeString.branchCodeEmptyText,
})
}
if bankIdentifier.value == "" {
setBankIdentifier(prev => {
...prev,
errorString: localeString.bankIdentifierEmptyText,
})
}
}
}, [pixCNPJ.value, pixKey.value, pixCPF.value])
}, (
pixCNPJ.value,
pixKey.value,
pixCPF.value,
pixAccountNumber.value,
sourceBankAccountId.value,
branchCode.value,
bankIdentifier.value,
))

useSubmitPaymentData(submitCallback)

Expand Down
15 changes: 15 additions & 0 deletions src/LocaleStrings/ArabicLocale.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,12 @@ let localeStrings: LocaleStringTypes.localeStrings = {
pixKeyEmptyText: `مفتاح Pix لا يمكن أن يكون فارغًا`,
pixKeyPlaceholder: `أدخل مفتاح Pix`,
pixKeyLabel: `مفتاح Pix`,
pixAccountNumberEmptyText: "لا يمكن أن يكون رقم حساب Pix فارغًا",
pixAccountNumberLabel: "رقم حساب Pix",
pixAccountNumberPlaceholder: "أدخل رقم حساب Pix",
sourceBankAccountIdEmptyText: `لا يمكن أن يكون معرف الحساب المصرفي المصدر فارغاً`,
branchCodeEmptyText: `لا يمكن أن يكون رمز الفرع فارغاً`,
bankIdentifierEmptyText: `لا يمكن أن يكون معرف البنك فارغاً`,
invalidCardHolderNameError: `اسم حامل البطاقة لا يمكن أن يحتوي على أرقام`,
invalidNickNameError: `لا يمكن أن يحتوي الاسم المستعار على أكثر من رقمين`,
expiry: `انتهاء الصلاحية`,
Expand Down Expand Up @@ -230,6 +235,8 @@ let localeStrings: LocaleStringTypes.localeStrings = {
payment_methods_open_banking_pis: `الخدمات المصرفية المفتوحة`,
payment_methods_evoucher: `قسيمة إلكترونية`,
payment_methods_pix_transfer: `Pix`,
payment_methods_pix_automatico_qr: `Pix تلقائي QR`,
payment_methods_pix_automatico_push: `Pix تلقائي Push`,
payment_methods_boleto: `Boleto`,
payment_methods_paypal: `باي بال`,
payment_methods_local_bank_transfer_transfer: `Union Pay`,
Expand Down Expand Up @@ -257,6 +264,14 @@ let localeStrings: LocaleStringTypes.localeStrings = {
installmentWithInterest: "مع فوائد",
installmentTotal: "المجموع",
installmentSelectPlanError: "يرجى اختيار خطة تقسيط",
loaderPaymentProcessingTitle: "جارٍ معالجة دفعتك...",
loaderPaymentProcessingSubtitle: "تمت إعادة توجيهك إلى علامة تبويب جديدة لإتمام الدفع. سيتم تحديث الحالة تلقائيًا",
loaderPaymentConfirmBankingAppTitle: "يرجى تأكيد الدفع في تطبيق البنك الخاص بك",
loaderPaymentConfirmBankingAppSubtitle: "افتح تطبيق البنك الخاص بك وقم بتفويض طلب الدفع. سيتم تحديث الحالة تلقائيًا بعد التأكيد.",
branchCodeLabel: "رمز الفرع",
bankIdentifierLabel: "معرف البنك",
branchCodePlaceholder: "أدخل رمز الفرع",
bankIdentifierPlaceholder: "أدخل معرف البنك",
installmentSelectPlanPlaceholder: "اختر خطة التقسيط",
showMore: "عرض المزيد",
showLess: "عرض أقل",
Expand Down
15 changes: 15 additions & 0 deletions src/LocaleStrings/CatalanLocale.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,12 @@ let localeStrings: LocaleStringTypes.localeStrings = {
pixKeyEmptyText: `La clau Pix no pot estar buida`,
pixKeyPlaceholder: `Introdueix la clau Pix`,
pixKeyLabel: `Clau Pix`,
pixAccountNumberEmptyText: `El número de compte Pix no pot estar buit`,
pixAccountNumberLabel: "Nombre de compte Pix",
pixAccountNumberPlaceholder: `Introduïu el nombre de compte Pix`,
sourceBankAccountIdEmptyText: `L'identificador del compte bancari d'origen no pot estar buit`,
branchCodeEmptyText: `El codi de sucursal no pot estar buit`,
bankIdentifierEmptyText: `L'identificador bancari no pot estar buit`,
invalidCardHolderNameError: `El nom del titular de la targeta no pot contenir dígits`,
invalidNickNameError: `El sobrenom no pot contenir més de 2 dígits`,
expiry: `caducitat`,
Expand Down Expand Up @@ -229,6 +234,8 @@ let localeStrings: LocaleStringTypes.localeStrings = {
payment_methods_open_banking_pis: `Bancaire ouvert`,
payment_methods_evoucher: `E-Voucher`,
payment_methods_pix_transfer: `Pix`,
payment_methods_pix_automatico_qr: `Pix Automàtic QR`,
payment_methods_pix_automatico_push: `Pix Automàtic Push`,
payment_methods_boleto: `Boleto`,
payment_methods_paypal: `Paypal`,
payment_methods_local_bank_transfer_transfer: `Union Pay`,
Expand Down Expand Up @@ -256,6 +263,14 @@ let localeStrings: LocaleStringTypes.localeStrings = {
installmentWithInterest: "amb interessos",
installmentTotal: "Total",
installmentSelectPlanError: "Si us plau, seleccioneu un pla de terminis",
loaderPaymentProcessingTitle: "Estem processant el vostre pagament...",
loaderPaymentProcessingSubtitle: `Heu estat redirigit a una nova pestanya per completar el pagament. L'estat s'actualitzarà automàticament`,
loaderPaymentConfirmBankingAppTitle: `Si us plau, confirmeu el pagament a la vostra aplicació bancària`,
loaderPaymentConfirmBankingAppSubtitle: `Obriu la vostra aplicació bancària i autoritzeu la sol·licitud de pagament. L'estat s'actualitzarà automàticament un cop confirmat.`,
branchCodeLabel: "Codi de sucursal",
bankIdentifierLabel: "Identificador bancari",
branchCodePlaceholder: `Introduïu el codi de sucursal`,
bankIdentifierPlaceholder: `Introduïu l'identificador bancari`,
installmentSelectPlanPlaceholder: "Seleccioneu un pla de terminis",
showMore: "Mostra més",
showLess: "Mostra menys",
Expand Down
15 changes: 15 additions & 0 deletions src/LocaleStrings/ChineseLocale.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,12 @@ let localeStrings: LocaleStringTypes.localeStrings = {
pixKeyEmptyText: `Pix 密钥不能为空`,
pixKeyPlaceholder: `输入 Pix 密钥`,
pixKeyLabel: `Pix 密钥`,
pixAccountNumberEmptyText: "Pix账户号码不能为空",
pixAccountNumberLabel: "Pix账户号码",
pixAccountNumberPlaceholder: "输入Pix账户号码",
sourceBankAccountIdEmptyText: `源银行账户ID不能为空`,
branchCodeEmptyText: `支行代码不能为空`,
bankIdentifierEmptyText: `银行标识符不能为空`,
invalidCardHolderNameError: `持卡人姓名不能包含数字`,
invalidNickNameError: `昵称不能包含超过2个数字`,
expiry: `到期`,
Expand Down Expand Up @@ -227,6 +232,8 @@ let localeStrings: LocaleStringTypes.localeStrings = {
payment_methods_open_banking_pis: `开放银行`,
payment_methods_evoucher: `电子代金券`,
payment_methods_pix_transfer: `Pix`,
payment_methods_pix_automatico_qr: `Pix 自动 QR`,
payment_methods_pix_automatico_push: `Pix 自动推送`,
payment_methods_boleto: `Boleto`,
payment_methods_paypal: `Paypal`,
payment_methods_local_bank_transfer_transfer: `银联`,
Expand Down Expand Up @@ -254,6 +261,14 @@ let localeStrings: LocaleStringTypes.localeStrings = {
installmentWithInterest: "有利息",
installmentTotal: "合计",
installmentSelectPlanError: "请选择分期计划",
loaderPaymentProcessingTitle: "我们正在处理您的付款...",
loaderPaymentProcessingSubtitle: "您已被重定向到新标签页以完成付款。状态将自动更新",
loaderPaymentConfirmBankingAppTitle: "请在您的银行应用中确认付款",
loaderPaymentConfirmBankingAppSubtitle: "打开您的银行应用程序并授权付款请求。确认后状态将自动更新。",
branchCodeLabel: "支行代码",
bankIdentifierLabel: "银行识别码",
branchCodePlaceholder: "输入分行代码",
bankIdentifierPlaceholder: "输入银行识别码",
installmentSelectPlanPlaceholder: "选择分期计划",
showMore: "显示更多",
showLess: "收起",
Expand Down
Loading
Loading