Premium Android SDK

• Version: 1.5.0

• Min Android SDK: 30

• Theme: light, dark

• Orientations: portrait, landscape

• Languages: en, ru, kk

Configure dependency

To get the dependency, you first need to configure access to our repository.

1. Install AWS CLI using this guide.

2. Configure AWS CLI using the credentials provided by us. To do this, run the following command in your terminal.

aws configure

# After executing the command, you will be prompted to enter the following information
AWS Access Key ID [None]: <YOUR_ACCESS_KEY>
AWS Secret Access Key [None]: <YOUR_SECRET_KEY>
Default region name [None]: eu-central-1
Default output format [None]: json

1. Add this configuration into the repositories block in your project's build.gradle|settings.gradle file.

maven {
  url = "https://infocus-346627266603.d.codeartifact.eu-central-1.amazonaws.com/maven/premium-sdk/"
  credentials {
    username = "aws"
    // This script will obtain the authorization token using AWS CLI
    def command = "aws codeartifact get-authorization-token --domain infocus --domain-owner 346627266603 --region eu-central-1 --query authorizationToken --output text"
    def process = command.execute()
    process.waitFor()
    def token = process.text.trim()
    password = token
  }
}

1. Add the dependency on the SDK to the project's build.gradle file in the dependencies block.

implementation("com.visa.premium:android-sdk:<preferred_version>")

1. The SDK uses some Java 8 APIs that are not available in Android SDK 24, so to enable devices with lower Android versions to u SDKse the, desugaring must be enabled. More detaist can be found here https://developer.android.com/studio/write/java8-support#library-desugaring

   android {
      ...
       compileOptions {
          ...
          isCoreLibraryDesugaringEnabled = true
       }
   }
   
   dependencies {
   	...
   	coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:<latest_version>")
   }

Auth

The SDK is available only to authenticated users.

To start the authorization process, you need to implement the functional interface com.visa.concierge.auth.CredentialsProvider. The output of the implementation method of this interface should be a class implementing the interface com.visa.concierge.auth.Credentials. Currently, only one authentication method is available - using the client token. To obtain this token, your backend must have the appropriate API. In the implementation of the functional interface, you need to implement the logic for retrieving this token from your backend and passing it to the SDK in the appropriate format. To provide this token, you need to use the class com.visa.concierge.auth.ClientCredentials.

com.visa.concierge.auth.ClientCredentials has 2 parameters in the constructor:

1. token - user token

2. needRequestUserPhone - a flag indicating the necessity to request the user's phone number on the first SDK launch. If the flag is true - on first launch SDK will open an activation flow to request and activate the user's phone number, iffalse - it won't (by default, in the constructor with one parameter, this flag is false).

