paybito-slider-captcha
Advanced tools
A beautiful, interactive slider-based CAPTCHA verification system with puzzle piece matching. Provides secure human verification with an elegant user interface.
A beautiful, interactive slider-based CAPTCHA verification system with puzzle piece matching. Provides secure human verification with an elegant, responsive user interface.
npm install paybito-slider-captcha
Or include directly in HTML:
<script src="https://unpkg.com/paybito-slider-captcha@latest/index.js"></script>
// 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');
}
});
<!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>
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;
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
});
| 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 |
verify(callback)Shows the verification modal and starts the verification process.
captcha.verify((result) => {
// Handle verification result
});
Parameters:
callback (Function): Called when verification completesCallback 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();
| 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 |
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;
}
const captcha = new VerificationSlider({
defaultImage: 'https://your-domain.com/custom-puzzle-image.jpg'
});
<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>
// 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);
};
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');
}
});
The captcha automatically adapts to different screen sizes:
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();
MIT License - see LICENSE file for details.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)Made with ❤️ for better web security
FAQs
A beautiful, interactive slider-based CAPTCHA verification system with puzzle piece matching. Provides secure human verification with an elegant user interface.
We found that paybito-slider-captcha demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.