ReCaptcha option on SCA checkout page

ReCaptcha option on SCA checkout page
for this we can create a new module for the checkout page or we can extend which view you want that fetaure
code :
JS file:

define(
	'JJ.ReCaptcha.ReCaptcha'
	, [
		'jj_recaptcha_recaptcha.tpl',
		'OrderWizard.Step',
		'Utils',
		'Wizard.Step',
		"GlobalViews.Message.View"
	]
	, function (
		jj_recaptcha_recaptcha_tpl,
		OrderWizardStep,
		Utils,
		WizardStep,
		GlobalViewsMessageView
	) {
		'use strict';
		return {
			mountToApp: function mountToApp(container) {
				//added a new module in Checkout Review page//
				var checkoutComponent = container.getComponent('Checkout');
				checkoutComponent.addModuleToStep({
					step_url: 'review',
					module: {
						id: 'ReCaptcha_module',
						index: isMobileDevice() ? 1 : 10, 
						classname: 'JJ.ReCaptcha.ReCaptcha.View',
					}
				});
				function isMobileDevice() {
					return window.innerWidth < 768;
				}
				//extended to give validation message for recaptche feature//
				_.extend(OrderWizardStep.prototype, {											
					submit: function submit() {
						const self = this;
						const args = arguments;
						const order_wizard = this.wizard.orderWizardModel;
						const next_step_url = this.wizard.getNextStepUrl();
						const promise = jQuery.Deferred();					
						var response = jQuery('.g-recaptcha-response').val();
						response = !!response;
						return order_wizard
							.cancelableTrigger('before:OrderWizardStep.submit', next_step_url)
							.then(function () {								
								if (self.step_url === "review" ? true && !response : false) {									
										var global_view_message = new GlobalViewsMessageView({
										message: 'You must check a ReCaptcha',
										type: 'error',
										closable: true,
									});
									jQuery(container).show();
									var msgContainerParent = jQuery('.recaptcha-error-message');
									msgContainerParent.html(global_view_message.render().$el.html());									
									return promise.resolve();
								}
								return WizardStep.prototype.submit.apply(self, args);							
							})
							.fail(function () {
								const error_container = jQuery('[data-type="alert-placeholder-module"]:first');
								const error_container_parent = error_container.parents('.module-rendered:last');
								if (error_container_parent.length) {
									Utils.animatedScroll(error_container_parent[0]);
								}
							});
					},				
				});
			}
		};
	});

js filw :

// @module JJ.ReCaptcha.ReCaptcha
define('JJ.ReCaptcha.ReCaptcha.View'
,	[
	'jj_recaptcha_recaptcha.tpl',
	'Wizard.Module'
    ]
, function (
	jj_recaptcha_recaptcha_tpl,
	WizardModule
)
{
    'use strict';
	// @class JJ.ReCaptcha.ReCaptcha.View @extends Backbone.View
	return WizardModule.extend({
		template: jj_recaptcha_recaptcha_tpl,
		getContext: _.wrap(WizardModule.prototype.getContext, function (fn) {
			let originalRet = fn.apply(this, _.toArray(arguments).slice(1));
			let ReCaptchaSiteKey = SC.CONFIGURATION.ReCaptcha.config;
			originalRet.ReCaptchaSiteKey = ReCaptchaSiteKey;
			return originalRet;
		})

	});
});

TPL file:

<div class="recaptcha-error-message"></div>
<div id="captcha-container" data-action="submit-recaptcha">
	<script src="https://www.google.com/recaptcha/api.js"></script>
	
	  <div class="g-recaptcha-main">
	  <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey={{ReCaptchaSiteKey}}>
	  </div>
	  <span class="g-recaptcha-error-msg"  ></span>
	  </div>
	</div> 
SASS File:
#captcha-container {
    clear: both;
	float: right;
}
.recaptcha-error-message{
	clear: both;
	float: right;
}
@media (max-width: $screen-sm) {
    #captcha-container {
        clear: both;
        float: left;
        margin-bottom: 3%;
    }
    .recaptcha-error-message {
        clear: both;
        float: left;
    }
}
@media (min-width:  $screen-sm) and (max-width:  $screen-sm) {
    #captcha-container {
        float: right;
    }
}
.g-recaptcha-error-msg{
    color: red;
}

JSON FILE:

{
    "type": "object",
    "subtab":
    {
        "id": "ReCaptcha_subtab",
        "title": "ReCaptcha Subtab",
        "description": "ReCaptcha Subtab update",
        "group": "extensions"
    },
    "properties": { 
        "ReCaptcha.config": {
            "group": "extensions",
            "subtab": "ReCaptcha_subtab",
            "type": "string",
            "title": "ReCaptcha_Title",
            "description": "Config description example",
            "default": ""
        }
    }
}