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="login" data-type="dual"></div>'
    );

    $('#xyz').each(function() {
      var appKey = "hy2o7ujafi5ene6o4y7a";
      var userManagementAppId = '5fe536600fbe96f7f1680e';
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        login: function(event, formValues) {
		console.log("Login: formValues:", formValues);
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'text',
          placeholder: 'メール'
        },
        {
          id: 'pin', 
          type: 'pin'
        }
      ];
      settings.userManagement = true;
      settings.phoneLogin = true;
      settings.userManagementAppId = userManagementAppId;
      
      new RingCaptcha.Widget(this, settings.app, settings);
    });
  });