Note that different client tokens are used for the two different flows (with or without requesting the user's phone number).

• Without requesting the phone number, the token obtained from /sdk/v1/user/getToken is used.

• With requesting the phone number, the token obtained from /sdk/v1/user/getTokenById is used.

To reduce requests to your backend, the SDK caches the client token in the application memory(RAM), and in EncryptedSharedPreferences, relying on its expiration time.

EncryptedSharedPreferences are encrypted with a unique device-bound key, so they need to be excluded from automatic backups. To do this, you need to:

1. In your AndroidManifest.xml file add attributes.

   <application ...
       android:fullBackupContent="@xml/backup_rules"
       android:dataExtractionRules="@xml/data_extraction_rules">
   </application>

2. Create an XML file called backup_rules.xml in the res/xml/ directory with following content.

   <?xml version="1.0" encoding="utf-8"?>
   <full-backup-content>
       <exclude domain="sharedpref" path="concierge_sdk_enc_prefs.xml"/>
   </full-backup-content>

3. Create an XML file called data_extraction_rules.xml in the res/xml/ directory with following content.

   <data-extraction-rules>
       <cloud-backup>
          <exclude domain="sharedpref" path="concierge_sdk_enc_prefs.xml"/>
       </cloud-backup>
       <device-transfer>
          <exclude domain="sharedpref" path="concierge_sdk_enc_prefs.xml"/>
       </device-transfer>
   </data-extraction-rules>

Setup and Init SDK

Sdk must be initialized before the first usage of UI components. This could be done in the Application class of your app.

Example of initialization

class MyApplicationKt : Application() {

	override fun onCreate() {
		super.onCreate()

		...

		// initialize SDK here
		ConciergeSdk.init(
			applicationContext = applicationContext,
			// functional interface for passing SDK credentials
			credentialsProvider = {
				// client token retrieval logic should be placed here
				//
				// this method will be called from background thread,
				// so you could safely perform API call here
				val response = yourBackendApi.getClientToken()
				
				ClientCredentials(token = response.clientToken)
			},
			config = conciergeConfig { configBuilder ->
                configBuilder
                    // enable console logging
                    .isDebugEnabled(true)
                    // customize global screen background
                    .backgroundTheme { bgTheme ->
                        bgTheme
                            .color(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF808080.toInt()
                            )
                    }
                    // customize chat theme
                    .chatScreenTheme { chatTheme ->
                        chatTheme
                            // Reverse order of messages (new on top)
                            .isMessageListReversed(false)

                            // Topic of manager's messages
                            .managerMessageTheme { managerMsg ->
                                managerMsg
                                    .backgroundTint(
                                        light = 0xFF1434CB.toInt(),
                                        dark = 0xFF2B92F5.toInt()
                                    )
                                    .textColor(
                                        light = 0xFFFFFFFF.toInt(),
                                        dark = 0xFFFFFFFF.toInt()
                                    )
                                    .linkColor(
                                        light = 0xFF2B94F5.toInt(),
                                        dark = 0xFF81D4FA.toInt()
                                    )
                                    .dateColor(
                                        light = 0x80000000.toInt(),
                                        dark = 0x80FFFFFF.toInt()
                                    )
                            }

                            // Date separator topic
                            .dateSeparatorTheme { dateTheme ->
                                dateTheme
                                    .backgroundTint(
                                        light = 0xFFF5F5F5.toInt(),
                                        dark = 0xFF1E1E1E.toInt()
                                    )
                                    .textColor(
                                        light = 0xFF757575.toInt(),
                                        dark = 0xFF9CA3AF.toInt()
                                    )
                            }

                            // Chat input field subject
                            .inputTheme { chatInput ->
                                chatInput
                                    .backgroundTint(
                                        light = 0xFFFFFFFF.toInt(),
                                        dark = 0xFF272727.toInt()
                                    )
                                    .textTint(
                                        light = TintStateList.solid(
                                            normal = 0xFF697586.toInt(),
                                            checked = 0xFF000000.toInt()
                                        ),
                                        dark = TintStateList.solid(
                                            normal = 0xFF697586.toInt(),
                                            checked = 0xFFFFFFFF.toInt()
                                        )
                                    )
                            }
                            // customize client message theme
                            .clientMessageTheme { messageTheme ->
                                messageTheme
                                    .backgroundTint(
                                        light = applicationContext.getColor(R.color.white),
                                        dark = applicationContext.getColor(R.color.black)
                                    )
                            }
                    }
                    // customize brand colors
                    .brandColors { brandColor ->
                        brandColor.primary(light = 0xFF4DAA7D.toInt(), dark = 0xFF5BCB97.toInt())
                        brandColor.secondary(light = 0xFF2F8B63.toInt(), dark = 0xFF4DAA7D.toInt())
                        brandColor.tertiary(light = 0xFF1F6E4C.toInt(), dark = 0xFF3D9C72.toInt())
                        brandColor.quaternary(light = 0xFF4DAA7D.toInt(), dark = 0xFF76DDB0.toInt())
                        brandColor.quinary(light = 0xFFFFFDFF.toInt(), dark = 0xFF0B0F15.toInt())
                        brandColor.senary(light = 0xFFBFE9D6.toInt(), dark = 0xFF2A6B52.toInt())
                        brandColor.septenary(light = 0xFFE6F6EF.toInt(), dark = 0xFF16704B.toInt())
                        brandColor.octonary(light = 0xFFCDEFE2.toInt(), dark = 0xFF1F6E4C.toInt())
                        brandColor.nonary(light = 0xFFA7E1C9.toInt(), dark = 0xFF3D9C72.toInt())
                        brandColor.denary(light = 0xFF7FD2AE.toInt(), dark = 0xFF5BCB97.toInt())
                        brandColor.eleventh(light = 0xFF3D9C72.toInt(), dark = 0xFF9AEBC8.toInt())
                        brandColor.twelfth(light = 0xFF16704B.toInt(), dark = 0xFFB8F2DC.toInt())
                    }
                    // customize benefits theme
                    .benefitsTheme { benefits ->
                        benefits
                            .textPrimary(light = 0xFF0F172A.toInt(), dark = 0xFFF8FAFC.toInt())
                            .textSecondary(light = 0xFF475569.toInt(), dark = 0xFFCBD5E1.toInt())
                            .foregroundTertiary(
                                light = 0xFF94A3B8.toInt(),
                                dark = 0xFF94A3B8.toInt()
                            )
                            .borderPrimary(light = 0xFFE6E4EE.toInt(), dark = 0xFF2B3332.toInt())
                            .backgroundPrimary(
                                light = 0xFFFFFDFF.toInt(),
                                dark = 0xFF0B0F15.toInt()
                            )
                            .backgroundSecondary(
                                light = 0xFFF6F5FB.toInt(),
                                dark = 0xFF141A17.toInt()
                            )
                            .buttonSecondaryBackground(
                                light = 0xFFF6F5FB.toInt(),
                                dark = 0xFF1B2321.toInt()
                            )
                            .buttonSecondaryForeground(
                                light = 0xFF1F2937.toInt(),
                                dark = 0xFFE5E7EB.toInt()
                            )
                    }
                    // customize app button theme
                    .appButtonTheme { appButtonTheme ->
                        appButtonTheme
                            .backgroundColor(
                                light = 0xFFE3F2FD.toInt(),
                                dark = 0xFF1A237E.toInt()
                            )
                            .textColor(
                                light = 0xFF1976D2.toInt(),
                                dark = 0xFF90CAF9.toInt()
                            )
                            .cornerRadius(
                                light = 10f,
                                dark = 10f
                            )
                            .height(
                                light = 48f,
                                dark = 64f
                            )
                    }
                    // customize app button theme
                    .requestListScreenTheme { requestListTheme ->
                        requestListTheme
                            .requestStateTheme { requestStateTheme ->
                                requestStateTheme
                                    .waitingState { waitingState ->
                                        waitingState
                                            .iconBackgroundColor(
                                                light = 0xFFFFEBEE.toInt(),
                                                dark = 0xFFB71C1C.toInt()
                                            )
                                            .iconTintColor(
                                                light = 0xFFD32F2F.toInt(),
                                                dark = 0xFFFFCDD2.toInt()
                                            )
                                            .titleColor(
                                                light = 0xFFC62828.toInt(),
                                                dark = 0xFFFFCDD2.toInt()
                                            )
                                            .descriptionColor(
                                                light = 0xFF757575.toInt(),
                                                dark = 0xFF9CA3AF.toInt()
                                            )
                                    }
                                    .processingState { processingState ->
                                        processingState
                                            .iconBackgroundColor(
                                                light = 0xFFE8F5E8.toInt(),
                                                dark = 0xFF2E7D32.toInt()
                                            )
                                            .iconTintColor(
                                                light = 0xFF4CAF50.toInt(),
                                                dark = 0xFF81C784.toInt()
                                            )
                                            .titleColor(
                                                light = 0xFF2E7D32.toInt(),
                                                dark = 0xFFA5D6A7.toInt()
                                            )
                                            .descriptionColor(
                                                light = 0xFF757575.toInt(),
                                                dark = 0xFF9CA3AF.toInt()
                                            )
                                    }
                                    .completedState { completedState ->
                                        completedState
                                            .iconBackgroundColor(
                                                light = 0xFFF3E5F5.toInt(),
                                                dark = 0xFF4A148C.toInt()
                                            )
                                            .iconTintColor(
                                                light = 0xFF9C27B0.toInt(),
                                                dark = 0xFFBA68C8.toInt()
                                            )
                                            .titleColor(
                                                light = 0xFF7B1FA2.toInt(),
                                                dark = 0xFFCE93D8.toInt()
                                            )
                                            .descriptionColor(
                                                light = 0xFF757575.toInt(),
                                                dark = 0xFF9CA3AF.toInt()
                                            )
                                    }
                                    .emptyState { emptyState ->
                                        emptyState
                                            .iconBackgroundColor(
                                                light = 0xFFF3E5F5.toInt(),
                                                dark = 0xFF4A148C.toInt()
                                            )
                                            .iconTintColor(
                                                light = 0xFF9C27B0.toInt(),
                                                dark = 0xFFBA68C8.toInt()
                                            )
                                            .titleColor(
                                                light = 0xFF7B1FA2.toInt(),
                                                dark = 0xFFCE93D8.toInt()
                                            )
                                            .descriptionColor(
                                                light = 0xFF757575.toInt(),
                                                dark = 0xFF9CA3AF.toInt()
                                            )
                                    }
                                    .searchEmptyState { searchEmptyState ->
                                        searchEmptyState
                                            .iconBackgroundColor(
                                                light = 0xFFE1F5FE.toInt(),
                                                dark = 0xFF01579B.toInt()
                                            )
                                            .iconTintColor(
                                                light = 0xFF03A9F4.toInt(),
                                                dark = 0xFF4FC3F7.toInt()
                                            )
                                            .titleColor(
                                                light = 0xFF0277BD.toInt(),
                                                dark = 0xFF81D4FA.toInt()
                                            )
                                            .descriptionColor(
                                                light = 0xFF757575.toInt(),
                                                dark = 0xFF9CA3AF.toInt()
                                            )
                                    }
                            }
                    }

                    // ===== INPUT THEME =====
                    .inputTheme { input ->
                        input
                            .cursorColor(
                                light = 0xFF1434CB.toInt(),
                                dark = 0xFF2B92F5.toInt()
                            )
                            .textHighlight(
                                light = 0x801434CB.toInt(), // с прозрачностью
                                dark = 0x802B92F5.toInt()
                            )
                            .hintColor(
                                light = 0x80000000.toInt(),
                                dark = 0xFF818F97.toInt()
                            )
                            .errorColor(
                                light = 0xFFFF0000.toInt(),
                                dark = 0xFFFF5252.toInt()
                            )
                            .backgroundColor(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF323232.toInt()
                            )
                            .textStyle { textStyle ->
                                textStyle
                                    .fontSize(ThemeProvider.create(16))
                            }
                            .errorTextStyle { errorStyle ->
                                errorStyle
                                    .fontSize(ThemeProvider.create(14))
                            }
                    }

                    // ===== STEP INDICATOR THEME =====
                    .stepIndicatorTheme { stepIndicator ->
                        stepIndicator
                            .stepTint(
                                light = TintStateList.solid(
                                    normal = 0xFFC7EDFF.toInt(),
                                    checked = 0xFF1434CB.toInt(),
                                    disabled = 0xFFC7EDFF.toInt()
                                ),
                                dark = TintStateList.solid(
                                    normal = 0xFF323232.toInt(),
                                    checked = 0xFF2B92F5.toInt(),
                                    disabled = 0xFF6D797F.toInt()
                                )
                            )
                            .doneIconColor(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF272727.toInt()
                            )
                    }

                    // ===== STATUS BADGE THEME =====
                    .statusBadgeTheme { statusBadge ->
                        statusBadge
                            .newStatusColors(
                                backgroundLight = 0xFFE8F5E9.toInt(),
                                backgroundDark = 0xFF2E7D32.toInt(),
                                borderLight = 0xFFE8F5E9.toInt(),
                                borderDark = 0xFF2E7D32.toInt(),
                                textLight = 0xFF2E7D32.toInt(),
                                textDark = 0xFF81C784.toInt()
                            )
                    }

                    // ===== PROGRESS INDICATOR THEME ====
                    .progressIndicatorTheme { progress ->
                        progress
                            .trackColor(
                                light = 0xFFE0E0E0.toInt(),
                                dark = 0xFF424242.toInt()
                            )
                            .color(
                                light = 0xFF1434CB.toInt(),
                                dark = 0xFF2B92F5.toInt()
                            )
                    }

                    // ===== RATING BAR THEME =====
                    .ratingBarTheme { ratingBar ->
                        ratingBar
                            .ratingColor(
                                light = 0xFFFFB300.toInt(),
                                dark = 0xFFFFC107.toInt()
                            )
                            .backgroundColor(
                                light = 0xFFE0E0E0.toInt(),
                                dark = 0xFF424242.toInt()
                            )
                    }

                    // ===== TEXT THEME =====
                    .textTheme { text ->
                        text
                            .color(
                                light = 0xFF1F2937.toInt(),
                                dark = 0xFFE5E7EB.toInt()
                            )
                    }

                    // ===== RIPPLE THEME =====
                    .rippleTheme { ripple ->
                        ripple
                            .color(
                                light = 0x1A000000.toInt(), // 10% opacity
                                dark = 0x1AFFFFFF.toInt()
                            )
                    }

                    // ===== CARD THEME =====
                    .cardTheme { card ->
                        card
                            .backgroundColor(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF272727.toInt()
                            )
                            .contentColor(
                                light = 0xFF1434CB.toInt(),
                                dark = 0xFF2B92F5.toInt()
                            )
                    }

                    // ===== FILLED TEXT BUTTON THEME =====
                    .filledTextButtonTheme { button ->
                        button
                            .backgroundTint(
                                light = TintStateList.solid(
                                    normal = 0xFF1434CB.toInt(),
                                    checked = 0xFF0F2AA3.toInt(),
                                    disabled = 0xFFE0E0E0.toInt()
                                ),
                                dark = TintStateList.solid(
                                    normal = 0xFF2B92F5.toInt(),
                                    checked = 0xFF1E6BC4.toInt(),
                                    disabled = 0xFF424242.toInt()
                                )
                            )
                            .contentTint(
                                light = TintStateList.solid(normal = 0xFFFFFFFF.toInt()),
                                dark = TintStateList.solid(normal = 0xFFFFFFFF.toInt())
                            )
                    }

                    // ===== OUTLINED TEXT BUTTON THEME =====
                    .outlinedTextButtonTheme { button ->
                        button
                            .backgroundTint(
                                light = TintStateList.solid(normal = 0x00000000.toInt()),
                                dark = TintStateList.solid(normal = 0x00000000.toInt())
                            )
                            .contentTint(
                                light = TintStateList.solid(
                                    normal = 0xFF1434CB.toInt(),
                                    checked = 0xFF0F2AA3.toInt()
                                ),
                                dark = TintStateList.solid(
                                    normal = 0xFF2B92F5.toInt(),
                                    checked = 0xFF1E6BC4.toInt()
                                )
                            )
                    }

                    // ===== FILLED ICON BUTTON THEME =====
                    .filledIconButtonTheme { button ->
                        button
                            .backgroundTint(
                                light = TintStateList.solid(normal = 0xFFEEF2F6.toInt()),
                                dark = TintStateList.solid(normal = 0xFF22262F.toInt())
                            )
                            .contentTint(
                                light = TintStateList.solid(normal = 0xFF4B5565.toInt()),
                                dark = TintStateList.solid(normal = 0xFF818F97.toInt())
                            )
                    }

                    // ===== FLOATING BUTTON THEME =====
                    .floatingButtonTheme { button ->
                        button
                            .backgroundTint(
                                light = TintStateList.solid(normal = 0xFF4DAA7D.toInt()),
                                dark = TintStateList.solid(normal = 0xFF5BCB97.toInt())
                            )
                            .contentTint(
                                light = TintStateList.solid(normal = 0xFFFFFFFF.toInt()),
                                dark = TintStateList.solid(normal = 0xFFFFFFFF.toInt())
                            )
                    }

                    // ===== INFO DIALOG THEME =====
                    .infoDialogTheme { dialog ->
                        dialog
                            .backgroundColor(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF272727.toInt()
                            )
                            .textStyle { textStyle ->
                                textStyle
                                    .fontSize(ThemeProvider.create(16))
                            }
                            .confirmButtonTheme { button ->
                                button
                                    .backgroundTint(
                                        light = TintStateList.solid(normal = 0xFF1434CB.toInt()),
                                        dark = TintStateList.solid(normal = 0xFF2B92F5.toInt())
                                    )
                                    .contentTint(
                                        light = TintStateList.solid(normal = 0xFFFFFFFF.toInt()),
                                        dark = TintStateList.solid(normal = 0xFFFFFFFF.toInt())
                                    )
                            }
                    }

                    // ===== INFO DOUBLE ACTION DIALOG THEME =====
                    .infoDoubleActionDialogTheme { dialog ->
                        dialog
                            .backgroundColor(
                                light = 0xFFFFFFFF.toInt(),
                                dark = 0xFF272727.toInt()
                            )
                            .textStyle { textStyle ->
                                textStyle
                                    .fontSize(ThemeProvider.create(16))
                            }
                            .confirmButtonTheme { button ->
                                button
                                    .backgroundTint(
                                        light = TintStateList.solid(normal = 0xFF1434CB.toInt()),
                                        dark = TintStateList.solid(normal = 0xFF2B92F5.toInt())
                                    )
                                    .contentTint(
                                        light = TintStateList.solid(normal = 0xFFFFFFFF.toInt()),
                                        dark = TintStateList.solid(normal = 0xFFFFFFFF.toInt())
                                    )
                            }
                            .declineButtonTheme { button ->
                                button
                                    .backgroundTint(
                                        light = TintStateList.solid(normal = 0x00000000.toInt()),
                                        dark = TintStateList.solid(normal = 0x00000000.toInt())
                                    )
                                    .contentTint(
                                        light = TintStateList.solid(normal = 0xFF1434CB.toInt()),
                                        dark = TintStateList.solid(normal = 0xFF2B92F5.toInt())
                                    )
                            }
                    }

            }			
        }
		)

		...

	}

}

