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
            • 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
          • 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
  • Steps
  • Fetch the Web Token from your server
  • Configure the Web Integration
  • Test the Integration
  • Theme Color

Was this helpful?

  1. Integration Options
  2. Web / Mobile Web
  3. Web Integration

Usage

How to use the Smile ID Web Integration

Steps

  1. Fetch the web token from your server, when ready

  2. Configure the web integration

  3. Test the Integration

Fetch the Web Token from your server

Using the Web Token endpoint set up on your server, fetch a web token for the client

This can take the form of a click event on your web site or application.

const baseAPIURL = `${your - API - server - URL}`;

const getWebToken = async (baseAPIURL) => {
  const fetchConfig = {};

  fetchConfig.cache = "no-cache";
  fetchConfig.mode = "cors";
  fetchConfig.headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
  };
  fetchConfig.method = "POST";

  const URL = `${baseAPIURL}/token/`;
  try {
    const response = await fetch(URL, fetchConfig);

    if (response.status === 200 || response.statusCode === 200) {
      const json = await response.json();

      if (json.error) {
        throw new Error(json.error);
      }

      return json;
    }
  } catch (e) {
    console.log(`API: ${e.name}, ${e.message}`);
    throw e;
  }
};

const verifyWithSmileIdentityButton = document.querySelector(
  "#verify-with-smile-id",
);

verifyWithSmileIdentityButton.addEventListener(
  "click",
  async (e) => {
    e.preventDefault();

    verifyWithSmileIdentityButton.textContent = "Initializing session...";
    verifyWithSmileIdentityButton.disabled = true;

    const { token } = await getWebToken(baseAPIURL);
  },
  false,
);

Configure the Web Integration

With the web token, we can now configure our integration

const configureSmileIdentityWebIntegration = (token) => {
  SmileIdentity({
    token,
    product: "biometric_kyc",
    callback_url: `${your - API - server - URL}/callback`,
    environment: "sandbox",
    partner_details: {
      partner_id: `${your - smile - identity - partner - id}`,
      name: `${your - app - name}`,
      logo_url: `${your - app - logo - url}`,
      policy_url: `${your - data - privacy - policy - url}`,
      theme_color: "#000",
    },
    partner_params:{
        "sample_meta_data": "meta-data-value", //include meta data
        "sandbox_result" : "0" //mock sandbox result
    }, 
    onSuccess: () => {},
    onClose: () => {},
    onError: () => {},
  });
};

// ACTION: call the initialization function in the event handler
verifyWithSmileIdentityButton.addEventListener(
  "click",
  async (e) => {
    e.preventDefault();

    verifyWithSmileIdentityButton.textContent = "Initializing session...";
    verifyWithSmileIdentityButton.disabled = true;

    try {
      const { token } = await getWebToken(baseAPIURL);
      configureSmileIdentityWebIntegration(token);
    } catch (e) {
      throw e;
    }
  },
  false,
);

The API for configuring the integration is as follows

Key
Type
Required
Description

token

string

Yes

token generated on the server side using the get_web_token method in one of our server-to-server libraries

product

string

Yes

one of the Smile ID products. "biometric_kyc" "doc_verification "authentication" "basic_kyc" "smartselfie" "enhanced_kyc" "enhanced_document_verification"

"e_signature"

document_ids

array

Yes (for e_signature)

a list of previously uploaded document IDs

callback_url

string

Yes

a callback URL on your API server or wherever you prefer.

environment

string

Yes

one of "sandbox" or "live"

partner_details

object

Yes

partner_params

object

No

onSuccess

function

No

function to handle successful completion of the verification.

onError*

function

No

function to handle errors with verification, called when end-user consent is denied

onClose

function

No

function to handle closing of the verification process

id_selection**

object

No

{

"NG": ["BVN_MFA", "V_NIN"]

}

consent_required ***

object

Yes, for ID Types where user consent is required.

{

"NG": ["BVN", "NIN"]

}

document_capture_modes

array

No

list containing camera or upload or both defaults to camera

allow_agent_mode

boolean

No

Whether to allow Agent Mode or not. If allowed, a button will be displayed allowing toggling between the back camera and front camera. If not allowed, only the front camera will be used. To use agent mode, the new design should be opted for by setting use_new_component: true

* - onError function can take one argument of the shape { message: <message>, data: <object with details> }

** - id_selection list is checked against those enabled for your partner account. this is limited in cases of basic_kyc, enhanced_kyc, enhanced_document_verification, and biometric_kyc.

If you pass only one country and id type in theid_selection object, the id type selection screen will not be displayed in the web integration instance

*** - consent_required list is subject to the ID Authority configuration. Some ID Authorities require end-user consent, and that requirement overrides this setting.

partner_details configuration reference

Key
Type
Required
Description

name

string

Yes

Application Name

partner_id

string

Yes

Smile ID Partner ID

policy_url

string

Yes

URL to data privacy policy

logo_url

string

Yes

URL to App Logo (best in 1:1 aspect ratio)

theme_color

string

No

Test the Integration

After configuring the integration, you can walk through an example.

Theme Color

PreviousInstallationNextEnd User Consent

Last updated 1 month ago

Was this helpful?

customizations for your organization. details

a collection of partner additional information. All its contents are sent back to the partner but in a slightly different format. The objects key name is changed to PartnerParams. It can be used to hold meta data related to the user or the job. Additionally, if you intend to , you should include the include the sandbox_result key as

a mapping of country code to a selection of e.g.

a mapping of country code to a selection of e.g.

a valid CSS Color Code for accent colors. When specified with the use_new_component: true, the color will be applied to header texts and buttons. Refer to

supported id types
supported id types
here
theme color
mock the sandbox results
string value "0", "1" or "2"