[FEATURE] Convert ScrollView Tab Buttons to 2 Buttons and 1 Dropdown

[manideepk90]

Description

The Hyperswitch SDK handles the frontend user experience for payment processes, including how users select their payment method. Currently, when a user opens the payment sheet, multiple payment methods are shown in a tab layout. This layout allows users to scroll through various options, but the scrollable tabs can make the selection process a bit frustrating and overwhelming, especially with too many options.

To simplify the experience and reduce user frustration, we propose replacing the scrollable tab view with two buttons for the most common payment methods and a dropdown menu for less frequently used options. This streamlined approach will make it easier for users to quickly select their preferred payment method without needing to scroll through tabs. The change keeps the interface clean and intuitive, enhancing the overall payment experience while still ensuring that all payment options are easily accessible in the dropdown.

The solution must ensure backward compatibility with the previous tab-based design.

Getting started

1. Get familiar with ReScript.
2. Check the README.md for project structure and setup instructions.
3. To setup locally, follow these steps

#  Clone repository
cd hyperswitch-client-core
git submodule update --init --recursive
yarn install
yarn run server     # This starts the mock server
yarn run re:start   # In another terminal

Expected Behavior:

The tab buttons should be replaced by at most 2 visible buttons and a dropdown for additional items. The dropdown should be easy to interact with and allow users to select options that were previously available as tabs. The solution should not disrupt existing functionality.

Actual Behavior:

The current implementation shows all items as individual tabs in a ScrollView, which can become cluttered and hard to navigate.

Tasks:

Modify ScrollView Tab Buttons:

Convert the current ScrollView tab buttons to display a maximum of 2 buttons. Implement a dropdown menu to handle additional options that were previously displayed as tabs.

Dropdown Functionality:

Users should be able to select items from the dropdown that replaces the tabs. Ensure the dropdown is easy to navigate and user-friendly.

Ensure Backward Compatibility:

Ensure that the new dropdown solution works seamlessly with existing implementations. The update should not break functionality for users relying on the tab-based view.

Testing:

Test the functionality thoroughly to ensure that the dropdown behaves as expected and the user experience remains smooth. Ensure backward compatibility testing to verify that previous users are not affected.

Contribution Guidelines:

• Fork the repository and create a new branch for your work.
• Write clean, well-documented code with clear commit messages.
• Make sure to follow our coding standards and contribution guidelines.

Submission Process:

• Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
• Once assigned, submit a pull request (PR).
• Maintainers will review and provide feedback, if any.
• Maintainers can unassign issues due to inactivity, read more here.
• For this issue, please submit a PR on https://github.com/juspay/hyperswitch-client-core repo, and link it to the issue.

Refer here for Terms and conditions for the contest.

If you have any questions or need help getting started, feel free to ask in the comments!

[Manav958]

Hi @PritishBudhiraja , @manideepk90
I can solve this issue under Hacktober Fest Tag

According to my understanding we require to change the Scroll View to a Dropdown . Please correct me if I am wrong Thankyou

[manideepk90]

yes, we need to have atmost 2 tab buttons and 3 button should be drop down, which will have all extra opens. you can refer images

[Manav958]

Alright ,if you find me suitable could you assign me this issue?

[gorakhnathy7]

Hey @Manav958 Assigned the issue to you, thanks for your interest.

[Manav958]

Hi @gorakhnathy7 a quick question i have followed all the steps to run the "hyperswitch-client-core" on my local but it shows errors

would you mind telling me where to exactly do the changes and first of all how to start the webapp locally Should i go for docker build?

it's my first time contribution. please help me out

[manideepk90]

Hi @Manav958, can you describe the error? what you might be experiencing Feel free to connect in the community for more support.

[Manav958]

The main problem is frontend React is giving problems in setting up when i am trying the web version

would you guide me ? the backend is working i tried to make a post request and it shows in my dashboard

[manideepk90]

To work on the web version, you should run yarn web and yarn server together. After that, open DemoAppIndex.html located at ./reactNativeDemo/DemoAppIndex.html in your browser. You're now ready to start working on the web version.

[Manav958]

HI @manideepk90 Yes i tried that and it shows a blank screen like this one attached

[manideepk90]

If you're utilizing your own publishable key and secret key, you should add dummy test connectors in the Hyperswitch.io dashboard where the keys were generated.

[Manav958]

Ok Thanks sir Now i can see the issue I will resolve it in the web version This is what we need right?

[manideepk90]

you need to do changes in src/, which automatically appear all 3 variants.

[Manav958]

Ok sir Doing it right away!

[Manav958]

Hi @manideepk90 just to make sure The file to be worked on is Types.res or the PaymentMethodListType.res in the /src folder??

Rescript is not allowing me to use CustomPicker due to circular dependency any other way round?

[Manav958]

Hi, @manideepk90 , @gorakhnathy7 i have completed the feature i have attached a small video to demonstrate

https://github.com/user-attachments/assets/f5e1b0e1-cdd7-4a91-bfaf-670e8350275a

Should I create a PR?

[Manav958]

Or there is another Type I think this is a Good way to execute this as other way might hamper with the accessibility. See this video

https://github.com/user-attachments/assets/e6d6290c-8859-4de5-835f-c9becc12c896

Please confirm So that I can Create a PR under Hacktoberfest tag

[manideepk90]

We require a drop-down button rather than a more/less button. Current Behavior

https://github.com/user-attachments/assets/1ecb89e3-7adf-4665-9b0e-c68e7adb21ee

Expected Behavior

https://github.com/user-attachments/assets/c9558a5d-4e43-402d-8212-6e02323fad41

Ensure there are at most two buttons and one dropdown menu at the end.

