Synaps

Verify SDK for Web

In this comprehensive guide, we'll navigate you through the essential steps to kickstart your journey with the Synaps Verify SDK on Web platform.

Add package

Package manager

npm install @synaps-io/verify-sdk

Properties

  • Name
    sessionId
    Type
    string
    Description

    Unique verification session identifier

  • Name
    mode
    Type
    string
    Description

    modal - Opens a modal using Synaps.show()

    embed - Load directly into your div containerId

  • Name
    onFinish()
    Type
    callback (optional)
    Description

    Callback when the user finishes the verification process

  • Name
    onClose()
    Type
    callback (optional)
    Description

    Callback when the user closes the verification process

  • Name
    service
    Type
    string (optional)
    Description

    individual for KYC (default)

    corporate for KYB

  • Name
    containerId
    Type
    string (optional)
    Description

    required when using embed mode

  • Name
    withFinishButton
    Type
    boolean (optional)
    Description

    When using embed mode, add a finish button on the offboarding screen

  • Name
    lang
    Type
    string (optional)
    Description

    User language preference

    en - English

    fr - French

    de - German

    es - Spanish

    it - Italian

    ja - Japanese

    ko - Korean

    pt - Portuguese

    ro - Romanian

    ru - Russian

    tr - Turkish

    vi - Vietnamese

    zh-CN - Simplified Chinese

    zh-TW - Traditional Chinese

Web libraries

Javascript

Reusable, encapsulated HTML elements for building web applications.

Use it

React

React is a javaScript library for building user interfaces based on UI components

Use it

Vue

Progressive JavaScript framework for building user interfaces.

Use it

Angular

Angular is a TypeScript-based, free and open-source web application framework

Use it

Svelte

A lightweight, efficient JavaScript framework for building UIs.

Use it

Javascript

1. Add Synaps element

There is two integration methods: modal or embed

modal: place a button and open the verification flow when user click on the button

embed: integrate directly the verification flow into your interface

2. Modal integration (verify with Synaps button)

Add the following element to your page to add the button.

latest SDK version is: latest
<button id="synaps-btn">Verify with Synaps</button>

Don't forget to replace $YOUR_SESSION_ID with your own session id.

3. Embed integration

Add the following element to add the verification flow to your page.

<div class="App">
  <div style="width: 300px; height: 600px;" id="synaps-wrapper"></div>
</div>

Don't forget to replace $YOUR_SESSION_ID with your own session id.

React

  1. Add package
  2. Read properties

  3. Test examples

Verify example with Modal mode

verify-modal.jsx

import { Synaps } from '@synaps-io/verify-sdk'
import { useEffect } from 'react'

const Modal = () => {
  useEffect(() => {
    // Prevent multiple initializations with react strict mode
    // https://react.dev/learn/synchronizing-with-effects#fetching-data
    let init = true

    Synaps.init({
      sessionId: '$YOUR_SESSION_ID',
      onFinish: () => {
        alert('Verification finished')
      },
      mode: 'modal',
    })

    return () => {
      init = false
    }
  }, [])

  const handleOpen = () => {
    Synaps.show()
  }

  return (
    <div className="App">
      <button onClick={handleOpen}>Start verification</button>
    </div>
  )
}

export default Modal

Verify example with Embed mode

verify-embed.jsx

import { Synaps } from '@synaps-io/verify-sdk'
import { useEffect } from 'react'

const Embed = () => {
  useEffect(() => {
    // Prevent multiple initializations with react strict mode
    // https://react.dev/learn/synchronizing-with-effects#fetching-data
    let init = true

    Synaps.init({
      sessionId: '$YOUR_SESSION_ID',
      onFinish: () => {
        alert('Verification finished')
      },
      mode: 'embed',
    })

    return () => {
      init = false
    }
  }, [])

  return (
    <div className="App">
      <div style={{ width: 300, height: 600 }} id={'synaps-wrapper'} />
    </div>
  )
}

export default Embed

Vue

  1. Add package
  2. Read properties

  3. Test examples

Verify example with Modal mode

Modal.vue

<script>
import {Synaps} from "@synaps-io/verify-sdk";
import {defineComponent} from "vue";

export default defineComponent({

  mounted() {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "modal",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  },

  methods: {
    handleOpen() {
      Synaps.show();
    }
  }
})
</script>

<template>
    <div>
        <button v-on:click="this.handleOpen()">
            Start verification
        </button>
    </div>
</template>

Verify example with Embed mode

Embed.vue

<script>
import { Synaps } from "@synaps-io/verify-sdk";
import { defineComponent } from "vue";

export default defineComponent({

  mounted() {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "embed",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  },
})
</script>

<template>
    <div>
        <div style="width: 300px; height: 600px" id="synaps-wrapper"></div>
    </div>
</template>

Svelte

  1. Add package
  2. Read properties

  3. Test examples

Verify example with Modal mode

VerifyModal.svelte

<script lang="ts">
  import {Synaps} from "@synaps-io/web-sdk";
  import {onMount} from "svelte";

  onMount(() => {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "embed",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  })
</script>

<main>
    <div style="width: 300px; height: 600px" id="synaps-wrapper"/>
</main>

Verify example with Embed mode

VerifyEmbed.svelte

<script lang="ts">
  import {Synaps} from "@synaps-io/web-sdk";
  import {onMount} from "svelte";

  onMount(() => {
    Synaps.init({
      sessionId: "$YOUR_SESSION_ID",
      mode: "modal",
      onFinish: () => {
        alert("Verification finished")
      }
    })
  })

    function handleOpen() {
        Synaps.show()
    }
</script>

<main>
    <button on:click={handleOpen}>
        Start verification
    </button>
</main>

Angular

  1. Add package
  2. Read properties

  3. Test examples

Verify example with Modal mode

<div>
<button (click)="handleOpen()">
Start verification
</button>
<div id="synaps-wrapper"></div>
</div>

Verify example with Embed mode

<div>
<button (click)="handleOpen()">
Start verification
</button>
<div id="synaps-wrapper"></div>
</div>