LogoLogo
  • Welcome!
  • GETTING STARTED
    • Signing Up
    • Choose a Product
    • Choose an Integration Option
    • Run Your First Test Job
    • Complete Your KYC
    • Fund Your Wallet
    • Go Live!
    • Pricing
  • SUPPORTED ID TYPES & DOCUMENTS
    • For Individuals (KYC)
      • Using ID Number
        • Supported Countries
          • Côte d'Ivoire
            • National ID (without Photo)
            • Resident ID (without Photo)
          • Ghana
            • Ghana Card
            • Ghana Card (without Photo)
            • Passport
            • Voter's ID
          • Kenya
            • Alien Card
            • KRA Pin
            • National ID
            • National ID (without Photo)
            • Passport
            • Tax Information
          • Nigeria
            • Bank Account
            • BVN
            • NIN V2
            • NIN Slip Verification
            • V_NIN (Virtual NIN)
            • Phone Number
            • Voter's ID
          • South Africa
            • National ID
            • National ID (without Photo)
            • Phone Number
            • Refugee and Asylum ID
          • Uganda
            • National ID (without Photo)
            • Basic KYC in Uganda
          • Zambia
            • Bank Account
            • TPIN
          • Zimbabwe
            • National ID (without Photo)
        • Test Data
          • Customising Sandbox Test Data
        • ID Number Regex
        • Visual Samples of Supported ID Types
      • Using Document Image
        • Continents
          • Africa
          • Asia and the Middle East
          • Europe
          • North America
          • Oceania
          • South America
    • For Businesses (KYB)
      • Supported Countries
        • Nigeria
          • Business Registration
          • Tax Information
        • Kenya
          • Business Registration
        • South Africa
          • Business Registration
      • ID Number Regex
  • PRODUCTS
    • For Individuals (KYC)
      • AML Check
        • AML News Media
      • Basic KYC
      • Biometric KYC
      • Digital Address Verification
      • Document Verification
        • Document Verification
        • Enhanced Document Verification
      • Electronic Signature
      • Enhanced KYC
      • Phone Number Verification
      • SmartSelfie™ Authentication
      • SmartSelfie™ Compare
      • Smile Secure
    • For Businesses (KYB)
      • Business Verification
  • Integration Options
    • Mobile
      • Getting Started
      • Products
        • Biometric KYC
        • BVN Consent
        • Document Verification
        • Enhanced Document Verification
        • Enhanced KYC
        • SmartSelfie™ Enrollment and Authentication
        • Enhanced SmartSelfie™ Enrollment And Authentication
      • Customization
        • UI Components
      • Offline Mode
      • Release Notes
        • Android Release Notes
        • iOS Release Notes
        • Flutter Release Notes
        • React Native Release Notes
    • No-Code
      • Smile Links
        • Link FAQs
        • Rest API
    • Server to Server
      • Ruby
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • KYB - Business Verification
          • AML Check
        • Generate Token for Web Integration
        • Utilities
      • Python
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • Java
        • Release Notes
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
      • Node.js
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • Enhanced Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • PHP
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
    • Rest API
      • Signing your API Request
        • Using Signature
      • Products
      • Postman Collection
      • Utilities
    • Web / Mobile Web
      • Web Integration
        • Installation
        • Usage
        • End User Consent
        • Support
      • Javascript SDK
        • Installation
        • Usage
        • Migration
        • Deprecated Version
          • Installation
          • Usage
          • Notes
          • Support
  • FURTHER READING
    • FAQs
      • What are your support hours?
      • How do I set up a callback?
      • How to re-enroll, deactivate or delete a user?
      • Add or remove team members
      • What are top-level keys?
      • What are partner_params?
      • How do job types map to the new product names?
      • Is there an API I can use to monitor my wallet balance?
      • Is there an API I can query to check the availability status of an ID type?
      • How do I integrate Smile ID in other countries or query other ID types?
      • What are the image types I can upload to Smile ID?
      • Why aren't Kenyan IDs returning images for some IDs queried?
      • Why are some of my bank verification requests returning 'ID authority unavailable'?
      • How can I look up a specific user's data?
      • Selfie best-practices
      • Document capture best-practices
      • What happens under the hood?
      • Guide to the user consent screen
      • What is code 2302?
      • Using the Demo App and Scanning QR codes
    • Job status
    • KYC receipts
    • Result codes
      • Error codes
    • Securing your account with two-factor authentication (2FA)
    • Security Overview
    • Troubleshooting
      • Troubleshooting error 2204 & 2205 - "You're not authorized to do that"
      • Why is my Web API job taking so long?
      • Image capture issues on web client
