Wallet Screen UI

The primary UI component we offer in the SDK is the WalletScreen, which is fully managed by Ansa. It bakes in core functionality such as:

• viewing the balance
• adding funds
• configuring auto-reload
• viewing transaction history
• push provisioning virtual cards (if enabled for your merchant)

Ansa Managed UI

The Ansa-managed screen utilizes your AnsaClient and handles all internal workings of the view.

The simplest setup of WalletScreen is 4 lines of code.

val ansaClient = AnsaClient.init(
    /* initialization params */ 
)

AnsaTheme {
    AnsaWalletScreen(
        ansaClient = ansaClient,
        customerId = { /* the customer ID provided */ },
        merchantId = { /* the merchant ID provided */ },
    )
}

The Ansa managed experience also supports being used as a nested destination by providing an onNavigateBack callback. In doing so, a back arrow will be placed in the Top App Bar of the screen.

AnsaWalletScreen(
    ansaClient = ansaClient,
    customerId = { /* the customer ID provided */ },
    merchantId = { /* the merchant ID provided */ },
    title = "Wallet",
    onNavigateBack = { 
      // Callback to handle back navigation.
      navigator.pop() 
    }
)

Self-Managed UI

If you'd like to leverage the UI as we've built it, but still fully customize callbacks and interactivity, we do offer an "unmanaged" version as well. Please reach out to your Ansa implementation manager to learn more!