feat: superposition dynamic fields by Shivam25092001 · Pull Request #1590 · juspay/hyperswitch-web

Shivam25092001 · 2026-05-26T07:19:12Z

Type of Change

Description

DynamicFields.res — Rewritten to use useConfigurationService → getSuperpositionFinalFields; RFF <Form> wraps all fields; billing split is path-based; card fields filtered at source to avoid double-render with CardPayment
DynamicFields/ — New per-field components: CardHolderNameField, StateDropdownField, EmailField, CountryDropdownField, PhoneField, etc.
DateOfBirth.res — Refactored as RFF-wired DateField; this component was only getting used by DynamicFields
package.json — Added react-final-form.
ReactFinalForm owns all field state, validation, and initial values.

Architectural Decisions

No backward compatibility with the old paymentMethodsFields enum pipeline. setRequiredFieldsBody contract with all consumers is unchanged — they still receive Dict.t<JSON.t> keyed by API paths.
RFF owns all field state, validation, and initial values. useFormStateHandler syncs formProps.values → setRequiredFieldsBody and formProps.valid → areRequiredFieldsValid.

Why include RFF change in this PR?

Using react-final-forms, the I/O based on fieldConfigs from superposition becomes very readable and easier to manage.
Same change-radius.

References

fieldConfig — key reference : This doc details about different fieldConfig keys.
Superposition HLD

Base PRs

Stacked PRs

Locales for error texts: fix: added locales that are required for validation functions #1591.

How did you test it?

SCREEN RECORDING

Screen.Recording.2026-05-26.at.12.54.06.PM.mov

Issue

Fixes #1518

Checklist

I ran npm run re:build
I reviewed submitted code
I added unit tests for my changes where possible

… feat-sdk-config-api

…itch-web into feat-sdk-config-api

semanticdiff-com · 2026-05-26T07:19:14Z

Review changes with

Changed Files

File	Status
package-lock.json	0% smaller
package.json	0% smaller
src/Components/CryptoCurrencyNetworks.res	Unsupported file format
src/Components/DynamicFieldInput.res	Unsupported file format
src/Components/DynamicFields.res	Unsupported file format
src/Components/DynamicFields/CardHolderNameField.res	Unsupported file format
src/Components/DynamicFields/CountryDropdownField.res	Unsupported file format
src/Components/DynamicFields/EmailField.res	Unsupported file format
src/Components/DynamicFields/GenericDropdownField.res	Unsupported file format
src/Components/DynamicFields/GenericInputField.res	Unsupported file format
src/Components/DynamicFields/PhoneCountryCodeDropdownField.res	Unsupported file format
src/Components/DynamicFields/PhoneField.res	Unsupported file format
src/Components/DynamicFields/StateDropdownField.res	Unsupported file format
src/LoaderController.res	Unsupported file format
src/Payment.res	Unsupported file format
src/Payments/DateOfBirth.res	Unsupported file format
src/Payments/PreMountLoader.res	Unsupported file format
src/Types/HyperLoggerTypes.res	Unsupported file format
src/Utilities/APIHelpers/APIUtils.res	Unsupported file format
src/Utilities/DynamicFieldsUtils.res	Unsupported file format
src/Utilities/LoggerUtils.res	Unsupported file format
src/Utilities/PaymentHelpers.res	Unsupported file format
src/Utilities/PaymentUtils.res	Unsupported file format
src/Utilities/RecoilAtoms.res	Unsupported file format
src/Utilities/Utils.res	Unsupported file format
src/hyper-loader/Elements.res	Unsupported file format
src/hyper-loader/Hyper.res	Unsupported file format
src/hyper-loader/PaymentSession.res	Unsupported file format
src/hyper-loader/UpdateIntentHelpersNew.res	Unsupported file format

github-actions · 2026-05-26T07:33:36Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T07:33:59Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T07:35:47Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T07:40:39Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T09:10:44Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T09:53:31Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

github-actions · 2026-05-26T10:23:53Z

🚫 Missing Linked Issue

Hi 👋 This pull request does not appear to be linked to any open issue yet.

Linking your PR to an issue helps keep the project tidy and ensures the issue is closed automatically.

✔️ How to fix this

