Payment Methods List

​

Compact or unfolded: choose the layout

Compact list: shoppers select a method to open its form separately.

Unfolded display: forms expand directly inline for faster checkout.

​

Compact layout (default)

• The list displays payment method logos, names, and saved methods.
• The shopper taps a method to select it.
• Starting the transaction opens or mounts that method’s payment form separately to collect details, or you trigger submission from your own custom Pay button.

​

Unfolded layout

• Selecting a method expands its payment form directly inline inside the list item.
• Starting the transaction submits the already-filled inline form.
• Express wallets (Apple Pay, Google Pay, PayPal) render their native buttons directly in the row.

​

Before you start

​

Implementation

let selectedPaymentMethod: PaymentMethodSelected | null = null

const views = transaction.getPaymentMethodsViews({
    types: ['applePay', 'googlePay', 'paymentMethodList'],
    onPaymentSelected: (paymentMethod) => {
        selectedPaymentMethod = paymentMethod
    },
})

views.applePay?.mount({ elementSelector: '#apple-pay', buttonType: 'buy', buttonStyle: 'black' })
views.googlePay?.mount({ elementSelector: '#google-pay', buttonColor: 'black' })
views.paymentMethodList?.mount({ elementSelector: '#payment-list' })

// Later, when the user confirms (e.g. your Pay button):
if (selectedPaymentMethod) {
    transaction.start({ paymentMethod: selectedPaymentMethod })
}

var selectedPayment: SdkPayments.PaymentMethodSelected?

let views = transaction.getPaymentMethodsViews(
    types: [.APPLE_PAY(), .PAYMENT_METHOD_LIST],
    controller: self
)

// In your SdkPayments.PaymentListController:
func onPaymentSelected(paymentSelected: SdkPayments.PaymentMethodSelected) {
    selectedPayment = paymentSelected
}

// Later, when the user confirms (e.g. your Pay button):
if let selectedPayment {
    transaction.start(paymentSelected: selectedPayment)
}

var selectedPayment: PaymentMethodSelected? = null

val views = transaction.getPaymentMethodsViews(
    host = this,
    types = listOf(PaymentMethodType.GooglePay(), PaymentMethodType.PaymentMethodList),
    controller = this
)

// In your PaymentListController:
override fun onPaymentSelected(paymentSelected: PaymentMethodSelected) {
    selectedPayment = paymentSelected
}

// Later, when the user confirms (e.g. your Pay button):
selectedPayment?.let { transaction.start(activity = this, paymentSelected = it) }

import { YunoView, type PaymentMethodSelected, type YunoViewHandle } from '@yuno-payments/yuno-sdk-react-native';

const [listView, setListView] = useState<YunoViewHandle | null>(null);
const [selected, setSelected] = useState<PaymentMethodSelected | null>(null);

useEffect(() => {
  transaction
    .getPaymentMethodsViews([{ kind: 'PAYMENT_METHOD_LIST' }], {
      onPaymentSelected: setSelected,
    })
    .then((views) => setListView(views[0]?.view ?? null));
}, [transaction]);

// Later, when the user confirms (e.g. your Pay button):
// if (selected) transaction.start(selected);

return listView ? <YunoView view={listView} /> : null;

​

PaymentMethodType

​

Express buttons

​

PaymentListController

​

Notes

• getPaymentMethodsViews is synchronous on iOS, Android and Web. On React Native it returns a Promise.
• You can request any combination of types available on your platform in a single call.
• The PaymentMethodSelected delivered by onPaymentSelected is what you pass to Transaction.start(). See Get Started.
• Checking method availability before mounting custom lists (Web): If you build your own custom payment method selector instead of using paymentMethodList, use transaction.isPaymentMethodAvailable({ paymentMethodType }) to verify whether express wallets (such as APPLE_PAY or GOOGLE_PAY) or specific methods are eligible to render on the customer’s current device and checkout session before displaying them.
• On Web, once a payment on the session reaches a final status, the SDK removes the list and marks the checkout session as finished. start(), submit(), and mount() on that session then throw. To pay again, create a new checkout session and a new Transaction, or call transaction.updateCheckoutSession() with the new session, then mount the list again.

​

Related

• PaymentMethodSelected. The object you receive and pass to start().
• Get Started. Full integration walkthrough.