feat: added card brand icon and changed location of cvc icon

[ArushKapoorJuspay]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

Adds a new cardBrandIcon prop inside the layout configuration to give merchants control over card brand icon visibility in the card number input. Also moves cvcIcon from the top-level options object into layout for a more cohesive icon configuration API.

Prop Structure

const paymentElementOptions = {
  layout: {
    cvcIcon: "default",        // "default" | "hidden"
    cardBrandIcon: "standard", // "standard" | "hidden" | "animated" | "hideDefault"
  }
}

cardBrandIcon Values

Value	Behaviour
"standard"	(Default) Always shows the card brand icon; shows placeholder when no brand is detected
"hidden"	Hides all card brand icons at all times
"animated"	Reserved for future use; currently behaves identically to "standard"
"hideDefault"	Hides the placeholder icon when no brand is detected; shows the icon once a brand is identified

Changes

• src/Types/PaymentType.res — Added type cardBrandIconStyle = Standard | Hidden | Animated | HideDefault; added cvcIcon and cardBrandIcon fields to layoutConfig and defaultLayout; removed both from top-level options; added parsers with correct warning paths (options.layout.cvcIcon, options.layout.cardBrandIcon)
• src/CardUtils.res — Added getCardBrandIconVisibility(cardBrandIconSetting, cardType) helper function
• src/CardSchemeComponent.res — Reads cardBrandIcon from layout via getLayoutClass; uses getCardBrandIconVisibility to conditionally render the icon; co-badge dropdown is unaffected
• src/Payments/CardPayment.res — Sources cvcIcon from getLayoutClass(options.layout).cvcIcon
• src/Components/DynamicFields.res — Sources cvcIcon from getLayoutClass(layout).cvcIcon

How did you test it?

Screen.Recording.2026-05-25.at.6.43.08.PM.mov

Checklist

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

[semanticdiff-com]

Review changes with  

[github-actions]

🚫 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]

🚫 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! 🙌