paybito-slider-captcha

v1.1.3

Published

3 months ago

A beautiful, interactive slider-based CAPTCHA verification system with puzzle piece matching. Provides secure human verification with an elegant user interface.

Downloads

131

0High
0Medium
0Low

atharhashcash

captcha slider verification security puzzle human-verification anti-bot paybito interactive frontend javascript web-security slider-captcha puzzle-captcha

🧩 Paybito Slider Captcha

A beautiful, interactive slider-based CAPTCHA verification system with puzzle piece matching. Provides secure human verification with an elegant, responsive user interface.

✨ Features

🎯 Interactive Puzzle Matching - Drag slider to match puzzle piece position
🎨 Beautiful UI - Modern, responsive design with smooth animations
🔒 Secure Verification - Integrates with Paybito's CAPTCHA API
📱 Mobile Friendly - Fully responsive design for all devices
🎭 Multiple Shapes - Star, circle, triangle, diamond, puzzle, and heart shapes
⚡ Zero Dependencies - Pure JavaScript, no external libraries required
🛡️ Anti-Bot Protection - Effective against automated attacks
🔧 Easy Integration - Simple API with customizable options

🚀 Installation

npm install paybito-slider-captcha

Or include directly in HTML:

<script src="https://unpkg.com/paybito-slider-captcha@latest/index.js"></script>

📋 Quick Start

Basic Usage

// Import the library
const VerificationSlider = require('paybito-slider-captcha');

// Create instance
const captcha = new VerificationSlider({
  apiEndpoint : 'YOUR_VERIFICATION_API_ENDPOINT'
});

// Show verification
captcha.verify((result) => {
  if (result.success) {
    console.log('✅ Verification successful!');
    console.log('Session ID:', result.sessionId);
    console.log('Response:', result.gRecaptchaResponse);
  } else {
    console.log('❌ Verification failed or cancelled');
  }
});

HTML Integration

<!DOCTYPE html>
<html>
<head>
  <title>CAPTCHA Demo</title>
</head>
<body>
  <button onclick="showCaptcha()">Verify Human</button>
  
  <script src="https://unpkg.com/paybito-slider-captcha@latest/index.js"></script>
  <script>
    function showCaptcha() {
      // Use the global instance
      verificationSlider.verify((result) => {
        if (result.success) {
          alert('✅ Verification successful!');
        } else {
          alert('❌ Verification failed');
        }
      });
    }
  </script>
</body>
</html>

React Integration

import React, { useEffect, useRef } from 'react';
import VerificationSlider from 'paybito-slider-captcha';

function CaptchaComponent() {
  const captchaRef = useRef(null);

  useEffect(() => {
    captchaRef.current = new VerificationSlider({
      tolerance: 8,
      defaultImage: 'https://example.com/custom-image.jpg'
    });

    return () => {
      if (captchaRef.current) {
        captchaRef.current.destroy();
      }
    };
  }, []);

  const handleVerification = () => {
    captchaRef.current.verify((result) => {
      if (result.success) {
        console.log('Verification successful!', result);
        // Handle successful verification
      } else {
        console.log('Verification failed');
        // Handle failed verification
      }
    });
  };

  return (
    <div>
      <button onClick={handleVerification}>
        🛡️ Verify Human
      </button>
    </div>
  );
}

export default CaptchaComponent;

⚙️ Configuration Options

const captcha = new VerificationSlider({
  // API endpoint for CAPTCHA generation
  apiEndpoint: 'Your_endpoint_url',
  
  // Position matching tolerance (pixels)
  tolerance: 5,
  
  // Default image to use for puzzles
  defaultImage: 'https://example.com/puzzle-image.jpg',
  
  // Image dimensions
  imageWidth: 300,
  imageHeight: 200,
  
  // Puzzle piece size
  pieceSize: 50
});

Configuration Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | apiEndpoint | string | Paybito API URL | CAPTCHA generation endpoint | | tolerance | number | 5 | Position matching tolerance in pixels | | defaultImage | string | Default image URL | Fallback image for puzzles | | imageWidth | number | 300 | Canvas width in pixels | | imageHeight | number | 200 | Canvas height in pixels | | pieceSize | number | 50 | Puzzle piece size in pixels |