Powered by GitBook
On this page
  • Selfie Capture
  • Document Capture

Was this helpful?

  1. Integration Options
  2. Mobile
  3. Customization

UI Components

PreviousCustomizationNextOffline Mode

Last updated 7 months ago

Was this helpful?

In addition to the high level orchestrated screens described in Products, we also make available the smaller building-block UI components that are used to build those screens.

Details about available components can be found by visiting the reference docs/javadocs at

You must use Jetpack Compose in order to use these lower level UI components

For example, if you want to display only the Selfie Instruction screen:

SmartSelfieInstructionsScreen(
    onInstructionsAcknowledged = { /* perform some action */ }
)

Details about available components can be found by visiting the reference docs at . The UI components are listed under the Structures header

You must use SwiftUI in order to use these lower level UI components

For example, if you want to display only the Selfie Instruction screen:

SmartSelfieInstructionsScreen()

Customizing the Flutter SDK requires leveraging native SDK capabilities. This page details how to do so for each platform

To override strings, create a string resource file in your Android module. It should look something like android/app/src/main/res/values/strings.xml, however the exact path could vary depending on your project's structure.

Similarly, to change colors on Android, create a colors resource file, whose path should look something like (but maybe not exactly): android/app/src/main/res/values/colors.xml

Then, follow the instructions located at the Android docs under the XML resources tab.

To leverage native iOS capabilities, you can define your color scheme as a Swift file in your ios module, at ios/Runner/CustomSmileTheme.swift (the exact path may vary depending on your project setup). It is recommended to use Xcode to make these changes.

Once the theme has been defined, you must set it in your AppDelegate by calling SmileID.apply(). This will most likely be located at ios/Runner/AppDelegate.swift (the exact path may vary depending on your project setup).

The full details on how to define the Swift Colors file is available here:

Similarly, for localization, create a Localizable.strings file in the Xcode project, define an instance of SmileIDLocalizableStrings , and set it using SmileID.appy(). The full details on how to define the Localizations is available here:

Selfie Capture

We also make available the smaller building-block UI components for selfie capture which goes through the flow and you can configure which screens or step to show which include the below

  • Selfie capture instruction screen which can be shown or hidden

  • Selfie capture screen

  • Selfie confirmation which can be shown or hidden

SmileIDSmartSelfieCaptureView(
  showConfirmationDialog: true, //if true will show confirmation dialog after a successful selfie capture
  showInstructions: true, //if true will show instruction screen before selfie capture
  showAttribution: true, //if true will show SmileID attribution on the instruction screen
  allowAgentMode: true,//if true will show the switch for agent mode
  onSuccess: (String? result) {
    // Your success handling logic
    Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
    String formattedResult = jsonEncode(jsonResult);
  },
  onError: (String errorMessage) {
    // Your error handling logic
  },
)
 <SmileIDSmartSelfieCaptureView
    allowAgentMode: true, //if true will show the switch for agent mode
    showInstructions: true, //if true will show instruction screen before selfie capture
    showAttribution: true, //if true will show SmileID attribution on the instruction screen
    showConfirmation: true,//if true will show confirmation dialog after a successful selfie capture
    onResult={(event) => {
      if (event.nativeEvent.error) {
        //handle error
        return;
      }
    //handle success
    }}
  />

Document Capture

We also make available the smaller building-block UI components for document capture which goes through the flow and you can configure which screens or step to show which include the below

  • Document capture instruction screen which can be shown or hidden

  • Document capture screen

  • Document confirmation which can be shown or hidden

SmileIDDocumentCaptureView(
 isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
 showInstructions: true, //if true will show instruction screen before document capture
 showAttribution: true, //if true will show SmileID attribution on the instruction screen
 showConfirmationDialog: true,//if true will show confirmation dialog after a successful document capture
 allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
 onSuccess: (String? result) {
    // Your success handling logic
    Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
    String formattedResult = jsonEncode(jsonResult);
  },
 onError: (String errorMessage) {
    // Your error handling logic
  },
)
 <SmileIDDocumentCaptureView
    isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
    showInstructions: true, //if true will show instruction screen before document capture
    showAttribution: true, //if true will show SmileID attribution on the instruction screen
    showConfirmation: true,//if true will show confirmation dialog after a successful document capture
    allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
    onResult={(event) => {
      if (event.nativeEvent.error) {
        //handle error
        return;
      }
    //handle success
    }}
  />
https://javadoc.io/doc/com.smileidentity/android-sdk/latest/allclasses.html
https://smileidentity.github.io/ios/documentation/smileid
XML Resources
Theming
Localization and Copy