Add Mobile Verification In cash on delivery payment method
In this blog, I enplane the product of adding mobile verification for COD payment method. You can do same for any other payment method. I'm doing this process in theme customization.
Step 1. You need to create a directory Magento_OfflinePayments in your theme. I hope you already have themes .
Step 2. Create template file cashondelivery.html in theme dir Magento_OfflinePayments/web/template/payment.
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!-- ko if: isApplyedPointsOrCredit() -->
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice" visible="showPayment">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<!-- <p data-bind="html: getInstructions()"></p> -->
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="mobile-verify-form-div" data-bind="visible: mobileFormOpen">
<div class="mobile-verify-form-area">
<label for="mobile-verify">Verify Your Mobile</label>
<span>
<input placeholder="Mobile"
class="mobile number"
id="mobile"
name="mobile"
type="text"
disabled="disabled"
data-bind="value: mobileNumber()"
>
</span>
<span>
<input placeholder="Fill OTP"
class="otp number"
id="otp_input"
name="otp_input"
type="text"
maxlength="otpMaxLenth()"
data-bind="visible: isOTPverifyDisable()"
>
</span>
<span class="button-confirm">
<button type="submit" visible="isOtpSended" data-bind="
click: sendOTP, attr: {title: $t('Send OTP')}">
<span data-bind="i18n: 'Send OTP'"></span>
</button>
<button type="submit" visible="isOTPverifyDisable" data-bind="
click: verifyOTP, attr: {title: $t('Verify')}">
<span data-bind="i18n: 'Verify'"></span>
</button>
</span>
<span id="error-message" class="error-message" data-bind="visible: hasError"></span>
</div>
</div>
<div class="actions-toolbar">
<div class="primary" visible="isVerified">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
enable: (getCode() == isChecked()),
css: {disabled: !isPlaceOrderActionAllowed()}
"
disabled>
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
<div class="primary" visible="reviewButton">
<button class="action primary checkout"
type="submit"
data-bind="
click: isMobileFormOpen,
attr: {title: $t('Review Order')}
">
<span data-bind="i18n: 'Review Order'"></span>
</button>
</div>
</div>
</div>
</div>
<!-- /ko -->
Step 3. Now you need to create a JS file called cashondelivery-method.js in the dir Magento_OfflinePayments/web/js/view/payment/method-renderer and put in the below code.
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/* @api */
define([
"jquery",
'ko',
"mage/url",
"Magento_Customer/js/customer-data",
'Magento_Checkout/js/checkout-data',
"mage/url",
"Magento_Checkout/js/model/quote",
'Magento_Checkout/js/view/payment/default'
], function ($, ko, url, customerData, checkoutData,urlBuilder, quote, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_OfflinePayments/payment/cashondelivery'
},
// console.log(window.customerData);
reviewButton: ko.observable(true),
isVerified: ko.observable(false),
mobileFormOpen: ko.observable(false),
isOTPverifyDisable: ko.observable(false),
isOtpSended : ko.observable(true),
showPayment: ko.observable(true),
hasError: ko.observable(false),
initialize: function () {
var self = this;
this._super();
this.isApplyedPointsOrCredit = ko.computed(function () {
var isPointApply = false;
if (quote.totals()) {
var segment = quote.totals()['total_segments'];
segment.forEach(function(seg) {
if(seg.code == "reward" && seg.value !== -0 && seg.value !== 0) {
console.log(seg.value);
isPointApply = true
}
if(isPointApply == false && seg.code == "customerbalance" && seg.value !== -0 && seg.value !== 0) {
isPointApply = true
}
});
}
return true;
}, this);
return this;
},
sendOTP: function() {
try {
var self = this;
var value = this.profileMobile();
var shippingAddress = quote.shippingAddress();
var shppingMobile = shippingAddress.telephone;
alert("OTP send Code write here");
} catch(e) {
console.log("Error", e);
}
},
verifyOTP: function() {
var value = $('#otp_input').val();
var self = this;
alert("verify Otp");
},
profileMobile: function() {
if(window.customerData.custom_attributes !== undefined &&
window.customerData.custom_attributes.mobile !== undefined) {
var mobile = window.customerData.custom_attributes.mobile.value;
return mobile;
}
return '';
},
mobileNumber: function() {
var shippingAddress = quote.shippingAddress();
return shippingAddress.telephone;
},
isMobileFormOpen: function() {
this.mobileFormOpen(true);
this.reviewButton(false);
},
otpMaxLenth: function () {
return 4;
},
/**
* Returns payment method instructions.
*
* @return {*}
*/
getInstructions: function () {
return window.checkoutConfig.payment.instructions[this.item.method];
}
});
});
Result:
