<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
    var app=    angular.module("LoginRegApp",[]);
    app.config(function($interpolateProvider){
        $interpolateProvider.startSymbol("[[[");
        $interpolateProvider.endSymbol("]]]");
    });

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

    });
</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" >Register</button>
    <script type="text/javascript">
        var displayError=   document.getElementById('card-errors');
        var stripe=         Stripe("MY_PUBLIC_KEY_HERE");
        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 = '';
            }
        });

        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');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);
            // Submit the form
            form.submit();
        }
    </script>
</form>