Configuration and Theming

All configuration and theme settings of the SDK are done using com.visa.concierge.ConciergeConfig.Builder. All themes are divided into two parts - dark and light. Switching between them occurs automatically following the dark-light mode of the operating system.

The tint of elements with dynamic colors is set using com.visa.concierge.ui.theme.TintStateList. This class has static methods that allow you to set the color for a specific state. Currently, there are 3 states:

• normal - color in the normal state

• disabled - color in the disabled state

• checked - color in the selected state

Each screen, element, or group of elements can have individually customized fonts. The following parameters are available for font customization:

• fontFamily - class that holds a list of font families

• fontSize - font size

• fontWeight - font weight from the specified family

• lineHeight - paragraph height

• letterSpacing - spacing between characters

Tip. Since typically one font family with different weights is used throughout the application, you can create a constant with com.visa.concierge.ui.theme.FontFamily and pass it to all design elements. The appropriate font from the family will be selected based on the fontWeight from the theme.

Language Handling Notice.

The SDK does not provide any public API for setting the language manually. It fully relies on Android’s standard localization mechanism and automatically adapts to the system language or the application language defined by the app’s Context.

If your app supports language switching through the standard Android Context methods, the SDK will follow it automatically. However, if your app uses a custom localization system that bypasses Android’s standard behavior, you must also update the locale using the official Android approach (by applying the locale through the application Context) to ensure the SDK is properly localized.

