Cards & Wallets · Mobile SDK · UI Components

Saved Cards

A component to display saved cards and allow the user to select one. If the user selects a card, the CV2 field is displayed.

Parameters

Parameter	Description
`modifier`	The modifier to be applied to the layout.
`onCardSelected`	The callback called when a card is selected. The boolean returns true when no saved card is selected.
`tryToUseDefaultCard`	If true, the default saved card is selected automatically.

Example usage

Compose Multiplatform

Kotlin

SavedCards(
  modifier = Modifier,
  tryToUseDefaultCard = true,
  onCardSelected = { isNewCard -> },
)

Android View

XML

<com.accesspaysuite.mobilesdk.ui.save.SavedCardsView
  android:id="@+id/savedCards"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

Kotlin

val savedCards = findViewById<SavedCardsView>(R.id.savedCards)
savedCards.init(state = SavedCardsState())

iOS

Create the controller representable

Swift

import SwiftUI
import mobilesdk

struct SavedCardsControllerRepresentable: UIViewControllerRepresentable {

  @Binding var state: SavedCardsState

  init(state: Binding<SavedCardsState>) {
      self._state = state
  }

  func makeUIViewController(context: Context) -> UIViewController {
      return SavedCardsController().make()
  }

  func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
      SavedCardsController().update(state: state)
  }
}

Create the SavedCards view

Swift

import SwiftUI
import mobilesdk

struct SavedCards: View {

  @Binding var state: SavedCardsState

  init(state: Binding<SavedCardsState>) {
      self._state = state
  }

  var body: some View {
      SavedCardsControllerRepresentable(state: $state)
          .ignoresSafeArea(.keyboard)
          .onTapGesture {
              UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
          }
          .frame(height: 60)
  }
}

Use the SavedCards view

Swift

import SwiftUI
import mobilesdk

struct PaymentView: View {

  @State private var state = SavedCardsState()

  var body: some View {
      SavedCards(
          state: $state
      )
  }
}

Guidelines

While using the CardInput or CardInputSlim component together with Saved Cards, apply the following guidelines.

User is a GUEST

The user is not logged in and cannot save cards for future transactions.

When to handle it

When you know that you are opening a guest session
When PaymentProcessor.canSaveCards returns false. Make sure you access canSaveCards after the payment initiation.

Default behaviour

The SavedCards component is hidden by default; no action is required from your side.
The CardInput/CardInputSlim component is visible all the time.

Required actions

The Save Card switch/box MUST be hidden on your side (if you are using a custom switch, which is recommended).

User is REGISTERED

The user is logged in and can use the save cards function.

When to handle it

When you know that you are opening a registered session
When PaymentProcessor.canSaveCards returns true. Make sure you access canSaveCards after the payment initiation.

Default behaviour

The SavedCards component is visible by default; no action is required from your side.
The CardInput/CardInputSlim component is visible all the time.

Required actions

The Save Card switch/box MUST be visible on your side (if you are using a custom switch, which is recommended).

User is REGISTERED and selects ‘Use another card’

When to handle it

When you know that you are opening a registered session
When PaymentProcessor.canSaveCards returns true. Make sure you access canSaveCards after the payment initiation.
When the onCardSelected lambda returns true

Kotlin

SavedCards(
  modifier = Modifier.padding(16.dp),
  tryToUseDefaultCard = true,
  onCardSelected = { useNewCard ->
      // useNewCard is a boolean value.
      // When true, the user requests to input a new card.
      // When false, the user requests to use a saved card.
      showCardInput = useNewCard
  }
)

Default behaviour

The SavedCards component is visible.
The CardInput/CardInputSlim component is visible.

Required actions

The Save Card switch/box MUST be visible on your side.

User is REGISTERED and selects a saved card

When to handle it

When you know that you are opening a registered session
When PaymentProcessor.canSaveCards returns true. Make sure you access canSaveCards after the payment initiation.
When the onCardSelected lambda returns false

Kotlin

SavedCards(
  modifier = Modifier.padding(16.dp),
  tryToUseDefaultCard = true,
  onCardSelected = { useNewCard ->
      // useNewCard is a boolean value.
      // When true, the user requests to input a new card.
      // When false, the user requests to use a saved card.
      showCardInput = useNewCard
  }
)

Default behaviour

The SavedCards component is visible.
The CardInput/CardInputSlim component is visible.

Required actions

The Save Card switch/box MUST NOT be visible.
The CardInput/CardInputSlim MUST NOT be visible.

Make sure to hide the respective components when the criteria are met.