PaymentMethodComponent

Last updated: September 2, 2026


1/*
2 * Payment component interface
3 */
4public interface PaymentMethodComponent : AvailabilityAware, Validatable, Tokenizable<Unit> {
5  /*
6   * The name of the payment method
7   */
8  public val name: PaymentMethodName
9
10  /*
11   * Render the payment method in Composable UI.
12   */
13  @Composable
14  public fun Render()
15
16  /**
17   * Render the payment method in imperative XML/Dynamic views layouts
18   *
19   * @param container - Provide a view container to add the payment method
20   */
21  public fun provideView(container: View): View
22
23  /**
24    * Allow to submit the payment for the payment method.
25    * The payment submission only works for card payments. All other payment methods return `MethodNotSupportedError`.
26    */
27  public suspend fun submit()
28
29  /**
30    * Checks whether the pay button is required for the payment method's state.
31    */
32  public fun isPayButtonRequired(): Boolean
33}

isAvailable(), isValid(), and tokenize() moved out of PaymentMethodComponent and into three composable interfaces, each extending BaseComponent, so a standalone component such as the CVV component can be tokenizable without being a payment method:


1/**
2 * Payment component interface.
3 */
4@CkoPublicApi
5public interface PaymentMethodComponent : AvailabilityAware, Validatable, Tokenizable<Unit> {
6    /**
7     * Submits the payment for the payment method.
8     */
9    public suspend fun submit()
10
11    /**
12     * Check if the merchant's pay button is currently required for this payment method.
13     */
14    public fun isPayButtonRequired(): Boolean = true
15
16    /**
17     * Update the payment method component with new details.
18     *
19     * @param updateDetails The details to update the component with.
20     *
21     * @throws CheckoutError if the update fails.
22     */
23    @Throws(CheckoutError::class)
24    public fun update(updateDetails: UpdateDetails)
25}

PaymentMethodComponent still exposes isAvailable(), isValid(), and tokenize() in the same way, and tokenize() still returns Unit for payment methods, so existing call sites keep compiling unchanged. The CVV component implements TokenizableComponent<CardCvvTokenizeResult> instead, so tokenize() returns CardCvvTokenizeResult with no cast required.

Checks whether the payment method is available.

Note

For the Google Pay payment method, call isAvailable() before Render() or provideView().


1googlePayComponent.isAvailable()

Renders Flow component in a Compose view.


1flowComponent.Render()

Renders the component in a View container.


1flowComponent.provideView(container)

Tokenizes the selected component, if supported.

For payment components, use the onTokenized() callback to retrieve the generated token and process the token details as required.


1flowComponent.tokenize()
2
3cardComponent.tokenize()

For the standalone CVV component, tokenize() returns the token directly instead:


1when (val result = cvvComponent.tokenize()) {
2  is CardCvvTokenizeResult.Success ->
3    Log.d("cvv", result.token)
4  is CardCvvTokenizeResult.Failure ->
5    Log.e("cvv", result.error.code.toString())
6}

Submits the payment for the payment method when using the custom pay button. The payment submission only works for card payments. All other payment methods return MethodNotSupportedError.


1flowComponent.submit()
2
3cardComponent.submit()

Checks whether the payment method validation is successful.

The payment validation only works for card payments. All other payment methods return false.


1flowComponent.isValid()
2
3cardComponent.isValid()

Checks whether the pay button is required for the payment method's current state. Defaults to true.

Returns false during intermediate steps of multi-step payment methods. For example, when stc pay requests the customer's phone number.

If you render your own custom pay button, call this method in the onReady and onChange callbacks to define whether to show it.


1flowComponent.isPayButtonRequired()
2
3stcPayComponent.isPayButtonRequired()

Applies the changes specified in UpdateDetails to the Flow for Mobile UI. For example, to modify the payment amount displayed to the customer, provide a new amount value in UpdateDetails, in minor currency units.

Information

This only modifies the UI. To update the payment session with your changes, use the handleSubmit callback.


1flowComponent.update(updateDetails)
2
3cardComponent.update(updateDetails)

Methods

isAvailable()

Note

Render()

provideView()

tokenize()

submit()

isValid

isPayButtonRequired()

update(updateDetails: UpdateDetails)

Information