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-app="6uby5u5akama3o6e5egu"
data-locale="ja" data-mode="verification" data-type="sms"></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
}

//a.help[href='#'] {
//  visibility: hidden !important
//  display: none !important
//}

JavaScript

$(document).ready(function() {
    var appKey = "6uby5u5akama3o6e5egu";
    var widget = new RingCaptcha.Widget('#xyz', {
        app: appKey,
        events: {
            // When widget is read
            ready: function(event) {
                // Override the click event
                $('a.help').click(function(e) { window.open('https://woolworths.com.au','help','height=500,width=500');; e.stopPropagation(); });
                // Pre-fill phone
                $('input[type=tel]').val(123412341234);
                $('input[type=tel]').attr('placeholder', 'Example');
            },
            // 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();
})