How to create a laravel OTP/Security code verification for e-commerce website

Nowadays, laravel is the most secure and reliable platform for e-commerce web application and it is high in demand. However, for a purchase to complete it is sometimes necessary to have an OTP or Security Code verification process to validate a customer purchase or email/number verification. Laravel doesn’t have a built in OTP or Security Code based verifier process, there are a few OTP verifier present to serve the purpose, but doesn’t comes with combo of retry or resend mechanism and configurable digit or timeouts. Today I will discuss on one of the package for Laravel, which will enable you to set the OTP verification easy as taking nap 😴. The features that you will get with the combo package.

1. Configurable OTP Expiry Timeout
2. Configurable OTP Digits
3. Built-in OTP Retry and Max Retry Block
4. Built in OTP Resend and Max Resend Block
5. Email OTP/Security Code
6. SMS OTP/Security Code

All of those comes in one package and no need to think about rebuilding the wheel. So let’s begin, assuming that you already have an e-commerce site built on laravel and want to include OTP verification before the product is purchased.

First thing, need to install the package first with the following command to add the package to the project:

composer require ferdous/laravel-otp-validate

Next, on Laravel 5.5 above there is vendor package auto-discovery and registration of Service Provider, which was not in the older versions, so it was required to add the extra lines to the config/app.php file in the ServiceProvider array and aliases array as follows:

In ServiceProvider array:

Ferdous\OtpValidator\OtpValidatorServiceProvider::class

In alias array:

'OtpValidator' => Ferdous\OtpValidator\OtpValidatorServiceProvider::class

Once you are done with the following, next step is to publish the package for the placement of new registered package.

php artisan vendor:publish --provider="Ferdous\OtpValidator\OtpValidatorServiceProvider"

This will generate the required migrations, config and resources files. Now you should update the .env file with the required information:

# Basic OTP Configs
OTP_SERVICE='enabled'
OTP_TIMEOUT=120
OTP_DIGIT=4
OTP_RESEND_SERVICE='enabled'
OTP_MAX_RETRY=2
# Company and Service
OTP_SERVICE_NAME='otp'
OTP_COMPANY_NAME='toto'
# OTP via Email / SMS
OTP_SEND_BY_EMAIL=1
OTP_SEND_BY_SMS=1
# Email Configurations
OTP_EMAIL_FROM='example@test.com'
OTP_EMAIL_FROM_NAME='example'
OTP_EMAIL_SUBJECT='test otp'
# SMS Configurations
OTP_SMSC_URL='https://sms'
OTP_SMSC_METHOD='post'
OTP_COUNTRY_CODE='88'
OTP_SMSC_OVER_JSON=0
OTP_SMSC_PARAM_TO_NAME='to'
OTP_SMSC_PARAM_MSG_NAME='msg'
OTP_SMSC_USER='test'
OTP_SMSC_PASS='pass'

Next step is to migrate the database for the otp service. Run the following command to generate the tables:

php artisan migrate

Setup is done 😃, see how simple is this. You can modify the blade files OTP templates for both SMS and Email. The location for the templates are inside resources/views/vendor/template-otp/ .

Let’s move to create a OTP controller for our test purchase.

php artisan make:controller OtpController

Also need to add few routes routes/web.phpto the service.

Next section is for the controller that we generated earlier.

We are now 90% from completing the OTP service panel 😎.

Now we will do the frontend view files adding for our purchase panel. I kept only the required page to understand the flow of the OTP service. It is better to create a layout file and reuse it, to reduce the code duplication. Layout kept in resources\views\product\layout\template.blade.php.

Next with the purchase page, user will enter the contact for delivery details. which looks as below:

Purchase Details Page

Keep the files inside resources\views\product this page file is checkout-page.blade.php and code:

checkout-page.blade.php

Now we will create the OTP page, where the user will do the input.

otp-page.blade.php

In this page we have a timer to show, I had used a simple javascript timer to show the remaining time for the OTP to expire. Keep the JS file in resources\js\app.js

app.js

Last file is the success or fail page. I have used the same page to show the success or fail case, you can use different one if needed.

otp-success-fail-page.blade.php

For the timer to work, you need to run the following command to generate the resources javascript files.npm run prod

Now run the Laravel project using php artisan serve and it will start on port 8000. Go to the following page: http://localhost:8000/test/purchase

Hope this helps to create the Laravel OTP Validation Service for your e-commerce site or any web based application.

Thank you for reading, if you like please add some claps 💰.