Payment Options Display Mode

The SDK provides flexible customization for how payment options are displayed. It supports the following optional parameters:

• mode: Determines the layout style—either BottomSheet (default) or List.

  • BottomSheet: This is the default layout used in previous SDK versions.

  • List: A new layout that shows payment options in a vertical list placed above the Payment Details section and the Pay button.

• visibleItemsCount: Sets how many payment options are shown at once (default is 5). Applicable only in List mode.

  • This unsigned integer controls how many payment options are visible simultaneously in List mode.

  • If the number of available options is less than visibleItemsCount, the list automatically resizes to fit the actual number of options.

Passing 0 will cause the SDK to throw an exception. This exception must be caught and handled by the parent application.

• defaultSelectedPgCode: Specifies a payment gateway (PG) code to be pre-selected by default.

  • This field accepts a PG code to auto-select a specific payment option.

  • If the SDK finds a payment method matching the provided PG code, it will be selected by default.

  • If no match is found, no option is selected.

All of these parameters are optional and are demonstrated in the following figures.

Android

The List The List mode is displayed as illustrated in the figure below

A view with a selected payment option

A view with an expanded listExpanded list view

Here is a code sample:

val paymentOptionsDisplayMode =
  if (showPaymentOptionsList) Checkout.PaymentOptionsDisplaySettings.PaymentOptionsDisplayMode.List(
    visiblePaymentItemsCount = paymentOptionsListCount
  ) else Checkout.PaymentOptionsDisplaySettings.PaymentOptionsDisplayMode.BottomSheet
val paymentOptionsDisplaySettings = Checkout.PaymentOptionsDisplaySettings(
  mode = paymentOptionsDisplayMode,
  defaultSelectedPgCode = defaultSelectedPgCode
)

and passed to Checkout.init builder class via the following object:

.paymentOptionsDisplaySettings(paymentOptionsDisplaySettings)

iOS

The List mode looks like the following

Selected item view

Expanded list view

Here is a code sample:

let paymentOptionsDisplaySettings: PaymentOptionsDisplaySettings =
  if arguments.showPaymentOptionsList {
    PaymentOptionsDisplaySettings(
      mode: .list,
      visibleItemsCount: UInt(arguments.paymentOptionsListCount),
      defaultSelectedPgCode: arguments.defaultSelectedPgCode
    )
  } else {
    PaymentOptionsDisplaySettings(
      mode: .bottomSheet,
      defaultSelectedPgCode: arguments.defaultSelectedPgCode
    )
  }

and passed to Checkout.init via the following object:

displaySettings:paymentOptionsDisplaySettings

To see the full function call, please refer the code snippet in the Ottu SDK - Flutter | Example section.