CardView + CardComponent opening wrong view

[katajona]

Describe the bug
When I have stored payment methods and normal payment methods inside the same custom screen and the user clicks first on stored payment then closes the CardView and opens the normal payment, the view is still showing the details from the previous card and only asking for CVC. It is the same case when the user first clicks normal payment and then the stored then the view is not filled and not asking only for the CVC. It is probably caused by using the same owner.

To Reproduce
Steps to reproduce the behavior:

1. Go to a page with stored payment options + normal payment option
2. Click on stored payment, that should display the CardView
3. Close it
4. Open normal payment method and display the CardView
5. Only CVC field can be filled out

Expected behavior
All the fieleds can be filled out.

Smartphone (please complete the following information):

• Device: all
• OS: API 31 but probably all
• Version 4.5.0

Additional context
This is how I call it:

val cardComponent = if (isStoredPaymentMethod) {
    CardComponent.PROVIDER.get(
        this,
        storedPaymentMethod,
        cardConfiguration
    )
} else {
    CardComponent.PROVIDER.get(
        this,
        paymentMethod,
        cardConfiguration
    )
}
cardComponent.observe(this) {}
cardView.attach(cardComponent, this)

[jreij]

Thanks for reaching out. This is a known limitation in the components. Internally the CardComponent is just a ViewModel that gets attached to the ViewModelStoreOwner you pass in the provider, so calling the CardComponent.PROVIDER.get multiples times in the same lifecycle will not recreate a new component but always return the first one.

The cleanest workaround IMO is to create a separate fragment for the component so that it always gets attached to a new lifecycle. Alternatively you can try to create a different ViewModelStoreOwner for each component using the other PROVIDER.get function:

CardComponent.PROVIDER.get(
    savedStateRegistryOwner,
    viewModelStoreOwner,
    cardPaymentMethod,
    cardConfiguration,
    defaultArgs
)

[katajona]

Having a separate fragment is okay as a workaround, but as soon as we would like to switch to compose without fragments this will fail.

[jreij]

Yes indeed it won't work with Compose, but maybe the ViewModelStoreOwner workaround will. In all cases we are thinking of redesigning components to make it easier to do things like this but I don't have any timeline on that since it's quite a big fundamental change.