Developer Documents

Component to display saved cards and allow the user to select one. If the user selects a card, the CV2 field will be displayed.

Parameters

Example Usage

Compose Multiplatform

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

Android View

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

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

iOS

Create the Controller Representable

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

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

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 the CardInputSlim component and the Saved Cards component, you should apply the following guidelines:

User is GUEST

It is not logged in and it cannot save cards for future transactions.

When to handle it?

• When you know that you are opening a guest session
• OR when PaymentProcessor.canSaveCards returns false
  Make sure you’re accessing the canSaveCards value after the payment initiation

Default Behavior

• The SavedCards Component will be hidden by default; there’s no action required from your side.
• The CardInput/CardInputSlim component will be visible all the time.

Required Actions/Changes

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

User is REGISTERED

It is when 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
• OR when PaymentProcessor.canSaveCards returns true
  Make sure you’re accessing the canSaveCards value after the payment initiation

Default Behavior

• The SavedCards Component will be visible by default; there’s no action required from your side.
• The CardInput/CardInputSlim component will be visible all the time.

Required Actions/Changes

• 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
• OR when PaymentProcessor.canSaveCards returns true
  Make sure you’re accessing the canSaveCards value after the payment initiation
• When the onCardSelected lambda returns true

Example:

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 Behavior

• The SavedCards Component will be visible.
• The CardInput/CardInputSlim component will be visible.

Required Actions/Changes

• 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
• OR when PaymentProcessor.canSaveCards returns true
  Make sure you’re accessing the canSaveCards value after the payment initiation
• When the onCardSelected lambda returns false

Example:

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 Behavior

• The SavedCards Component will be visible.
• The CardInput/CardInputSlim component will be visible.

Required Actions/Changes

• 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.