feat: unified view for saved and more payment methods screen #1194

sakksham7 · 2025-08-17T18:21:25Z

Type of Change

Description

Added a parameter inside layout object, named as savedMethodsLayout, it is an object having structure as

savedMethodsLayout : {
      displayMergedSavedMethods: bool,
      maxSavedItems: int,
    },

based upon which if there are saved payment methods and displayMergedSavedMethods is passed as true then instead of coming on a separate saved payment methods screen, it will come in either tabs flow or accordion flow depending upon the layout.
maxSavedItems is used to configure how many saved methods we want to show initially and then the rest can be shown after clicking on show more.

Screen.Recording.2025-08-26.at.4.47.04.PM.mov

How did you test it?

Tested the following cases for both Accordion view and Tabs View :-

When saved payment methods are present
displaySavedPaymentMethods is false, displayMergedSavedMethods is false or true No saved payment methods tab
displaySavedPaymentMethods is true, displayMergedSavedMethods is false Normal flow Saved payment methods screen
displaySavedPaymentMethods is true, displayMergedSavedMethods is true Saved payment methods in tabs or accordion
When No saved payment methods are present
each case will have no saved payment methods

Checklist

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

…ds screen

semanticdiff-com · 2025-08-17T18:21:27Z

Review changes with

vsrivatsa-edinburgh · 2025-08-22T04:49:10Z

Hmm. Quite confusing experience. If “Saved” implies all (saved) payment methods, why should it have a card icon. Right next it to is “Cards” with a card icon again. Worth revisiting

sakksham7 · 2025-08-22T06:54:03Z

Hmm. Quite confusing experience. If “Saved” implies all (saved) payment methods, why should it have a card icon. Right next it to is “Cards” with a card icon again. Worth revisiting

Thanks for pointing this out, we’ll revisit the icons.

github-actions · 2025-08-28T08:28:22Z

🚫 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 · 2025-08-28T08:31:55Z

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

Sanskar2001 · 2025-09-04T08:39:23Z

src/Components/SavedMethods.res

+  let renderSavedCards = (cardsArr: array<PaymentType.customerMethods>) => {
+    cardsArr
+    ->Array.mapWithIndex((obj, i) =>
+      <SavedCardItem
+        key={i->Int.toString}
+        setPaymentToken
+        isActive={paymentTokenVal == obj.paymentToken}
+        paymentItem=obj
+        brandIcon={obj->getPaymentMethodBrand}
+        index=i
+        savedCardlength
+        cvcProps
+        setRequiredFieldsBody
+      />
+    )
+    ->React.array
+  }
+
+  let clickToPayElement = {
+    <RenderIf condition={clickToPayConfig.isReady == Some(true)}>
+      <ClickToPayAuthenticate
+        loggerState
+        savedMethods
+        isClickToPayAuthenticateError
+        setIsClickToPayAuthenticateError
+        setPaymentToken
+        paymentTokenVal
+        cvcProps
+        getVisaCards
+        setIsClickToPayRememberMe
+        closeComponentIfSavedMethodsAreEmpty
+      />
+    </RenderIf>
+  }


This should be a react component

Sanskar2001 · 2025-09-04T08:53:58Z

src/Components/SavedMethods.res

    {if enableSavedPaymentShimmer {
      <PaymentElementShimmer.SavedPaymentCardShimmer />
    } else {
-      <RenderIf condition={!showPaymentMethodsScreen}> {bottomElement} </RenderIf>
+      <RenderIf condition={!showPaymentMethodsScreen}>
+        {displayMergedSavedMethods ? mergedViewBottomElement : bottomElement}
+      </RenderIf>
    }}


Try this

<RenderIf condition={enableSavedPaymentShimmer}> <PaymentElementShimmer.SavedPaymentCardShimmer /> </RenderIf> <RenderIf condition={!enableSavedPaymentShimmer && !showPaymentMethodsScreen}> {displayMergedSavedMethods ? mergedViewBottomElement : bottomElement} </RenderIf>

Sanskar2001 · 2025-09-04T08:59:29Z

src/Components/SavedMethods.res

