Wallet screen UI

The primary UI component we offer in the SDK is the ManagedAnsaBalanceScreen, 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 ManagedAnsaBalanceScreen utilizes your AnsaClient and handles all internal workings of the view.

Initializing the client can be as simple as:

AnsaSdk.initialize(
  publishableKey: "merchant publishable key from portal API keys",
  clientSecretProvider: ClientSecretProviderImpl()
)

class ClientSecretProviderImpl: ClientSecretProvider {
  func provideClientSecret(ansaCustomerId: String) async -> String? {
    // Hit client their backend, which calls initialize session w/ merchant secret
    // returns PaymentSession json payload
    // client needs to parse it and pass it to us
    return "secret-key-from-portal"
  }
}

Once your AnsaClient is initialized, drop in the managed view in any part of your application:

ManagedAnsaBalanceScreen(
  ansaClient: ansaClient,
  customerId: "ansa_customer_id",
  merchantId: "your_merchant_id"
)
// Customize the navigation bar
.ansaNavigationBar(
  title: "Wallet",
  leadingSlot: {
    Image(systemName: "arrow.backward")
    .frame(width: 24, height: 24)
    .onTapGesture {
      // Handle closing screen
    }
  }
)

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!