Theme elements

element	description
isDebugEnabled	enable/disable console logging
backgroundTheme	global screen background theme
topBarTheme	toolbar theme
navBarTheme	navigation bar theme
inputTheme	global input theme
progressIndicatorTheme	global progress indicator theme
ratingBarTheme	global rating bar theme
textTheme	global text theme
rippleTheme	global ripple theme
cardTheme	global card component theme
filledTextButtonTheme	global filled text button theme
outlinedTextButtonTheme	global outlined text button theme
filledIconButtonTheme	global filled icon button theme
infoDialogTheme	global info dialog theme
chatScreenTheme	chat screen theme
requestListScreenTheme	requests list screen theme
brandColors	brand colors theme (primary, secondary, tertiary, etc.)
benefitsTheme	benefits screen theme
stepIndicatorTheme	step indicator theme
statusBadgeTheme	status badge theme
floatingButtonTheme	floating button theme
infoDoubleActionDialogTheme	double action dialog theme
appButtonTheme	global app button theme

Background theme

element	description
color	background color

TopBar theme

element	description
backgroundColor	background color
buttonTint	button tint color

NavigationBar theme

element	description
backgroundColor	background color
buttonTint	button tint color
indicatorColor	accent background color of selected icon

Input theme

element	description
cursorColor	cursor color
textHighlight	selected text highlight color