[Manav958]

Hi @manideepk90 Sir, I have The Demo See This

https://github.com/user-attachments/assets/7f96136d-0238-463d-bde1-371a09de1b67

Can I Create a PR now? Its a humble request sir because i have college exams from Tuesday. Thankyou

[Manav958]

hi @manideepk90 , @gorakhnathy7 please inform me about this .

[manideepk90]

Hi @Manav958, that looks awesome, you are almost near to it, can you make it more attractive

[Manav958]

Hi @manideepk90 Sir as mentioned earlier, currently my exams are in the swing I am trying to take out as much time possible for this.

i will come up with minor upgrades, hope that might do the thing.

[Manav958]

Hi @manideepk90 , @gorakhnathy7 sir I have the updates hope you like it. If you do Please allow me to create PR

https://github.com/user-attachments/assets/6b7f188c-382f-428b-8b66-9f07124c0880

Thankyou Hope you Like this.

[manideepk90]

just add a prop like scrollableTabView, to have backward compactability to choose between old and new one

[Manav958]

Did you mean Backward compatibility of the new and old code?

I don't understand the meaning can you elaborate it please.

[manideepk90]

If users prefer scrollable tabs over dropdown menus, we can introduce a prop called 'isScrollTabs' with a default value of true. This will display the tabs as scrollable. If this prop is set to false, then a dropdown button will be shown instead.

[Manav958]

Oh okay got it Thanks will show you demo in a while.

[Manav958]

Hi @manideepk90 , @gorakhnathy7 I have completed the changes suggested

here is the demo.

https://github.com/user-attachments/assets/8a8410af-5d86-4014-8481-a3ddb1cd67bc

Just out of curiosity.(Completely Unrelated Questions) I read about the Hyperswitch on the internet. I have a couple of questions

1. It was quoted "Linux of Payments" so if it is free then how revenue is generated to keep it alive?
2. Do i get a Shirt for submitting this PR? (I read it on the site)
3. Do you have any opportunity available for Fullstack or Backend Intern?

[manideepk90]

Hello @Manav958, we regret to inform you that we cannot proceed with merging your pull request at this time, as it does not meet the necessary UI specifications. We kindly ask that you revise your submission to better align with the UI guidelines provided. Doing so will allow us to move forward with the review process. We value your contribution and effort; however, adherence to our UI standards is essential. We suggest utilizing the existing style framework and incorporating a React Native dropdown, avoiding the use of third-party styles. Thank you for your understanding.

[Manav958]

Do you mean the style of the button? Shapes and color..?

If you could mention the exact need it would be easier for me to apply.

[manideepk90]

Consider utilizing the current tab style that includes an icon, as opposed to using full text. Upon clicking, it should reveal a dropdown menu; please see the previous comment for the style reference. You are on the right track with this approach.

[manideepk90]

https://github.com/juspay/hyperswitch/issues/6229#issuecomment-2407791285 refer this style. You can extend the styles from TabView.

[Manav958]

Hi @manideepk90 sir I Will try to replicate the given design in video

Its Just about the UI right? The functions will remain the same i hope.

1. I will be Using Normal CSS not any 3rd party styles 2 . Keep the features same just change the design

Is that Okay? Also Please Tell me where to Place the backward Compatibility Button.

[gorakhnathy7]

It was quoted "Linux of Payments" so if it is free then how revenue is generated to keep it alive?

• It's free for anyone to self-host and use, but we do have large enterprise clients who choose to pay for the services. Do i get a Shirt for submitting this PR? (I read it on the site)
• Yes, as a token of appreciation for your efforts in contributing, you will get a t-shirt for a merged PR. Read more Do you have any opportunity available for Fullstack or Backend Intern?
• You can keep a check on the careers portal for this.

[Manav958]

@manideepk90 Sir, I have replicated the design Hoping this might work

It works just as shown in the video

[Manav958]

It was quoted "Linux of Payments" so if it is free then how revenue is generated to keep it alive?

• It's free for anyone to self-host and use, but we do have large enterprise clients who choose to pay for the services.

Do i get a Shirt for submitting this PR? (I read it on the site)

• Yes, as a token of appreciation for your efforts in contributing, you will get a t-shirt for a merged PR. Read more

Do you have any opportunity available for Fullstack or Backend Intern?

• You can keep a check on the careers portal for this.

Thankyou for this @gorakhnathy7 sir

[manideepk90]

Hi @manideepk90 sir I Will try to replicate the given design in video

Its Just about the UI right? The functions will remain the same i hope.

1. I will be Using Normal CSS not any 3rd party styles 2 . Keep the features same just change the design

Is that Okay? Also Please Tell me where to Place the backward Compatibility Button.

Actually, there's no need to add a button; you need to add prop for the tab component.

[Manav958]

Ok @manideepk90 sir Then what will be trigger to toggle for the user?

Like if the person wants to see full list How to trigger the toggle

My idea: Clicking on the second payment method can trigger it

Please suggest.

By the way are you satisfied with the new drop-down design? I attached a picture above.

[manideepk90]

The design is clear and aesthetically pleasing. The user interface will remain unaffected by style changes, as the merchant will transmit data through the appearance object. This approach provides merchants with flexible options.

[Manav958]

Hi @manideepk90 sir All the features are completed

1. The Design is matching
2. i have passed a prop in order to handle the toggle between drop down function and full list view

Should i start a Pull Request?

[Manav958]

@manideepk90 sir , @gorakhnathy7 sir Please tell me what should I do further .

[manideepk90]

Yes @Manav958, you may create a pull request for this issue.

[Manav958]

@manideepk90 sir i have created a PR . Thankyou