🎯 API Reference

Methods

`verify(callback)`

Shows the verification modal and starts the verification process.

captcha.verify((result) => {
  // Handle verification result
});

Parameters:

callback (Function): Called when verification completes

Callback Result:

{
  success: boolean,           // Whether verification succeeded
  sessionId?: string,         // Session ID (on success)
  gRecaptchaResponse?: string // Encrypted response (on success)
}

`init()`

Manually initialize the captcha (called automatically by verify()).

captcha.init();

`hideModal()`

Programmatically hide the verification modal.

captcha.hideModal();

`refreshCaptcha()`

Generate a new puzzle challenge.

captcha.refreshCaptcha();

`destroy()`

Clean up resources and remove the captcha from DOM.

captcha.destroy();

Properties

| Property | Type | Description | |----------|------|-------------| | isInitialized | boolean | Whether the captcha is initialized | | isVisible | boolean | Whether the modal is currently visible | | sliderValue | number | Current slider position (0-100) | | tolerance | number | Position matching tolerance |

🎨 Customization

Custom Styling

The captcha uses CSS classes that can be customized:

/* Override modal appearance */
.verification-modal {
  max-width: 600px !important;
  border-radius: 20px !important;
}

/* Custom header colors */
.verification-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Custom slider colors */
.verification-slider::-webkit-slider-thumb {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
}

.verification-slider-fill {
  background: linear-gradient(90deg, #ff6b6b, #ee5a24) !important;
}

Custom Images

const captcha = new VerificationSlider({
  defaultImage: 'https://your-domain.com/custom-puzzle-image.jpg'
});

🔒 Security Features

Server-Side Validation - Verification happens on Paybito's secure servers
Encrypted Responses - SHA-256 encrypted verification data
Session Management - Unique session IDs for each verification
Anti-Automation - Multiple puzzle shapes and randomized positions
Timeout Protection - Automatic refresh after inactivity

🌟 Advanced Usage

Form Integration

<form id="loginForm">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="button" onclick="verifyCaptcha()">Login</button>
</form>

<script>
function verifyCaptcha() {
  verificationSlider.verify((result) => {
    if (result.success) {
      // Add CAPTCHA data to form
      const form = document.getElementById('loginForm');
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = 'captcha_response';
      hiddenField.value = result.gRecaptchaResponse;
      form.appendChild(hiddenField);
      
      // Submit form
      form.submit();
    }
  });
}
</script>

Multiple Instances

// Create multiple captcha instances
const loginCaptcha = new VerificationSlider({ tolerance: 5 });
const registerCaptcha = new VerificationSlider({ tolerance: 8 });

// Use different instances for different forms
document.getElementById('loginBtn').onclick = () => {
  loginCaptcha.verify(handleLoginVerification);
};

document.getElementById('registerBtn').onclick = () => {
  registerCaptcha.verify(handleRegisterVerification);
};

Error Handling

captcha.verify((result) => {
  if (result.success) {
    // Success handling
    console.log('✅ Verification successful');
    // Proceed with form submission
  } else {
    // Failure handling
    console.log('❌ Verification failed');
    // Show error message to user
    showErrorMessage('Please complete the verification');
  }
});

📱 Mobile Responsiveness

The captcha automatically adapts to different screen sizes:

Desktop: Full-featured modal with hover effects
Tablet: Optimized touch interactions
Mobile: Responsive layout with larger touch targets

🔧 Troubleshooting

Common Issues

1. Modal not showing

// Ensure the captcha is properly initialized
if (!captcha.isInitialized) {
  captcha.init();
}

2. API errors

// Check network connectivity and API endpoint
// Verify CORS settings if using custom endpoint

3. Styling conflicts

// The captcha uses high z-index (10000)
// Ensure no other elements interfere

4. Multiple instances

// Always destroy previous instances
captcha.destroy();
const newCaptcha = new VerificationSlider();

🌐 Browser Support

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
✅ Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
📖 Documentation: GitHub Repository

Made with ❤️ for better web security