ProgressIndicator theme

element	description
color	indicator background color
trackColor	indicator track color

StepIndicator theme

element	description
stepTint	step color tint
doneIconColor	color of done icon for last step

RatingBar theme

element	description
selectedColor	color that represents the selected or "filled" part of the rating
unselectedColor	color that represents the unselected or "empty" part of the rating

Text theme

element	description
color	text color

Ripple theme

element	description
color	ripple color
alpha	ripple alpha

Card theme

element	description
backgroundColor	background color
contentColor	content color

Button theme

element	description
backgroundTint	background color
contentTint	content color

SingleActionDialog theme

element	description
backgroundColor	background color
confirmButtonTheme	confirm button theme

ChatScreen theme

element	description
infoScreenTheme	info screen theme
clientMessageTheme	client message theme
managerMessageTheme	manager message theme
dateSeparatorTheme	date separator theme
inputTheme	chat input theme

InfoScreen theme

element	description
logoBackground	logog background color
logoTint	logo tint color
vendorLogo	vendor logo icon resource
vendorLogoTintEnabled	enable/disable tint of vendor logo

Message theme

element	description
backgroundTint	background color
fileTheme	message file theme
textColor	text color
dateColor	date text color
avatarBackgroundTint	avatar background color
avatarContentTint	avatar content color