Add a keyword like Fixes #123 or Closes #456 to your PR description or a commit message.
Or link it manually using the "Linked issues" panel in the PR sidebar.

✅ Tip: You can link multiple issues.
🚫 Note: If only one issue is linked, it must be open for this check to pass.

Once linked, this check will pass automatically on your next push or when you re-run the workflow.

Thanks for helping maintainers! 🙌

XyneSpaces

Review Summary

This PR introduces a major architectural change migrating dynamic field handling from Recoil-based state management to React Final Form (RFF). While the approach is sound, there are several blocking issues that must be addressed before merge.

Verdict: Request Changes

Findings

🚨 Silent-null onFailure pattern in EmailField.res

Line 14 uses switch paths->Array.get(0) with None => React.null fallback. If no paths are provided, the component silently renders nothing. This is a silent failure pattern that makes debugging difficult.

Add an explicit error or warning when paths array is empty.

| None => {
    Js.Console.error("EmailField: No paths provided")
    React.null
  }

⚠️ Missing dependency in CryptoCurrencyNetworks.res useEffect

Line 46-50 has a React.useEffect that calls field.input.onChange(initialNetwork) but the dependency array only includes [initialNetwork]. If field reference changes (though unlikely with RFF), the effect may use stale closure.

Add field to dependency array or use a ref-stable field accessor.

⚠️ Unvalidated country_code extraction in PhoneCountryCodeDropdownField.res

Line 54 extracts country code via String.split("#")->Array.get(1). This assumes a specific format that isn't validated. Malformed values will silently return empty string.

Add validation that the split produces expected parts, or use a typed parser.

⚠️ Inconsistent initialValue handling in CountryDropdownField.res

Lines 14-16 construct initialIso from defaultCountry or first option, but defaultCountry is already a country name while firstOption is presumably an ISO code. Mixing name and code types may cause initialization bugs.

Verify that defaultCountry and firstOption are both ISO codes before assigning to initialIso.

💡 Missing key in dynamic array rendering

DynamicFields.res line 159-167 maps rows without stable keys. Using row index as key causes React reconciliation issues when rows reorder.

Use a stable identifier from the field configuration (like confirmRequestWritePath) as the key.

💡 Unused inputValue state in CardHolderNameField.res

The inputValue state is set but never read outside the handleChange function. RFF already manages field state - this local state is redundant.

Remove the local state and derive display value from firstField.input.value if needed.

Architectural Concerns

No fallback for RFF context failures: The entire form assumes RFF context is present. If ReactFinalForm.useForm is called outside a <Form> wrapper, it will throw at runtime without graceful degradation.
Base64 encoding risk in flattenObject: DynamicFields.res line 176 calls flattenObject(false) - verify this doesn't introduce injection vectors if field values contain special characters.
V1/V2 parity: If DynamicFields.res changed, ensure DynamicFieldsV2.res (if exists) reflects similar RFF migration to maintain version parity.

Positive Notes

Clean separation of concerns with new field components
Proper use of RFF useField hook with validation config
Good TypeScript-style typing with ReScript variants in DynamicFieldInput.res
Significant code reduction in DynamicFieldsUtils.res (-634 lines)

Please address the blocking issues above.

… feat-sdk-config-api Resolved conflicts: - APIUtils.res: kept FetchSdkConfigs route alongside main's renamed paymentIntentId - PaymentHelpers.res: dropped duplicate getCardEligibilityErrorText (moved to EligibilityHelpers on main), kept fetchSdkConfigs - Elements.res: kept forwardSdkConfigsDataToIframe with main's hasSdkAuthorization guard - Hyper.res: kept resolveProfileId and main's isReadyPromise; adopted main's direct clientSecret usage (no extraction from sdkAuthorization) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…tSecret

… intent data

Shivam25092001 · 2026-06-15T07:26:35Z

Replaced with PR: #1608 due to commit conflicts and unclear history

Shivam25092001 added 8 commits May 12, 2026 18:17

feat: extract profile id from client secret

a0978a2

Merge branch 'main' into feat-profileId-cs

c3042a1

feat: integrate sdk configs api

dd511c2

fix: profile_id inference order

63a93c9

Merge branch 'main' of https://github.com/juspay/hyperswitch-web into…

