feat: Added support for different Layout types by Pradeep-kumar1202 · Pull Request #78 · juspay/hyperswitch-sdk-android

Pradeep-kumar1202 · 2026-02-03T02:51:55Z

Description

Adds native Android API support for structured layout configuration in the Payment Sheet. Merchants can now customize the payment UI layout type, arrangement, and saved method grouping behavior through a typed Kotlin API.

What's New

PaymentSheet.Layout — Sealed class with Tabs and Accordion variants
PaymentMethodsArrangement — Enum to switch between Default (horizontal scroll) and Grid layout
GroupingBehavior — Controls whether saved methods are grouped by payment type or shown inline
SavedMethodCustomization — Wraps grouping behavior config for saved payment methods
Accordion-specific options — spacedAccordionItems, maxAccordionItems, radios

Key Changes

PaymentSheet.kt
- Added Layout sealed class
- Added PaymentMethodsArrangement enum
- Added GroupingBehavior
- Added SavedMethodCustomization with builder support
- Wired layout config into Appearance.Configuration
MainActivity.kt
- Updated demo to use PaymentSheet.Layout.Tabs() for validation

Test Cases

Screen recordings are attached for all scenarios below.

Tabs Layout

#	Config	Description
1	`Tabs + groupByPaymentMethods: true`	Saved methods grouped by payment type
5	`Tabs()`	Default tabs, no customization
10	`Tabs + PaymentMethodsArrangement.Grid`	Payment methods in grid arrangement
12	`Tabs + groupByPaymentMethods: false`	Saved methods shown inline (not grouped)

Accordion Layout

#	Config	Description
2	`Accordion + spacedAccordionItems: true + groupByPaymentMethods: true`	Spaced accordion, saved methods grouped
4	`Accordion()`	Default accordion, no customization
6	`Accordion + spacedAccordionItems: true`	Spaced accordion, no saved method customization
7	`Accordion + spacedAccordionItems: true + maxAccordionItems: 5`	Capped at 5 visible items
8	`Accordion + spacedAccordionItems: true + maxAccordionItems: 5 + radios: true`	Radio buttons, capped at 5
9	`Accordion + radios: true + spacedAccordionItems: true + maxAccordionItems: 3`	Radio buttons, capped at 3
11	`Accordion + spacedAccordionItems: true + groupByPaymentMethods: false`	Spaced accordion, saved methods inline

Test Cases

Description

Adds native Android API support for structured layout configuration in the Payment Sheet. Merchants can now customize the payment UI layout type, arrangement, and saved method grouping behavior through a typed Kotlin API.

What's New

PaymentSheet.Layout — Sealed class with Tabs and Accordion variants
PaymentMethodsArrangement — Enum to switch between Default (horizontal scroll) and Grid layout
GroupingBehavior — Controls whether saved methods are grouped by payment type or shown inline
SavedMethodCustomization — Wraps grouping behavior config for saved payment methods
Accordion-specific options — spacedAccordionItems, maxAccordionItems, radios

Key Changes

PaymentSheet.kt
- Added Layout sealed class
- Added PaymentMethodsArrangement enum
- Added GroupingBehavior
- Added SavedMethodCustomization with builder support
- Wired layout config into Appearance.Configuration
MainActivity.kt
- Updated demo to use PaymentSheet.Layout.Tabs() for validation

Test Cases

Screen recordings are attached for all scenarios below.

#	Layout	Scenario
1	Tabs	Saved methods grouped by payment methods
2	Accordion	Saved methods grouped by payment methods
3	Accordion	Same as above with `spacedAccordionItems`
4	Accordion	Default accordion
5	Tabs	Default tabs
6	Accordion	Spaced accordion items
7	Accordion	Spaced accordion with `maxAccordionItems = 5`
8	Accordion	Radio buttons with `maxAccordionItems = 5`
9	Accordion	Radio buttons with `maxAccordionItems = 3`
10	Tabs	Grid payment methods arrangement
11	Accordion	Saved methods shown inline
12	Tabs	Saved methods shown inline

Layout Test Suite for Android

1. Tabs — Saved methods grouped by payment methods

val layout = PaymentSheet.Layout.Tabs(
    savedMethodCustomization = PaymentSheet.SavedMethodCustomization(
        groupingBehavior = PaymentSheet.GroupingBehavior(
            displayInSeparateScreen = false,
            groupByPaymentMethods = true
        )
    )
)

2. Accordion — Saved methods grouped by payment methods

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true,
    savedMethodCustomization = PaymentSheet.SavedMethodCustomization(
        groupingBehavior = PaymentSheet.GroupingBehavior(
            displayInSeparateScreen = false,
            groupByPaymentMethods = true
        )
    )
)

3. Accordion — Same as above with `spacedAccordionItems`

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true,
    savedMethodCustomization = PaymentSheet.SavedMethodCustomization(
        groupingBehavior = PaymentSheet.GroupingBehavior(
            displayInSeparateScreen = false,
            groupByPaymentMethods = true
        )
    )
)

