Wallet Screen¶

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¶

The WalletScreen also supports self-management via all knobs you would expect.

AnsaBalanceScreen(
    walletBalance: String,
    alertViewUiModel: AlertViewUiModel?,
    tapToPayUiModel: TapToPayUiModel?,
    autoReloadUiModel: AutoReloadUiModel?,
    giftCardConfigUiModel: GiftCardConfigurationUiModel?,
    transactions: [TransactionUiModel],
    cardArtUrl: String?,
    isDemoMode: Bool,
    termsAndConditions: TermsAndConditions? = nil,
    ansaLogger: AnsaLogger,
    addFundsClick: @escaping () -> Void,
    autoReloadRowClick: @escaping () -> Void,
    redeemGiftCardClick: RedeemGiftCardAction?,
    createVirtualCardAction: @escaping CreateVirtualCardAction,
    provisionVirtualCardAction: @escaping ProvisioningVirtualCardAction,
    onRefreshRequsted: @escaping () async -> Void,
    onBackClick: (() -> Void)? = nil
)

The data you provide will be rendered as such.

Custom Add Card Handling¶

In both Ansa managed and Self managed UI, we support the ability to handle/override the "Add Card" flow. This is handled by provided the onAddCard callback. This can be utilized to navigate to another screen, show a modal, etc. Once the card is successfully added via our APIs and you receive a PaymentMethod from the backend, you can inform the SDK of the change via the PaymentMethodUpdateManager by calling resumeUserFlow with the paymentMethod. If the add flow is cancelled, simply call resumeUserFlow() with no payment method.

@State private var showPaymentSourceSheet: Bool = false

ManagedAnsaBalanceScreen(
    ansaClient: ansaClient,
    customerId: networkType.customerId,
    merchantId: networkType.merchantId,
    // DEFINING THIS RESULTS IN CUSTOM ADD PAYMENT METHOD FLOW
    onAddCard: {
        self.showPaymentSourceSheet = true
    }
)
.sheet(isPresented: $showPaymentSourceSheet) {
    TestAddPaymentSourceSheet(
        onCloseClick: {
            self.showPaymentSourceSheet = false
          PaymentMethodUpdateManager.shared.resumeUserFlow()
        },
        onPaymentMethodAdded: { paymentMethod in
            self.showPaymentSourceSheet = false

          PaymentMethodUpdateManager.shared.resumeUserFlow(paymentMethod: paymentMethod)
        }
    )
    // Added this to force user to click a button on the screen, which guarantees
    // a PaymentMethodUpdateManager method will be called
    .interactiveDismissDisabled()
}

Custom Select Payment Method Handling¶

Similarly, in both Ansa managed and Self managed UI, we support the ability to handle/override the "Select Payment Method" flow. This is handled by provided the onSelectPaymentMethod callback. This can be utilized to navigate to another screen, show a modal, etc. Once the card is selected or added via our APIs, you can inform the SDK of the change via the PaymentMethodUpdateManager by calling resumeUserFlow with the paymentMethod. If the add flow is cancelled, simply call resumeUserFlow() with no payment method.

@State private var showPaymentSourceSheet: Bool = false

ManagedAnsaBalanceScreen(
    ansaClient: ansaClient,
    customerId: networkType.customerId,
    merchantId: networkType.merchantId,
    // DEFINING THIS RESULTS IN CUSTOM ADD PAYMENT METHOD FLOW
    onSelectPaymentSource: {
        self.showPaymentSourceSheet = true
    }
)
.sheet(isPresented: $showPaymentSourceSheet) {
    TestAddPaymentSourceSheet(
        onCloseClick: {
            self.showPaymentSourceSheet = false
          PaymentMethodUpdateManager.shared.resumeUserFlow()
        },
        onPaymentMethodAdded: { paymentMethod in
            self.showPaymentSourceSheet = false

          PaymentMethodUpdateManager.shared.resumeUserFlow(paymentMethod: paymentMethod)
        }
    )
    // Added this to force user to click a button on the screen, which guarantees
    // a PaymentMethodUpdateManager method will be called
    .interactiveDismissDisabled()
}