JSFiddle - React, Tailwind, and code Playground

by ringcaptcha

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://s3.amazonaws.com/ringcaptcha-test/widget/jwt-20180226-b/bundle.js"></script>
<div id='widget-point'>
</div>

JavaScript

$(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-locale="en" data-mode="signup" data-type="dual"></div>'
    );
    $('#xyz').each(function() {
      var appKey = "hy2o7ujafi5ene6o4y7a";
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        signup: function(event, formValues) {
          console.log("Signup: formValues:", formValues);
          window.location.replace('https://get.ringcaptcha.com/king-authr-login-2');
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'email',
          placeholder: 'Email',
          validations: {
            presence: 'Email should be present',
            format: { message: 'Invalid email' }
          }
        },
        {
          id: 'phone',
          type: 'phone',
          validations: {
            length: { min: 5, max: 15, message: 'Invalid phone' }
          }
        }
      ];
      settings.userManagement = true;
      new RingCaptcha.Widget(this, settings.app, settings);
    });
  });