4. Accordion — Default

val layout = PaymentSheet.Layout.Accordion()

5. Tabs — Default

val layout = PaymentSheet.Layout.Tabs()

6. Accordion — Spaced items

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true
)

7. Accordion — Spaced items with max 5 visible items

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true,
    maxAccordionItems = 5
)

8. Accordion — Radio buttons with max 5 visible items

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true,
    maxAccordionItems = 5,
    radios = true
)

9. Accordion — Radio buttons with max 3 visible items

val layout = PaymentSheet.Layout.Accordion(
    radios = true,
    spacedAccordionItems = true,
    maxAccordionItems = 3
)

10. Tabs — Grid payment methods arrangement

val layout = PaymentSheet.Layout.Tabs(
    paymentMethodsArrangement = PaymentSheet.PaymentMethodsArrangement.Grid
)

11. Accordion — Saved methods shown inline

val layout = PaymentSheet.Layout.Accordion(
    spacedAccordionItems = true,
    savedMethodCustomization = PaymentSheet.SavedMethodCustomization(
        groupingBehavior = PaymentSheet.GroupingBehavior(
            displayInSeparateScreen = false,
            groupByPaymentMethods = false
        )
    )
)

12. Tabs — Saved methods shown inline

val layout = PaymentSheet.Layout.Tabs(
    savedMethodCustomization = PaymentSheet.SavedMethodCustomization(
        groupingBehavior = PaymentSheet.GroupingBehavior(
            displayInSeparateScreen = false,
            groupByPaymentMethods = false
        )
    )
)

Screenrecording

tabs.groupbeha.displayinsepisfalseandgroupbypmisfalse.mov

accord.groupbeha.displayinsepisfalseandgroupbypmisfalse.mov

Accor.spacedisTrue+radiosisTrue+maxItemsIs3.mov

Tabs-Grid.mov

Accor.spacedItems.+maxItemsIs5+radiosisTrue.mov

Accor.spacedItems.+maxItemsIs5.mov

Accor.spacedItems.mov

justTabs.mov

justAccordion.mov

Accordion.groupingBehaviour.+spacedAcc.mov

Accordion.groupingBehaviour.mov

Tabs.groupingBehavior.mov

ChiragKV-Juspay · 2026-02-16T10:16:35Z

            surface = "#F5F8F9".toColorInt(),
        )

+        val layout = PaymentSheet.Layout(


change this structure to expose options for customizing layouts like spacedAcccordion only when layout is accordion

ChiragKV-Juspay · 2026-03-13T11:01:42Z

            fun locale(locale: String) = apply { this.locale = locale }
+            fun layout(layout: Layout) = apply { this.layout = layout }
+
+            fun build() = Appearance(


why is this needed?

…flag

ChiragKV-Juspay reviewed Feb 16, 2026

View reviewed changes

ChiragKV-Juspay reviewed Mar 13, 2026

View reviewed changes

Pradeep Kumar and others added 3 commits March 20, 2026 16:31

feat: added support for the layout types

6f1d5ed

chore: removed the spacedAccordion type but functionality exists via …

a59c75d

…flag

feat: Layout structure change from common to layout specific

6b61d41

Pradeep-kumar1202 force-pushed the layout_type branch from 8684930 to 6b61d41 Compare March 22, 2026 13:01

Pradeep-kumar1202 added 2 commits March 22, 2026 18:42

fix: removed the unnecessary builder

8c1bc7d

chore: Added GroupingBehavior type in layout type

59a3c73

ChiragKV-Juspay approved these changes Mar 30, 2026

View reviewed changes

sh-iv-am force-pushed the main branch 4 times, most recently from 659def4 to 745466c Compare April 27, 2026 14:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added support for different Layout types#78

feat: Added support for different Layout types#78
Pradeep-kumar1202 wants to merge 5 commits into
mainfrom
layout_type

Pradeep-kumar1202 commented Feb 3, 2026 •

edited

Loading

Uh oh!

ChiragKV-Juspay Feb 16, 2026

Uh oh!

ChiragKV-Juspay Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Pradeep-kumar1202 commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

What's New

Key Changes

Test Cases

Tabs Layout

Accordion Layout

Test Cases

Description

What's New

Key Changes

Test Cases

Layout Test Suite for Android

1. Tabs — Saved methods grouped by payment methods

2. Accordion — Saved methods grouped by payment methods

3. Accordion — Same as above with spacedAccordionItems

4. Accordion — Default

5. Tabs — Default

6. Accordion — Spaced items

7. Accordion — Spaced items with max 5 visible items

8. Accordion — Radio buttons with max 5 visible items

9. Accordion — Radio buttons with max 3 visible items

10. Tabs — Grid payment methods arrangement

11. Accordion — Saved methods shown inline

12. Tabs — Saved methods shown inline

Screenrecording

Uh oh!

ChiragKV-Juspay Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

ChiragKV-Juspay Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Pradeep-kumar1202 commented Feb 3, 2026 •

edited

Loading

3. Accordion — Same as above with `spacedAccordionItems`