+  let mergedViewBottomElement = {
+    <div
+      className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
+      {renderSavedCards(cardOptionDetails)}
+      <div
+        className={`transition-all duration-300 ease-in-out overflow-hidden
+          ${showMore ? "max-h-0 opacity-0" : "max-h-screen opacity-100"}
+        `}>
+        {renderSavedCards(dropDownOptionsDetails)}
+      </div>
+      clickToPayElement
+    </div>
+  }
+
  let bottomElement = {
    <div
      className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
-      {savedMethods
-      ->Array.mapWithIndex((obj, i) =>
-        <SavedCardItem
-          key={i->Int.toString}
-          setPaymentToken
-          isActive={paymentTokenVal == obj.paymentToken}
-          paymentItem=obj
-          brandIcon={obj->getPaymentMethodBrand}
-          index=i
-          savedCardlength
-          cvcProps
-          setRequiredFieldsBody
-        />
-      )
-      ->React.array}
-      <RenderIf condition={clickToPayConfig.isReady == Some(true)}>
-        <ClickToPayAuthenticate
-          loggerState
-          savedMethods
-          isClickToPayAuthenticateError
-          setIsClickToPayAuthenticateError
-          setPaymentToken
-          paymentTokenVal
-          cvcProps
-          getVisaCards
-          setIsClickToPayRememberMe
-          closeComponentIfSavedMethodsAreEmpty
-        />
-      </RenderIf>
+      <RenderIf condition={!displayMergedSavedMethods}> {renderSavedCards(savedMethods)} </RenderIf>
+      clickToPayElement


Why these are not functional components?

Sanskar2001 · 2025-09-04T09:36:52Z

src/PaymentElement.res

+    if displayMergedSavedMethods && selectedOption == "saved_methods" {
+      setShowPaymentMethodsScreen(_ => false)
+    } else if displayMergedSavedMethods {
+      setShowPaymentMethodsScreen(_ => true)
+    }


Suggested change

if displayMergedSavedMethods && selectedOption == "saved_methods" {

setShowPaymentMethodsScreen(_ => false)

} else if displayMergedSavedMethods {

setShowPaymentMethodsScreen(_ => true)

}

let showScreen =

displayMergedSavedMethods && selectedOption !== "saved_methods";

setShowPaymentMethodsScreen(showScreen);

This would not be equivalent to the previous case

Added this

if displayMergedSavedMethods { setShowPaymentMethodsScreen(_ => selectedOption != "saved_methods") }

Sanskar2001

please check the comments

Sanskar2001 · 2025-09-04T13:43:47Z

src/Components/ShowMoreButton.res

+      style={
+        fontSize: "14px",
+        float: "left",
+        fontWeight: "500",
+        width: "fit-content",
+        color: themeObj.colorPrimary,
+      }


why inlining styling is required here?

Sanskar2001 · 2025-09-08T09:19:01Z

src/Components/SavedMethods.res

  let enableSavedPaymentShimmer = React.useMemo(() => {
    savedCardlength === 0 &&
    !showPaymentMethodsScreen &&
-    (loadSavedCards === PaymentType.LoadingSavedCards || clickToPayConfig.isReady->Option.isNone)
-  }, (savedCardlength, loadSavedCards, showPaymentMethodsScreen, clickToPayConfig.isReady))
+    (loadSavedCards === PaymentType.LoadingSavedCards || clickToPayConfig.isReady->Option.isNone) &&
+    !displayMergedSavedMethods
+  }, (
+    savedCardlength,
+    loadSavedCards,
+    showPaymentMethodsScreen,
+    clickToPayConfig.isReady,
+    displayMergedSavedMethods,
+  ))


Try to simplify this condition for better readability.

PritishBudhiraja · 2025-09-08T09:27:51Z

src/PaymentElement.res

    | _ =>
      <RenderIf
