JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">

</script>
<script src="https://js.stripe.com/v3/"></script>
<form id="register-form" name="regForm" method="post>
    <div id="stripe-wrapper">
        <div id="card-element">
          
        </div>
    </div>
    <small id="card-errors" class="text-danger" role="alert">{{ ccErrMsg }}</small>
    <br>
    <button id="register-btn" type="submit" ng-model="reg.btn" disabled>Register</button>

</form>

JavaScript

var app=    angular.module("LoginRegApp",[]);
    app.config(function($interpolateProvider){
        $interpolateProvider.startSymbol("[[[");
        $interpolateProvider.endSymbol("]]]");
    });

    app.controller("LoginRegCtrl",function($scope,$http){

    });
  var displayError=   document.getElementById('card-errors');
        var stripe=         Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
        var elements=       stripe.elements();

        var card=   elements.create("card");
        card.mount("#card-element");
        card.addEventListener('change', function(event) {
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
            if(event.complete) {
    					document.getElementById("register-btn").removeAttribute('disabled');
    				} else {
            	document.getElementById("register-btn").setAttribute('disabled', true);
            }
        });

				var formID= "register-form";
        var form=   document.getElementById(formID);
        form.addEventListener("submit",function(event){
            event.preventDefault();

            stripe.createToken(card).then(function(result){
                if(result.error) {
                    displayError.textContent=   result.error.message;
                } else {
                    stripeTokenHandler(result.token, formID);
                }                               
            })
        });
        // tut https://stripe.com/docs/stripe-js/elements/quickstart#create-form
        function stripeTokenHandler(token, formID) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById(formID);
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
           ...