MineSec Pay 7
UI Customization
Introduction

UI Customization

MineSec Pay 7 can be branded at two levels:

  • Level 1: you choose your brand colour and MineSec derives the full palette from it. MineSec builds and delivers the branded app; you write no code. You can preview your brand in the Brand Preview tool before the build.
  • Level 2: the full colour palette (38 colour values), fonts, logos and app name, plus the UIKit source to redesign the screens.

This section is for Level 2. Branding is set per build. Only the merchant logo and name vary inside one build, and they come from the backend.

Two Modules

MineSec Pay 7 is split into a payment engine and a presentation layer:

msa-coremsa-uikit
RolePayment processing, navigation, state and business logicThe screens and the design system
ContainsTransactions, settlement, POS integration, kiosk mode, login, device checks, the Embedded Payment SDKEvery stock screen, MsaTheme, MsaBrand, shared components such as MsaButton
DeliveryClosed binary, inside the PCI MPoC scopeLibrary you build on. Level 2 customers also receive its source
You change it?No. You configure it (environment, licence, Koin bindings)Yes. Re-theme it, replace any screen, or both

You depend only on msa-uikit. It brings in msa-core of the same version, and msa-core brings in the Embedded Payment SDK.

How It Works

msa-core owns navigation, state and business logic. It never draws a screen itself. For every screen, it asks a ScreenProviders for a Composable, hands it the current State, and listens for Actions:

Every screen has the same shape:

fun interface ComposableScreen<S, A> {
    @Composable
    fun Content(state: S, triggerAction: (A) -> Unit)
}

msa-uikit provides DefaultScreenProviders, which fills every slot with a stock screen. You subclass it and override only the screens you redesign. Every slot you leave alone keeps the stock screen, including slots added in later versions.

class MyScreenProviders : DefaultScreenProviders(MyBrandTheme) {
    override val startup: StartupScreens = object : DefaultStartupScreens() {
        override val login = ComposableScreen { state, triggerAction ->
            MyLoginScreen(state, triggerAction)   // your Compose UI
        }
    }
}

The screens are organised in groups: startup, home, payment, history, settlement, settings, idle, plus the App2App screens. A screen only decides how things look. msa-core validates every operation, whatever the UI offers.

What msa-core Provides

CapabilityDetails
Payment ProcessingSale, void, refund, pre-auth, auth completion and incremental auth via NFC card tap; tips, installment, DCC and multi-currency
QR PaymentsConsumer scan, merchant scan, multiple schemes
Transaction ManagementHistory, details, receipts
SettlementBatch settlement and reporting
POS IntegrationApp2App, Local PayServer and Cloud POS Connector
Kiosk ModeSelf-service operation with idle signage
AuthenticationPasscode login, biometric support
Device ManagementNFC, attestation, environment config

What msa-uikit Provides

PartDetails
Stock screensDefaultScreenProviders and one open default class per group, such as DefaultPaymentScreens
Design systemMsaTheme: 20 colour tokens, 13 type styles, spacing, icon sizes, radius and shapes
Theme formMsaBrand: every value you can re-brand, including colours, fonts, logos and sizes
ComponentsShared building blocks such as MsaButton, so your screens match the stock ones
Customer displayThe cardholder-facing screen on dual-screen terminals, drawn in the same theme

What You Build

GoalWhat you write
Re-theme onlyOne MsaBrand theme. The stock screens draw in it.
Redesign some screensYour theme, plus Compose screens for the slots you replace
Redesign everythingYour theme, plus a screen for every slot. Start from the uikit source.

In every case you also write an Application class and a MainActivity, a few lines each. See the Quickstart.

MineSec provides Level 2 customers with an example project that implements all screens.

Next Steps

  1. Installation: add msa-uikit to your project
  2. Quickstart: set up your app and replace your first screen
  3. Theming & Branding: colours, typography, sizes, shapes and logos
  4. Screen Providers Reference: every screen with its State and Action classes
Response CodeInstallation