MessageFile theme

element	description
backgroundTint	background color
contentTint	tint of file icon/name

DateSeparator theme

element	description
backgroundTint	background color
textColor	text color

ChatInput theme

element	description
backgroundTint	background color
textTint	text color
emojiButtonTheme	emoji popup theme
sendButtonTheme	send button theme
attachButtonTheme	attach button theme
emojiPopupTheme	emoji button theme
attachDialogTheme	attach dialog theme
attachedItemTheme	attached item theme

EmojiPopup theme

element	description
backgroundTint	background color
buttonTint	button tint color
dividerTint	divider color

AttachDialog theme

element	description
backgroundTint	background color
buttonTint	button tint color
dividerTint	divider color

AttachedItem theme

element	description
backgroundTint	background color
contentTint	tint color of icon/text
cancelButtonTheme	cancell button theme

RequestListScreen theme

element	description
requestViewTheme	request card view theme

RequestView theme

element	description
backgroundColor	background color
unseenBadgeColor	unseen progress badge background color
unseenBadgeTextColor	unseen progress badge text color
titleTint	title color
dateTint	request creation date color
requestProgressTheme	request step indicator theme

BrandColors theme

primary	primary brand color
secondary	secondary brand color
tertiary	tertiary brand color
quaternary	quaternary brand color
quinary	quinary brand color
senary	senary brand color
septenary	septenary brand color
octonary	octonary brand color
nonary	nonary brand color
denary	denary brand color
eleventh	eleventh brand color
twelfth	twelfth brand color

