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://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<script src="https://s3.amazonaws.com/ringcaptcha-test/widget/ka-20180508/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="voice"></div>'
    );

    $('#xyz').each(function() {
      // appKey should replace your own RINGCAPTCHA appKey
      var appKey = "epe7a2a5e3anopibinor";
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        ready: function(event, formValues) {
          console.log("ready: event:", event);
          $('.btn.btn-submit.btn-block.btn-verify.register').html("Copy Form Code");
          $('h3').text("Sample GDPR form");
        },
        
        signup: function(event, formValues) {
          console.log("Signup: event:", event);
          console.log("Signup: formValues:", formValues);
          const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
          const data = dataString ? JSON.parse(dataString) : null;
          console.log("Signup: data:", data);
          $('h3').text("Sample GDPR form");
          $('div.signup-status').text('Sign up succesful.');
          // Add JavaScript Callbacks
        }
      };

      settings.form = [
        {
          id: 'email',
          type: 'email',
          placeholder: 'Email',
          validations: {
            format: {
              message: 'Invalid email'
            }
          }
        },
        {
          id: 'firstname',
          type: 'text',
          placeholder: 'First Name',
          validations: {
            presence: {
              message: 'First Name should be present'
            }
          }
        },
        {
          id: 'lastname',
          type: 'text',
          placeholder: 'Last Name',
          validations: {
            presence: {
              message: 'Last Name should be present'
            }
          }
        },
        {
          id: 'phone',
          type: 'phone',
          placeholder: 'Phone',
          validations: {
            eu_citizens_gdpr:...