Přeskočit na hlavní obsah

Příklady použití widgetu

Základní implementace​

Nejjednodušší integrace​

<!DOCTYPE html>
<html>
<head>
    <title>Ověření telefonu</title>
</head>
<body>
    <button id="verify-btn">Ověřit telefonní číslo</button>
    
    <script src="https://verify-widget.smsmanager.com/modal.js"></script>
    <script>
        const modal = new PhoneValidationModal({
            apiKey: 'váš-api-klíč',
            onSuccess: function(data) {
                alert('Číslo ' + data.phoneNumber + ' bylo ověřeno!');
            }
        });
        
        document.getElementById('verify-btn').onclick = function() {
            modal.open();
        };
    </script>
</body>
</html>

React integrace​

import React, { useEffect, useRef, useState } from 'react';

// Custom hook pro phone validation
function usePhoneValidation(config) {
    const modalRef = useRef(null);
    const [isVerified, setIsVerified] = useState(false);
    const [verifiedPhone, setVerifiedPhone] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    
    useEffect(() => {
        // Dynamicky načíst script
        const script = document.createElement('script');
        script.src = 'https://verify-widget.smsmanager.com/modal.js';
        script.async = true;
        
        script.onload = () => {
            modalRef.current = new window.PhoneValidationModal({
                ...config,
                onSuccess: (data) => {
                    setIsVerified(true);
                    setVerifiedPhone(data.phoneNumber);
                    setIsLoading(false);
                    
                    if (config.onSuccess) {
                        config.onSuccess(data);
                    }
                },
                onError: (error) => {
                    setIsLoading(false);
                    
                    if (config.onError) {
                        config.onError(error);
                    }
                }
            });
        };
        
        document.body.appendChild(script);
        
        return () => {
            document.body.removeChild(script);
            if (modalRef.current) {
                modalRef.current.close();
            }
        };
    }, []);
    
    const verify = () => {
        if (modalRef.current) {
            setIsLoading(true);
            modalRef.current.open();
        }
    };
    
    return {
        verify,
        isVerified,
        verifiedPhone,
        isLoading
    };
}

// React komponenta
function PhoneVerificationButton({ apiKey, onVerified }) {
    const { verify, isVerified, verifiedPhone, isLoading } = usePhoneValidation({
        apiKey: apiKey,
        language: 'cs',
        defaultCountry: 'CZ',
        primaryColor: '#3b82f6',
        onSuccess: onVerified
    });
    
    if (isVerified) {
        return (
            <div className="verified-phone">
                <span className="checkmark">✓</span>
                <span>{verifiedPhone}</span>
            </div>
        );
    }
    
    return (
        <button 
            onClick={verify} 
            disabled={isLoading}
            className="verify-button"
        >
            {isLoading ? 'Načítání...' : 'Ověřit telefon'}
        </button>
    );
}

// Použití v aplikaci
function RegistrationForm() {
    const [formData, setFormData] = useState({});
    
    const handlePhoneVerified = (data) => {
        setFormData(prev => ({
            ...prev,
            phone: data.phoneNumber,
            phoneVerified: true,
            verificationToken: data.token
        }));
    };
    
    return (
        <form>
            <input type="text" placeholder="Jméno" />
            <input type="email" placeholder="Email" />
            
            <PhoneVerificationButton 
                apiKey="váš-api-klíč"
                onVerified={handlePhoneVerified}
            />
            
            <button 
                type="submit" 
                disabled={!formData.phoneVerified}
            >
                Registrovat
            </button>
        </form>
    );
}