BenefitsTheme theme

element	description
textPrimary	primary text color
textSecondary	secondary text color
foregroundTertiary	tertiary foreground color
borderPrimary	primary border color
backgroundPrimary	primary background color
backgroundSecondary	secondary background color
buttonSecondaryBackground	secondary button background color
buttonSecondaryForeground	secondary button foreground color

TopBarTheme theme

element	description
backgroundColor	toolbar background color
buttonTint	toolbar button tint color
actionBackgroundTint	action button background tint
textStyle	toolbar text style

NavBarTheme theme

element	description
backgroundColor	navigation bar background color
buttonTint	navigation bar button tint color
indicatorColor	navigation bar indicator color
textStyle	navigation bar text style

ActivationScreenTheme theme

element	description
bodyTextStyle	activation screen body text style

ChatScreenTheme theme

element	description
title	chat screen title
isMessageListReversed	reverse message list order
infoScreenTheme	info screen theme
clientMessageTheme	client message theme
managerMessageTheme	manager message theme
dateSeparatorTheme	date separator theme
inputTheme	chat input theme

InfoScreenTheme theme (nested in ChatScreenTheme)

element	description
logoBackground	logo background color
logoTint	logo tint color
vendorLogo	vendor logo drawable resource
vendorLogoTintEnabled	enable vendor logo tint
visaLogoEnabled	enable visa logo
vendorAdditionalText	vendor additional text resource
bodyTextStyle	body text style

ChatMessageTheme theme (nested in ChatScreenTheme)

element	description
backgroundTint	message background color
fileTheme	message file theme
textColor	message text color
linkColor	message link color
dateColor	message date color
avatarIcon	avatar icon drawable resource
avatarIconSize	avatar icon size
avatarBackgroundTint	avatar background color
avatarContentTint	avatar content color
textStyle	message text style
dateTextStyle	date text style

MessageFileTheme theme (nested in ChatMessageTheme)

element	description
backgroundTint	file background color
contentTint	file content color
textStyle	file text style

ChatDateSeparatorTheme theme (nested in ChatScreenTheme)

element	description
backgroundTint	date separator background color
borderColor	date separator border color
textColor	date separator text color
textStyle	date separator text style

ChatInputTheme theme (nested in ChatScreenTheme)

