Synaps
Search…
Vue3
In this section, we will see how to integrate your Verify with Synaps component easily.
If you need any assistance, don't hesitate to contact technical support at [email protected]

npm
yarn
npm install @synaps-io/vue3-verify
yarn add @synaps-io/vue3-verify

Individual(KYC)
Corporate(KYB)
<template>
<div id="app">
<synaps-verify
:sessionId="SESSION_ID"
:color="{ primary: '212b39', secondary: 'ffffff' }"
lang="en"
service="individual"
@ready="print('ready')"
@finish="print('finish')"
/>
</div>
</template>
<script>
import SynapsVerify from '@synaps-io/vue2-verify'
export default {
name: "App",
components: {
SynapsVerify,
},
methods: {
print(data) {
console.log(data);
},
},
};
</script>
<template>
<div id="app">
<synaps-verify
:sessionId="SESSION_ID"
:color="{ primary: '212b39', secondary: 'ffffff' }"
lang="en"
service="corporate"
@ready="print('ready')"
@finish="print('finish')"
/>
</div>
</template>
<script>
import SynapsVerify from '@synaps-io/vue2-verify'
export default {
name: "App",
components: {
SynapsVerify,
},
methods: {
print(data) {
console.log(data);
},
},
};
</script>

If you want to know more about what is individual (KYC) or what is corporate (KYB) and how to set them up you can click on these two links:

To get a session_id you need to create an app on Synaps Manager. Once you selected your service type, you will have to go in your "integration" tab and copy your Api-Key.
The Api-Key MUST NOT be stored in your frontend. You have to store it on your server and never on the client side. The only thing that should be exposed to the user is the session_id.
To create a session_id, you have to call the API related to the service you chose. For instance, if you chose Identity service, go to Identity > Sessions in the documentation.

Individual(KYC)
Corporate(KYB)

Prop name
Prop type
Default
Required
Description
sessionId
string
''
Y
Session can be referred as a customer verification session. More info
service
string
''
Y
individual - for know your customer corporate - for know your business
lang
string
'en'
N
Event listener called on every open/close action
tier
int
null
N
Tier is a simply way to divide your workflow into small pieces. It is very useful when you offer different features based on the verification level of your customer. More info
color
{primary : string, secondary: string}
null
N
You can set a primary color and a secondary color, it will create a verification flow tailored to your compliance needs and your brand.
ready
event
null
N
Event emited called when the page is fully loaded
finish
event
null
N
Event emited called when the user finished verification

We give you the possibility to customize your workflow with your colors. You can set a primary color and a secondary color, it will create a verification flow tailored to your compliance needs and your brand.
To add primary and secondary colors, simply add colors with primary and secondary inside without the hashtag '#'.
<template>
...
<synaps-verify
...
:color="{ primary: '212b39', secondary: 'ffffff' }"
/>
...
</template>

You can set a predefined language for your user. Synaps already take advantage of browser language to display the relevant language to the end-user but if your user has set up a language option to your website, you can definitely pass it as an option.
<template>
...
<synaps-verify
...
lang="fr"
/>
...
</template>

As explained before in the documentation, tiers is a simply way to divide your workflow into small pieces. It is very useful when you offer different features based on the verification level of your customer.
Tier System on WeStart
To create your own tier, check out the step-by-step guide
Once created, you will have your tier_id , You will have to pass it in the options objects while initialising the SDK.
<template>
...
<synaps-verify
...
tier="2349823482"
/>
...
</template>

Last modified 4mo ago
Copy link
On this page
1. Install
2. Usage
What is Individual or Corporate ?
session_id ?
Props
Customization
3. Examples