9df68e5

… feat-sdk-config-api

chore: code formating

85c8fa3

Merge branch 'feat-profileId-cs' of https://github.com/juspay/hypersw…

7293a73

…itch-web into feat-sdk-config-api

chore: code refactor

304f0d4

Shivam25092001 requested review from AbhishekChorotiya, ArushKapoorJuspay, aritro2002, sakksham7 and seekshiva as code owners May 26, 2026 07:19

Shivam25092001 mentioned this pull request May 26, 2026

feat: new configTypes for superposition juspay/hyperswitch-sdk-utils#57

Open

13 tasks

Shivam25092001 changed the base branch from main to feat-sdk-config-api May 26, 2026 07:33

github-actions Bot added the S-conventions-not-followed Some Github conventions not followed label May 26, 2026

Shivam25092001 changed the title ~~Feat superposition dynamic fields~~ feat: superposition dynamic fields May 26, 2026

github-actions Bot removed the S-conventions-not-followed Some Github conventions not followed label May 26, 2026

Shivam25092001 had a problem deploying to Testing May 26, 2026 09:53 — with GitHub Actions Failure

Shivam25092001 had a problem deploying to Testing May 27, 2026 01:59 — with GitHub Actions Failure

Shivam25092001 had a problem deploying to Testing May 27, 2026 07:59 — with GitHub Actions Failure

XyneSpaces requested changes May 30, 2026

View reviewed changes

pradeep120230-creator and others added 3 commits June 5, 2026 13:55

chore: revert shared-code submodule to main's pinned commit

ceb1314

fix: sdkConfigs api authentication, removed profileId and added clien…

368b2dc

…tSecret

Shivam25092001 force-pushed the feat-superposition-dynamic-fields branch from c5c380e to cf3cdbc Compare June 12, 2026 09:19

Shivam25092001 had a problem deploying to Testing June 12, 2026 09:19 — with GitHub Actions Failure

Shivam25092001 added the Ready for Review PR with label Ready for Review should only be reviewed. label Jun 12, 2026

Shivam25092001 had a problem deploying to Testing June 12, 2026 10:13 — with GitHub Actions Failure

Shivam25092001 and others added 4 commits June 12, 2026 16:28

fix: added support for preloadWithSDKParmas of sdk-configs api

fc954d1

feat: latency analytics for sdk-configs api

3055a23

Merge branch 'main' into feat-sdk-config-api

6a9fc5e

fix: fetch sdkConfigs on updateIntent since this api now depends upon…

67a2a2f

… intent data

Base automatically changed from feat-sdk-config-api to main June 12, 2026 14:51

Shivam25092001 and others added 6 commits June 14, 2026 17:13

feat: dynamicfields rendered from superposition

e3188f6

chore: code formating

e1db291

fix: eligibleConnectors from sdkConfigs

39a521e

fix: new fieldRenderTypes support

895e325

fix: move cardHolderName field outside billing block

4983868

fix: CardholderName input field for card payment methods

5349296

Shivam25092001 force-pushed the feat-superposition-dynamic-fields branch from 1f71111 to 5349296 Compare June 14, 2026 11:54

Shivam25092001 closed this Jun 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: superposition dynamic fields#1590

feat: superposition dynamic fields#1590
Shivam25092001 wants to merge 21 commits into
mainfrom
feat-superposition-dynamic-fields

Shivam25092001 commented May 26, 2026 •

edited

Loading

Uh oh!

semanticdiff-com Bot commented May 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

XyneSpaces left a comment

Uh oh!

Shivam25092001 commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Shivam25092001 commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Description

Architectural Decisions

Why include RFF change in this PR?

References

Base PRs

Stacked PRs

How did you test it?

SCREEN RECORDING

Issue

Checklist

Uh oh!

semanticdiff-com Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions Bot commented May 26, 2026

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

XyneSpaces left a comment

Choose a reason for hiding this comment

Review Summary

Verdict: Request Changes

Findings

Architectural Concerns

Positive Notes

Uh oh!

Shivam25092001 commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Shivam25092001 commented May 26, 2026 •

edited

Loading

semanticdiff-com Bot commented May 26, 2026 •

edited

Loading