element	description
backgroundTint	input background color
textTint	input text tint color
emojiButtonTheme	emoji button theme
sendButtonTheme	send button theme
attachButtonTheme	attach button theme
emojiPopupTheme	emoji popup theme
attachDialogTheme	attach dialog theme
attachedItemTheme	attached item theme
textStyle	input text style

AttachedItemTheme theme (nested in ChatInputTheme)

element	description
backgroundTint	attached item background color
contentTint	attached item content color
cancelButtonTheme	cancel button theme
textStyle	attached item text style

RequestListScreenTheme theme

element	description
requestStateTheme	request state theme
requestViewTheme	request view theme

RequestStateTheme theme (nested in RequestListScreenTheme)

element	description
waitingState	waiting state theme
processingState	processing state theme
completedState	completed state theme
emptyState	empty state theme
searchEmptyState	search empty state theme

RequestStateItemTheme theme (nested in RequestStateTheme)

element	description
iconBackgroundColor	state icon background color
iconTintColor	state icon tint color
titleColor	state title color
descriptionColor	state description color

RequestViewTheme theme (nested in RequestListScreenTheme)

element	description
backgroundColor	request card background color
borderColor	request card border color
unseenBadgeColor	unseen badge background color
unseenBadgeTextColor	unseen badge text color
titleTint	request title color
dateTint	request date color
unseenBadgeTextStyle	unseen badge text style
titleTextStyle	title text style
dateTextStyle	date text style
statusBadgeTheme	status badge theme

InputTheme theme

element	description
cursorColor	input cursor color
textHighlight	input text highlight color
hintColor	input hint color
errorColor	input error color
backgroundColor	input background color
textStyle	input text style
errorTextStyle	input error text style

StepIndicatorTheme theme

element	description
stepTint	step indicator tint color
doneIconColor	done icon color

StatusBadgeTheme theme

element	description
newStatusColors	new status colors (background, border, text)
inProgressStatusColors	in progress status colors (background, border, text)
completedStatusColors	completed status colors (background, border, text)

ProgressIndicatorTheme theme

element	description
color	progress indicator color
trackColor	progress indicator track color

RatingBarTheme theme

element	description
ratingColor	active rating color
backgroundColor	inactive rating color

TextTheme theme

element	description
color	global text color

RippleTheme theme

element	description
color	ripple effect color

CardTheme theme

element	description
backgroundColor	card background color
contentColor	card content color

FilledTextButtonTheme theme

element	description
backgroundTint	filled button background tint
contentTint	filled button content tint
textStyle	filled button text style

OutlinedTextButtonTheme theme

element	description
backgroundTint	outlined button background tint
contentTint	outlined button content tint
textStyle	outlined button text style

FilledIconButtonTheme theme

element	description
backgroundTint	filled icon button background tint
contentTint	filled icon button content tint

FloatingButtonTheme theme

element	description
backgroundTint	floating button background tint
contentTint	floating button content tint

InfoDialogTheme theme

element	description
backgroundColor	dialog background color
textStyle	dialog text style
confirmButtonTheme	confirm button theme

InfoDoubleActionDialogTheme theme

element	description
backgroundColor	dialog background color
textStyle	dialog text style
confirmButtonTheme	confirm button theme
declineButtonTheme	decline button theme

AppButtonTheme theme

element	description
backgroundColor	app button background color
textColor	app button text color
cornerRadius	app button corner radius
height	app button height
textStyle	app button text style
fontWeight	app button font weight

Usage

Concierge Integration

There are 3 ways to integrate the SDK into your application:

• Activity - using com.visa.concierge.ui.ConciergeActivity. This activity needs to be registered in your application's manifest.

• Fragment - using com.visa.concierge.ui.ConciergeFragment.

• Compose - using com.visa.concierge.ui.ConciergeEntryPoint().

Benefits Integration

The SDK also provides separate entry points for Benefits functionality:

Benefits Only Entry Points

• Fragment: com.visa.concierge.ui.BenefitsOnlyFragment

• Compose: com.visa.concierge.ui.BenefitsOnlyEntryPoint()

BenefitsOnlyEntryPoint does not handle phone activation workflow automatically. Phone activation should be handled by the parent application or use ConciergeEntryPoint instead.

For any of these methods, you will only need to define the navigation from your application to the SDK's entry point, and that's it.