JSFiddle - React, Tailwind, and code Playground
by ringcaptcha
HTML
<script src="https://cdn.ringcaptcha.com/widget/v2/bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="xyz" data-widget
data-locale="de" data-mode="verification" data-type="dual"></div>
CSS
div.ringcaptcha.widget.no-brand {
border: 0px; !important
}
button.btn.btn-submit.btn-block.btn-verify.js-send-code {
color: white; !important;
background-color: green; !important
}
JavaScript
$(document).ready(function() {
var appKey = "hy2o7ujafi5ene6o4y7a";
var widget = new RingCaptcha.Widget('#xyz', {
app: appKey,
events: {
// When widget is read
ready: function(event) {
},
// Add JavaScript Callbacks
verified: function(event) {
const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
const data = dataString ? JSON.parse(dataString) : null;
const phone = data.phoneNumber;
alert("Phone number verified:" + phone);
// Make the widget disappear
$('div.ringcaptcha.widget.no-brand').hide();
}
}
}).setup();
})