-        condition={!displaySavedPaymentMethods &&
+        condition={(!displaySavedPaymentMethods ||


can we simplify this? It's too many conditions inside a prop - not readable

PritishBudhiraja · 2025-09-08T09:27:58Z

src/PaymentElement.res

    <RenderIf
      condition={((displaySavedPaymentMethods && savedMethods->Array.length > 0) ||
-        isShowPaymentMethodsDependingOnClickToPay) && showPaymentMethodsScreen}>
+        isShowPaymentMethodsDependingOnClickToPay) &&


can we simplify this? It's too many conditions inside a prop - not readable

PritishBudhiraja · 2025-09-08T09:28:51Z

src/Components/ShowMoreButton.res

+      onClick={_ => {
+        setShowMore(_ => !showMore)
+      }}>


Suggested change

onClick={_ => {

setShowMore(_ => !showMore)

}}>

onClick={_ => setShowMore(prev => !prev) }>

feat: unified view for saved payment methods screen and payment metho…

13253ad

…ds screen

sakksham7 self-assigned this Aug 17, 2025

sakksham7 added the Ready for Review PR with label Ready for Review should only be reviewed. label Aug 17, 2025

sakksham7 requested review from AbhishekChorotiya, ArushKapoorJuspay, aritro2002 and seekshiva as code owners August 17, 2025 18:21

sakksham7 temporarily deployed to Testing August 17, 2025 18:21 — with GitHub Actions Inactive

sakksham7 changed the title ~~feat: unified view for saved payment methods screen and payment metho…~~ feat: unified view for saved and more payment methods screen Aug 17, 2025

sakksham7 linked an issue Aug 17, 2025 that may be closed by this pull request

Combined view for Saved Payment methods screen and payment methods screen #1193

Open

aritro2002 previously approved these changes Aug 20, 2025

View reviewed changes

AbhishekChorotiya previously approved these changes Aug 20, 2025

View reviewed changes

feat: added show more option and changed prop format

656a1b5

sakksham7 dismissed stale reviews from AbhishekChorotiya and aritro2002 via 656a1b5 August 25, 2025 19:26

sakksham7 had a problem deploying to Testing August 25, 2025 19:26 — with GitHub Actions Failure

refactor: renamed variables and file

958bb4b

sakksham7 had a problem deploying to Testing August 28, 2025 08:02 — with GitHub Actions Failure

aritro2002 previously approved these changes Aug 28, 2025

View reviewed changes

sakksham7 removed a link to an issue Aug 28, 2025

Combined view for Saved Payment methods screen and payment methods screen #1193

Open

sakksham7 linked an issue Aug 28, 2025 that may be closed by this pull request

Combined view for Saved Payment methods screen and payment methods screen #1193

Open

sakksham7 removed a link to an issue Aug 28, 2025

Combined view for Saved Payment methods screen and payment methods screen #1193

Open

sakksham7 linked an issue Aug 28, 2025 that may be closed by this pull request

Combined view for Saved Payment methods screen and payment methods screen #1193

Open

AbhishekChorotiya previously approved these changes Aug 28, 2025

View reviewed changes

refactor: default value of saved card items will be 4

94d440a

sakksham7 dismissed stale reviews from AbhishekChorotiya and aritro2002 via 94d440a September 2, 2025 07:31

sakksham7 had a problem deploying to Testing September 2, 2025 07:31 — with GitHub Actions Failure

AbhishekChorotiya previously approved these changes Sep 2, 2025

View reviewed changes

refactor: added ctp and fixed shimmer and animated show down

cdcd4c0

sakksham7 dismissed AbhishekChorotiya’s stale review via cdcd4c0 September 3, 2025 00:14

sakksham7 temporarily deployed to Testing September 3, 2025 00:14 — with GitHub Actions Inactive

Sanskar2001 reviewed Sep 4, 2025

View reviewed changes

Sanskar2001 requested changes Sep 4, 2025

View reviewed changes

Sanskar2001 reviewed Sep 4, 2025

View reviewed changes

refactor: addressed comments

e39c251

sakksham7 temporarily deployed to Testing September 8, 2025 08:12 — with GitHub Actions Inactive

refactor: addressed comments

32df8c4

sakksham7 temporarily deployed to Testing September 8, 2025 08:17 — with GitHub Actions Inactive

refactor: addressed comments

9dc62be

sakksham7 deployed to Testing September 8, 2025 09:10 — with GitHub Actions Active

Sanskar2001 reviewed Sep 8, 2025

View reviewed changes

PritishBudhiraja reviewed Sep 8, 2025

View reviewed changes

refactor: refactored code and comments

1f47f30

sakksham7 had a problem deploying to Testing September 8, 2025 10:33 — with GitHub Actions Failure

feat: unified view for saved and more payment methods screen #1194

Are you sure you want to change the base?

feat: unified view for saved and more payment methods screen #1194

Uh oh!

Conversation

sakksham7 commented Aug 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Description

How did you test it?

Checklist

Uh oh!

semanticdiff-com bot commented Aug 17, 2025

Uh oh!

vsrivatsa-edinburgh commented Aug 22, 2025

Uh oh!

sakksham7 commented Aug 22, 2025

Uh oh!

github-actions bot commented Aug 28, 2025

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

github-actions bot commented Aug 28, 2025

🚫 Missing Linked Issue

✔️ How to fix this

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Sanskar2001 Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Sanskar2001 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PritishBudhiraja Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

sakksham7 commented Aug 17, 2025 •

edited

Loading

Sanskar2001 Sep 4, 2025 •

edited

Loading

PritishBudhiraja Sep 8, 2025 •

edited

Loading