berbix-vue

<!-- 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'); -->