Skip to content

fix(card): make card_network optional in CardElement rendering - #496

Closed
Pradeep-kumar1202 wants to merge 1 commit into
mainfrom
fix/card-element-optional-card-network
Closed

fix(card): make card_network optional in CardElement rendering#496
Pradeep-kumar1202 wants to merge 1 commit into
mainfrom
fix/card-element-optional-card-network

Conversation

@Pradeep-kumar1202

@Pradeep-kumar1202 Pradeep-kumar1202 commented May 4, 2026

Copy link
Copy Markdown
Contributor

Type of Change

  • Bugfix
  • Feature
  • Refactor
  • Chore
  • CI/CD
  • Docs

Summary

  • Replace positional Array.get(0..4) in CardElement.res with name-based lookup via the new SuperpositionHelper.findFieldByName.
  • Make card.card_network optional — only the four essentials (number, exp month, exp year, cvc) gate the render.
  • Move the BIN-detected card brand from a useField slot to local React.useState. Card brand is a derived value, not user input, so it doesn't belong in form state by default.
  • Add an inner CardNetworkSync render-null component that registers card_network with React Final Form and mirrors the local brand into form state — mounted only when superposition required the field.
  • Drop the cardNetworkMeta branch from the error-display switch; brand is BIN-derived and never user-typed.

Why

Superposition drives the dynamic field set per connector. For ~119 of 120 connectors, card_network is not in the required fields. The old positional pattern match expected exactly five Some(_) values, so the entire card form fell through to
React.null and merchants saw a blank screen.

Name-based lookup is order- and count-independent, so adding/removing optional fields no longer breaks the form. Lifting brand to local state cleanly separates client-side concerns (CVC sizing, formatting, co-badged dropdown) from the
submission contract.

Files changed

  • src/components/dynamic/CardElement.res — name-based lookup, optional card_network, local brand state, CardNetworkSync inner module.
  • Submodule bump for shared-code to pick up findFieldByName.

Screenshots / Recordings


Affected Area & Impact

  • Client Core
  • Shared Codebase
  • Android
  • iOS

Android PR / status (if any):
iOS PR / status (if any):
Shared Codebase PR / status (if any): juspay/hyperswitch-sdk-utils#54

Testing

  • JS bundle built
  • Tested in Android app
  • Tested in iOS app

Notes:


  • The shared-code PR needs to merge first

Checklist

  • Tested in consuming Android app
  • Tested in consuming iOS app

@kanikabansal08

Copy link
Copy Markdown

@hyperswitch-client-core-review-bot please review this PR.

@hs-agent hs-agent left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Verdict: ✅ Approve

🚫 0 critical · ⚠️ 0 warning · 💡 1 suggestion · 🔍 0 nitpick

Fixes the blank card form bug for connectors without card_network. The name-based lookup is a solid structural improvement over positional indexing.

@Pradeep-kumar1202

Copy link
Copy Markdown
Contributor Author

The intended changes went in this PR #524

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants