WordPress, Woocommerce SMS Integration plugin for OTP verification and order details send

Woocommerce have lots of default functionalities for a powerful eCommerce website . Nowadays OTP verification is commonly required in lots of website for 2 factor authentication . Also to send SMS to customer's and admin's phone when new order place.
In this tutorial, I will guide you how to create a plugin for verifying user's phone no. with OTP and send order details to customer and admin phone no. Now lets start coding for the WordPress, Woocommerce SMS Integration plugin .

1) Plugin Deceleration

Lets create a plugin folder ex: 'SMS-Integration' and file 'sms_integration.php' inside our wp-contents/plugin folder ex: SMS-Integration/sms_integration.php Now put below plugin information

 /* 
Plugin Name: SMS Integration for Woocommerce
Plugin URI: https://unitedwebsoft.in//
Description: integration plugin for Woocommerce registration with OTP and SMS send on new order place
Author: UnitedWebSoft
Version: 1.0
Author URI: https://unitedwebsoft.in//
*/ 

2) call js file

Now we require to add our plugin's js file 'phone_verification.js' . So put below code in our plugin

 //ad js file 
add_action('wp_enqueue_scripts','custom_add_js');
function custom_add_js() {
wp_enqueue_script( 'phone-verification-js', plugins_url( '/js/phone_verification.js', __FILE__ ),array('jquery'));
wp_localize_script( 'phone-verification-js', 'my_ajax_object',
   array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
 }
//End /////// 

Note: above we creates a folder 'js' inside our plugin folder and added a file 'phone_verification.js' This is jquery's code .So, we mentioned above in array 'jquery' . So that WordPress load our js file after jquery .

3) Js file code

Below code of our phone_verification.js file

 jQuery(document).ready(function(){
jQuery('button').prop('disabled',true);
var ajax_url=my_ajax_object.ajax_url;
//alert(ajax_url);	
 var is_phone_varified=localStorage.getItem('is_phone_varified');
 if(is_phone_varified!=1){
  //jQuery('button').prop('disabled',true);
 } 
jQuery(document).on('keyup blur', 'input', function(event) { 
 var phone=jQuery(this).val();
var count_digit=phone.length;
// alert(count_digit);
if(count_digit<10){
jQuery('.send_otp').fadeOut();
return false;
}
if(phone==''){
return false;
}
jQuery('.send_otp').fadeIn();
});
/*jQuery('input').on('blur',function(){
var phone=jQuery(this).val();
if(phone==''){
return false;
}
jQuery('.send_otp').fadeIn();
});*/
jQuery(document).on('keyup', 'input', function(event) { 
var otp=jQuery(this).val();
var phone=jQuery( "input" ).val();
var count_digit=otp.length;
if(count_digit<4){
return false;
}
check_is_valid_otp(phone,otp);
});
 jQuery(document).on('click', '.send_otp', function(event) { 
jQuery('.otp_message').fadeOut();
 var phone=jQuery( "input" ).val();
 var str='action=send_otp&phone='+phone;
//alert(str);
//jQuery('.content').html(str);
jQuery.ajax({
url:ajax_url,
type:'GET',
data:str,
success:function(output){
var status=output.status;
var message=output.message;
jQuery('.phone-invalid-feedback').fadeOut();
//check is already varified 
if(status==2){
jQuery('.otp_sent').html('<div class="alert alert-success">'+message+'</div>').fadeIn('slow');
 jQuery('#register').prop('disabled',false);
 localStorage.setItem('is_phone_varified',1);
}  
if(status==1){
jQuery('.send_otp').text('Resend OTP ');
jQuery('.otp_sent').html('<div class="alert alert-success">'+message+'</div>').fadeIn('slow');
jQuery('.enter_otp').fadeIn('slow');
setTimeout(function(){
jQuery('.otp_sent').fadeOut();
},2000);
}else if(status==0){
jQuery('.otp_sent').html('<div class="alert alert-danger">'+message+'</div>').fadeIn('slow');
} 
}
});
return false;
});
function check_is_valid_otp(phone,otp){
var str='action=check_is_valid_otp&phone='+phone+'&otp='+otp;
jQuery.ajax({
url:ajax_url,
type:'GET',
data:str,
success:function(output){
var status=output.status;
var message=output.message;
if(status==1){
jQuery('.otp_sent').html('<div class="alert alert-success">'+message+'</div>').fadeIn('slow');
   jQuery('button').prop('disabled',false);
  
  localStorage.setItem('is_phone_varified',1);
jQuery( ".enter_otp" ).fadeOut('slow');
}else{
jQuery('.otp_sent').html('<div class="alert alert-danger">'+message+'</div>').fadeIn('slow');
 jQuery('button').prop('disabled',true);
 localStorage.setItem('is_phone_varified',0);
} 
}
});
}
 jQuery(document).on('click', 'button', function(event) { 
  
 var loader='<img style="width:20px" src="/public/images/ajax-loader.webp" />';
//jQuery(this).prop('disabled',true);
//jQuery('.reg_btn_loader').html(loader);
//return false;
  
});
}); 

4) Create phone_verification table and delete on plugin activation and deactivation

To do so, put below code in our plugin

 register_activation_hook(__FILE__,'create_phone_verification_table');
register_deactivation_hook(__FILE__,'delete_phone_verification_table');
function create_phone_verification_table(){
global $wpdb;
$wpdb->query("CREATE TABLE IF NOT EXISTS phone_verification  (
 id int(11) NOT NULL AUTO_INCREMENT,
 phone varchar(20) NOT NULL,
 otp varchar(6) NOT NULL,
 is_verified int(11) NOT NULL DEFAULT '0',
 PRIMARY KEY (id) 
)");
 }
function delete_phone_verification_table(){
global $wpdb;
$wpdb->query("DROP TABLE phone_verification ");
} 

5) Create function sms_send

Now we will create sms_send function, It contains SMS gateway API details . You can obtain this information where you purchase SMS gateway. Put this function in our plugin

 function sms_send($mobile,$msg,$debug=0){
$url=get_option('sms_api_url');
$uname=get_option('sms_api_username');
$pass=get_option('sms_api_password');
$sender_id=get_option('sms_api_sender_id');
/* 
$username = urlencode("username"); 
$msg_token = urlencode("msg_token"); 
$sender_id = urlencode("sender_id"); // optional (compulsory in transactional sms) */
 $message = urlencode($msg); 
$api = $url."?uname=".$uname."&pass=".$pass."&send=".$sender_id."&msg=".$message."&dest=".$mobile; 
$response = file_get_contents($api);
  
 if($debug==1){
 echo $response;	
 }
  
} 

6) Admin menu for SMS gateway setting

Now we need to create WordPress admin menu . Put below code in our plugin

 //Create admin menu //////////////////////////////////
 add_action('admin_menu','create_sample_menu');
function create_sample_menu(){
//page title, menu title, capability, slug , function name
add_menu_page('SMS Integration','SMS Integration','manage_options','sms_integration_setting','sms_integration_setting');
   
}
function sms_integration_setting(){
global $wpdb;
if(isset($_POST)){
$admin_phone=$_POST;
$sms_api_url=$_POST;
$sms_api_username=$_POST;
$sms_api_password=$_POST;
$sms_api_sender_id=$_POST;
update_option('admin_phone',$admin_phone,'yes');
update_option('sms_api_url',$sms_api_url,'yes');
update_option('sms_api_username',$sms_api_username,'yes');
update_option('sms_api_password',$sms_api_password,'yes');
update_option('sms_api_sender_id',$sms_api_sender_id,'yes');
echo "Successfully Updated ! ";
}
 $admin_phone_old=get_option('admin_phone');
$sms_api_url_old=get_option('sms_api_url');
$sms_api_username_old=get_option('sms_api_username');
$sms_api_password_old=get_option('sms_api_password');
$sms_api_sender_id_old=get_option('sms_api_sender_id');
?> <h1>SMS Integration Setting</h1> <form action="" method="post" enctype="multipart/form-data"> <table width="100%" border="0"> <tr> <td width="25%">Admin Phone to receive order SMS</td> <td width="75%"> <input  type="text" name="admin_phone" value="<?php echo $admin_phone_old; ?>" /> </td> </tr> <tr> <td><h2 id="sms-api-details">SMS API Details</h2></td> <td> </td> </tr> <tr> <td> URL</td> <td> <input  type="text" name="sms_api_url" value="<?php echo $sms_api_url_old; ?>" /> </td> </tr> <tr> <td>Username</td> <td> <input  type="text" name="sms_api_username" value="<?php echo $sms_api_username_old; ?>" /> </td> </tr> <tr> <td>Password</td> <td> <input  type="text" name="sms_api_password" value="<?php echo $sms_api_password_old; ?>" /> </td> </tr> <tr> <td>Sender ID</td> <td> <input  type="text" name="sms_api_sender_id" value="<?php echo $sms_api_sender_id_old; ?>" /> </td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" value="Submit" /> </td> </tr> </table> <br /><br /> <h1>Test SMS </h1> <?php
   
if(isset($_POST)){
$phone_test=$_POST;
$sms_msg_test=$_POST;
sms_send($phone_test,$sms_msg_test,1);
}
   ?> <form action="" method="post" enctype="multipart/form-data"> <table width="100%" border="0"> <tr> <td width="25%">Phone</td> <td width="75%"> <input  type="text" name="phone_test"   /> </td> </tr> <tr> <td width="25%">Message</td> <td width="75%"> <textarea name="sms_msg_test" ></textarea> </td> </tr> <tr> <td> </td> <td><input type="submit" name="sms_test_submit" value="Send SMS Now" /> </td> </tr> </table> </form> <?php
} 

We have made dynamic to mention SMS gateway information on above form .Also option for test SMS.

7) Send OTP function

Now put send_otp function in our plugin as mentioned below

 function send_otp(){
global $wpdb;
$table="phone_verification";
 $phone=$_GET;
$otp=rand(1000,9999);
$status=1;
$send_otp=1;
$wpdb->delete( $table,);  
$wpdb->insert($table,);
 $message="OTP sent to your mobile no. "; 
//Send SMS//
if($send_otp==1){
$sms_msg="Your OTP for Registration is ".$otp.". Thanks for joining ZEUS NUTRITIONS.";
sms_send($phone,$sms_msg);
}
////
 return wp_send_json(array('status'=>$status,'message'=>$message,'phone'=>$phone));
wp_die();
}
add_action('wp_ajax_send_otp', 'send_otp');
add_action('wp_ajax_nopriv_send_otp', 'send_otp'); 

This function used by our js file for ajax otp send when user enter his/her phone no.

8) function for Check is valid OTP

We need to check if OTP entered by user is valid or not. So, we have to put below code in our plugin .

 function check_is_valid_otp(){
global $wpdb;
 $table="phone_verification";
$phone=$_GET;
$otp=$_GET;
$count1= $wpdb->get_var("SELECT COUNT(*) FROM $table WHERE phone='$phone'" );
if($count1>0){
$PhoneVarification=$wpdb->get_row("SELECT * FROM $table WHERE phone='$phone'");
$is_varified=$PhoneVarification->is_verified;
if($is_varified==1){
$status=1;
$message="This phone no. is already varified"; 
}else{
  $count= $wpdb->get_var("SELECT COUNT(*) FROM $table WHERE phone='$phone' AND otp='$otp' " );
if($count>0){
$status=1;
$message="Phone no. successfully varified";
$wpdb->update($table,);
}else{
$status=0;
$message="Incorrect OTP";
}
}
}else{
$status=0;
$message="No record for this phone no.";	
}	
return wp_send_json(array('status'=>$status,'message'=>$message));
wp_die(); 
}

add_action('wp_ajax_check_is_valid_otp', 'check_is_valid_otp');
add_action('wp_ajax_nopriv_check_is_valid_otp', 'check_is_valid_otp'); 

9) Add 2 fields phone and otp on registration page

 add_action('woocommerce_register_form', 'woocommerce_register_form_add_phone_otp', 10, 1);
function woocommerce_register_form_add_phone_otp() {
?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_phone"><?php esc_html_e( 'Phone', 'woocommerce' ); ?> <span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="phone" id="phone" value="<?php echo ( ! empty( $_POST ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> <a href="#" style="display:none" class="send_otp btn btn-info btn-sm">Send OTP</a><div style="display:none" class="otp_sent"  ></div> </p> <p style="display:none" class="enter_otp woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="reg_phone"><?php esc_html_e( 'OTP', 'woocommerce' ); ?> <span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="otp" id="otp" /><?php // @codingStandardsIgnoreLine ?> </p> <?php
} 

10) add user meta 'billing_phone' on new user register

 add_action('user_register', 'add_phone_field'); 
add_action('personal_options_update', 'add_phone_field' ); 
add_action('edit_user_profile_update','add_phone_field' ); 
function add_phone_field($user_id) { 
     update_user_meta($user_id, 'billing_phone', $_POST ); 
} 

11) Send SMS to customer phone and admin phone when new order place

add_action('woocommerce_thankyou', 'custom_process_order', 10, 1);
function custom_process_order($order_id) {
   
if ( ! $order_id )
  return;
 // Getting an instance of the order object
 $order = wc_get_order( $order_id );
$myuser_id = (int)$order->user_id;
$user_info = get_userdata($myuser_id);
/*$items = $order->get_items();
foreach ($items as $item) {
  if ($item==24) {
    // Do something here
  }
 }*/
$name=$user_info->display_name;
$payable_amount =$order->get_total();
$mobile = get_post_meta( $order_id, '_billing_phone', true );
 //SMS to customer	
$sms_msg="Dear ".$name.", Thank you for your purchase/order. Your order no. ".$order_id." of Rs.".$payable_amount.". Your order will be delivered soon.";
 sms_send($mobile,$sms_msg);
////
//SMS to admin
$admin_phone=get_option('admin_phone');
$sms_msg="Hi Admin, a new order# ".$order_id." place on Zeus Nutritions  of Rs. ".$payable_amount." .";
sms_send($mobile,$sms_msg);
//
 //wp_die();
} 

Now activate our newly created plugin from WordPress admin dashboard plugin's page . If you encounter any error, let me know in below comment . I will try my best to reply . Well, I am a WordPress freelance Developer from Delhi, India. You can contact me on webmaster.delhi1@gmail.com .