AngularJS Stripe Elements Directive

by Annie Lagang

HTML

<body ng-app="angularjs-starter">
      <script src="https://js.stripe.com/v3/"></script>
      <div ng-controller="MainCtrl">
        <form name="regForm" id="register-form">
          <label>Mail</label>
          <input ng-model="reg.email" type="email" name="username">
          <div stripe-validator stripe-complete="stripeCompleted" stripe-form-id="register-form"></div>
          <br>
          <button ng-model="reg.btn" ng-disabled="stripeCompleted === false || !regForm.username.$valid">Register</button>
        </form>
      </div>
    </body>

JavaScript

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope, $rootScope) {
  //Init stripe state via controller
  $scope.stripeCompleted = false;
});


app.directive('stripeValidator', function() {
  return {
    restrict: 'A',
    template: `
      <div id="stripe-wrapper">
        <div id="card-element"></div>
      </div>
      <small id="card-errors" class="text-danger" role="alert">{{ ccErrMsg }}</small>
      <input type="hidden" name="stripeToken" ng-value="stripeToken" />`,
    scope: {
      "stripeComplete": '=',
      "stripeFormId": '@',
      "stripeError": '=',
      "stripeToken": '=',
    },
    link: function(scope, element, attrs) {

      //Init
      var stripe = Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
      var elements = stripe.elements();
      var card = elements.create("card");
      var form = document.getElementById(scope.stripeFormId);

			//mount card element https://stripe.com/docs/stripe-js/reference#element-mount
      card.mount("#card-element");
      
      //add event listener
      card.addEventListener('change', function(event) {
      
        //check for errors
        if (event.error) {
          scope.ccErrMsg = event.error.message;
        } else {
          scope.ccErrMsg = '';
        }
        
        //check for complete
        scope.stripeComplete = event.complete ? true : false;
        
        //apply scope
        scope.$apply();
      });
      
      //inject form submit event
      form.addEventListener("submit", function(event) {
      
        //prevent form submit
        event.preventDefault();
        
        //handle token, handle error and form submit forward
        stripe.createToken(card).then(function(result) {
        
          if (result.error) {
             scope.ccErrMsg = event.error.message;
             scope.stripeToken = '';
          } else {
             scope.ccErrMsg = '';
             scope.stripeToken = result.token;
          }
          
...