Adding SMS OTP verification to your website is one of the most effective ways to secure user accounts, prevent fraud, and build trust with your users. Whether you're building a fintech platform, an e-commerce store, or a membership site, this guide will walk you through the complete integration process.
Why Add SMS OTP Verification to Your Website?
SMS OTP verification provides:
- Enhanced Security: Adds a second factor of authentication beyond passwords.
- Fraud Prevention: Reduces the risk of account takeovers and unauthorized access.
- User Trust: Shows users you take their security seriously.
- Regulatory Compliance: Meets security requirements for financial and other regulated services.
- Reduced Support Costs: Prevents account-related support tickets by verifying users upfront.
Prerequisites
Before you begin, ensure you have:
- A registered website or web application
- A backend server (PHP, Node.js, Python, etc.)
- An account with an SMS verification provider (like Fujest OTP)
- API credentials (API key and account ID)
- A basic understanding of HTTP requests and JSON
Step 1: Sign Up for an SMS Verification Provider
The first step is to create an account with a reliable SMS verification provider. For Nigerian users, Fujest OTP offers affordable rates and local payment options.
- Visit the provider's website and sign up for an account
- Verify your account and obtain your API credentials
- Fund your account with your preferred payment method
Pro Tip: For Nigerian developers, Fujest OTP offers the most affordable rates with Naira payment options, making it easy to integrate OTP verification into your website without worrying about foreign exchange costs.
Step 2: Design the User Interface
Your website needs a simple, intuitive interface for OTP verification. Here's a basic HTML structure:
<!-- Phone Number Input Step -->
<div id="phoneStep">
<h3>Enter Your Phone Number</h3>
<form id="sendOtpForm">
<input type="tel" id="phoneNumber" placeholder="0803XXXX1234" required>
<button type="submit">Send Verification Code</button>
</form>
</div>
<!-- OTP Input Step (hidden initially) -->
<div id="otpStep" style="display:none;">
<h3>Enter Verification Code</h3>
<p>We sent a 6-digit code to </p>
<form id="verifyOtpForm">
<input type="text" id="otpCode" placeholder="123456" maxlength="6" required>
<button type="submit">Verify</button>
</form>
<button id="resendBtn">Resend Code (60s)</button>
</div>
Step 3: Backend – Send OTP
When a user submits their phone number, your backend generates an OTP and sends it via the SMS API. Here's an example using PHP and cURL:
<?php
// === SEND OTP API CALL ===
$apiKey = "YOUR_API_KEY";
$phone = "234" . ltrim($_POST['phone'], "0"); // Format: 234803XXXX1234
// Generate 6-digit OTP
$otp = sprintf("%06d", mt_rand(0, 999999));
// Store OTP in session with timestamp
$_SESSION['otp'] = [
'code' => $otp,
'phone' => $phone,
'expires' => time() + 300 // 5 minutes,
'attempts' => 0
];
// Send SMS via API
$apiUrl = "https://api.smsprovider.com/send";
$message = "Your verification code is: " . $otp . " Valid for 5 minutes.";
$postData = [
'api_key' => $apiKey,
'mobile' => $phone,
'message' => $message
];
$ch = curl_init($apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postData));
$response = curl_exec($ch);
$result = json_decode($response, true);
echo json_encode(['success' => $result['status'] ?? false]);
?>
Pro Tip: Format Nigerian phone numbers correctly. The API expects
234 803XXXX1234 (no + sign, space between country code and number). If using Termii, use E.164 format +234803XXXX1234.
Step 4: Backend – Verify OTP
When the user enters the OTP, your backend validates it:
<?php
// === VERIFY OTP ===
$userCode = $_POST['otp'];
$stored = $_SESSION['otp'] ?? null;
if (!$stored) {
$response = ['success' => false, 'message' => "No OTP session found"];
} elseif (time() > $stored['expires']) {
$response = ['success' => false, 'message' => "OTP has expired"];
} elseif ($stored['attempts'] >= 3) {
$response = ['success' => false, 'message' => "Too many attempts"];
} elseif ($stored['code'] == $userCode) {
// OTP verified successfully
$_SESSION['verified'] = true;
unset($_SESSION['otp']); // Invalidate OTP
$response = ['success' => true, 'message' => "Verified successfully"];
} else {
$_SESSION['otp']['attempts']++;
$response = ['success' => false, 'message' => "Invalid code"];
}
echo json_encode($response);
?>
Step 5: Frontend JavaScript
Use JavaScript to handle form submissions, display loading states, and show/hide the OTP input step:
// === FRONTEND JAVASCRIPT ===
const sendOtpForm = document.getElementById('sendOtpForm');
const verifyOtpForm = document.getElementById('verifyOtpForm');
// Send OTP request
sendOtpForm.addEventListener('submit', async (e) => {
e.preventDefault();
const phone = document.getElementById('phoneNumber').value;
// Show loading state
try {
const response = await fetch('/send-otp.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ phone })
});
const data = await response.json();
if (data.success) {
// Show OTP step and start countdown
document.getElementById('phoneStep').style.display = 'none';
document.getElementById('otpStep').style.display = 'block';
document.getElementById('displayPhone').textContent = phone;
startCountdown(60); // 60 second cooldown
}
} catch (error) {
// Handle error
}
});
// Verify OTP request
verifyOtpForm.addEventListener('submit', async (e) => {
e.preventDefault();
const otp = document.getElementById('otpCode').value;
try {
const response = await fetch('/verify-otp.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ otp })
});
const data = await response.json();
if (data.success) {
// OTP verified - redirect or allow access
window.location.href = '/dashboard';
} else {
// Show error
}
} catch (error) {
// Handle error
}
});
// Countdown timer for resend button
function startCountdown(seconds) {
let remaining = seconds;
const btn = document.getElementById('resendBtn');
btn.disabled = true;
const interval = setInterval(() => {
remaining--;
btn.textContent = `Resend Code (${remaining}s)`;
if (remaining <= 0) {
clearInterval(interval);
btn.disabled = false;
btn.textContent = 'Resend Code';
}
}, 1000);
}
Pro Tip: Use the SMS User Consent API on Android to automatically read OTPs from SMS messages, eliminating the need for manual input and reducing user friction.
Step 6: Security Considerations
Implementing OTP verification requires careful attention to security:
- Use HTTPS: Always serve your website over HTTPS to encrypt data in transit.
- OTP Expiry: Set OTPs to expire within 3-5 minutes.
- Rate Limiting: Limit OTP requests per phone number (e.g., 3 per hour).
- Attempt Limits: Allow a maximum of 3-5 verification attempts before locking the session.
- Store OTPs Securely: Store OTPs as hashed values in the database.
- Session Binding: Bind OTPs to the session that requested them.
- No Client-Side OTP Generation: Never generate or validate OTPs on the client side.
Advanced: Using Termii for OTP Verification
Termii provides a dedicated OTP API that handles code generation and verification. Here's how to use it:
// === TERMII OTP API EXAMPLE ===
$apiKey = "YOUR_TERMII_API_KEY";
$phone = "+234803XXXX1234";
// Send OTP - Termii generates and stores the code
$otpPayload = [
'api_key' => $apiKey,
'message_type' => "ALPHANUMERIC",
'message_text' => "Your verification code is {code}. Valid for 10 minutes.",
'code_length' => 6,
'pin_attempts' => 3,
'pin_time_to_live' => 600,
'pin_placeholder' => "{code}",
'pin_type' => "NUMERIC",
'to' => $phone
];
// POST to /api/sms/otp/send
// Response includes pinId which must be stored for verification
// Verify OTP
$verifyPayload = [
'api_key' => $apiKey,
'pin_id' => $pinId,
'pin' => $userEnteredCode
];
// POST to /api/sms/otp/verify
Pro Tip: When using Termii, store the
pinId returned from the send endpoint. You must use this ID to verify the OTP — the API will not accept the code without the correct pinId.
Common Issues and Solutions
Here are some common issues you may encounter and how to resolve them:
- OTP Not Received: Check the phone number format. Nigerian numbers should be formatted as
234 803XXXX1234(no + sign) for some APIs. - Delivery Failures: Ensure you're using the transactional (DND) route for OTP messages, not the promotional route.
- Rate Limiting: If users are hitting rate limits, implement a cooldown period between resend requests.
- Session Expiry: Ensure OTPs expire after 3-5 minutes to prevent replay attacks.
- Network Issues: Test OTP delivery across all four major Nigerian networks (MTN, Airtel, Glo, 9mobile).
Frequently Asked Questions About Website OTP Integration
The format depends on your API provider. Some APIs require
234 803XXXX1234 (no + sign, space between country code and number), while others like Termii require E.164 format +234803XXXX1234. Always check your specific API documentation.
OTP codes should be valid for 3 to 5 minutes. This gives users enough time to enter the code while minimizing the window for brute-force attacks.
Allow a maximum of 3-5 verification attempts per OTP. After that, the OTP should be invalidated to prevent brute-force attacks. For resend attempts, use a 60-second cooldown.
No. OTP verification must be handled on the server side. Never generate or validate OTPs on the client side — this is a critical security requirement.
Fujest OTP is the best choice for Nigerian developers, offering affordable rates, Naira payment options, and dedicated local support. Termii is also popular for its African market focus and dedicated OTP endpoints.
Generic routes are for promotional SMS with best-effort delivery and time restrictions. DND/transactional routes are for OTP and alerts with guaranteed delivery and no time restrictions. Always use DND routes for OTP messages.
Test OTP delivery across all four major Nigerian networks (MTN, Airtel, Glo, 9mobile) and from multiple regions. Use test phone numbers provided by your SMS provider if available. Monitor send success, delivery success, and verification success rates.
First, check the phone number format. Then verify you're using the DND/transactional route. Log the error and implement retry logic with a cooldown. If failures persist, check your API credentials and balance. Display a friendly error message to users.
Yes. On Android, you can use the SMS Retrieval API or SMS User Consent API to automatically populate the OTP field. This significantly improves user experience and reduces abandonment rates.
Implement velocity checks (too many requests to one number), number range analysis, and delivery anomaly detection. Enforce per-MSISDN daily limits and use CAPTCHA on the request step.
Conclusion – Integrate OTP Verification Today
Website OTP Integration Made Simple
Integrating SMS OTP verification into your website is a straightforward process that significantly enhances security and user trust. By following this guide, you can implement a robust OTP system that works reliably across Nigerian mobile networks.
Key Takeaways:
- Security First: Enforce expiry, single-use, session binding, and rate limiting.
- Use DND Routes: Always use transactional routes for OTP delivery.
- Format Numbers Correctly: Follow provider-specific phone number formats.
- Test Across Networks: Validate delivery on MTN, Airtel, Glo, and 9mobile.
- Auto-Read OTP: Implement SMS Retrieval API on Android for better UX.
With Fujest OTP, developers can integrate SMS verification into their websites with affordable Naira rates and reliable delivery across Nigerian networks. Visit Fujest.com today to learn more.