Berbix Vue SDK

1.0.1 · active · verified Sun Apr 19

The berbix-vue SDK provides a dedicated Vue.js component for integrating the Berbix identity verification flow into web applications. Berbix itself offers a fully automated and instant identity verification solution, leveraging biometric scans combined with data extraction from government-issued IDs (such as driver's licenses and passports) to quickly and accurately confirm user identities. The SDK simplifies the client-side integration of this complex process, handling the user interface and interactions necessary for the verification flow, which includes real-time coaching for optimal image capture and selfie submission. Currently at version 1.0.1, the package is designed to assist developers in building secure onboarding, age verification, and KYC (Know Your Customer) processes within Vue environments. Its core differentiators lie in its high accuracy, exceptionally low false acceptance rate (0.1%), and a rapid 2-second response time for verification results, aiming to optimize both security and user conversion. While the package specifies 'Vue 2.x release support', modern Vue development primarily targets Vue 3, necessitating careful consideration of the specific Vue version used for integration.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to integrate the BerbixVerify component into a Vue 3 application using the Composition API. It shows how to pass a clientToken, handle completion and error events, and display the verification status. Remember to obtain `clientToken` securely from your backend.

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import { BerbixVerify } from 'berbix-vue';
import type { BerbixEvent } from 'berbix-vue'; // Assuming BerbixEvent type exists

// IMPORTANT: Replace with a valid, secure clientToken obtained from your backend.
// Never expose sensitive tokens directly in your frontend code.
const clientToken = ref('YOUR_BERBIX_CLIENT_TOKEN_FROM_BACKEND'); 
const verificationStatus = ref('Pending');

const handleVerificationComplete = (event: BerbixEvent) => {
  console.log('Berbix verification complete:', event);
  // event.status could be 'accepted', 'rejected', 'expired', etc.
  verificationStatus.value = event.status;
  alert(`Verification finished with status: ${event.status}`);

  // Typically, you would send this event data to your backend for server-side verification.
  // fetch('/api/berbix-webhook', { method: 'POST', body: JSON.stringify(event) });
};

const handleError = (error: any) => {
  console.error('Berbix verification error:', error);
  verificationStatus.value = 'Error';
  alert(`Verification error: ${error.message || 'Unknown error'}`);
};

// Example: Logic to refresh the client token and re-initiate verification if needed
const refreshVerification = () => {
  console.log("Attempting to refresh client token and re-initiate verification...");
  // In a real application, this would involve an API call to your backend
  // to fetch a new clientToken. Update clientToken.value when ready.
  clientToken.value = 'NEW_CLIENT_TOKEN_FROM_BACKEND'; // Placeholder for new token
  verificationStatus.value = 'Pending'; // Reset status
};
</script>

<template>
  <div id="app-container">
    <h1>Berbix Identity Verification</h1>
    <p>Current Status: <strong>{{ verificationStatus }}</strong></p>

    <div v-if="verificationStatus === 'Pending' || verificationStatus === 'Error'">
      <p>Please complete the identity verification process.</p>
      <div class="berbix-widget-container">
        <BerbixVerify 
          :clientToken="clientToken" 
          @complete="handleVerificationComplete"
          @error="handleError"
          :key="clientToken" <!-- Use key to force component re-render if clientToken changes -->
        />
      </div>
      <button v-if="verificationStatus === 'Error'" @click="refreshVerification" style="margin-top: 20px;">Try Verification Again</button>
    </div>
    <div v-else-if="verificationStatus === 'accepted'">
      <p>Verification flow successfully completed. You can now proceed.</p>
      <!-- Further application logic after successful verification -->
    </div>
    <div v-else>
      <p>Verification flow ended with status: {{ verificationStatus }}.</p>
    </div>
  </div>
</template>

<style>
#app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.berbix-widget-container {
  border: 1px solid #eee;
  padding: 20px;
  margin: 20px auto;
  max-width: 600px;
  min-height: 400px; /* Give some space for the widget */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<!-- src/main.ts -->
<!-- import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app'); -->

view raw JSON →