How can I trigger stripe token generation from an ng-click or controller event instead of a form submission?

Question

I'm integrating stripe with my angular app and if possible I would like to have better control over when I generate a token to allow more versatility in the user flow. More specifically I have a few forms (payment info, shipping address, additional info) that I would like to keep separate but I would like to process them all at the same time. So far I'm using this directive https://github.com/gtramontina/stripe-angular/blob/master/stripe-angular.js

angular.module('stripe', []).directive('stripeForm', ['$window',
function($window) {

  var directive = { restrict: 'A' };
  directive.link = function(scope, element, attributes) {
    var form = angular.element(element);
    form.bind('submit', function() {
      var button = form.find('button');
      button.prop('disabled', true);
      $window.Stripe.createToken(form[0], function() {
        var args = arguments;
        scope.$apply(function() {
          scope[attributes.stripeForm].apply(scope, args);
        });
        button.prop('disabled', false);
      });
    });
  };
  return directive;

}]);

It allows me to catch the response in a controller but not trigger the tokenization call.

.controller('IndexController', function($scope, $rootScope) {
  $scope.saveCustomer = function(status, response) {
    $rootScope.user.stripeCustomerId = response.id;
    $rootScope.user.save();
  };
});

Any ideas?

OMG ! Seems like you are in urgent need of a good read: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background#answer-15012542 (Totally unrelated to the actual question, but a must-read if you come from jQuery background (as it seems you are).) — gkalpak, May 25 '14 at 19:36
To be clear, this is a directive I found and I'm looking for a better solution. The challenge with stripe is they supply a script to add to a project in a more traditional javascript web sorta way. It's meant to be used as a form action on a form with strip specific attributes. The script sends credit card form data straight to their servers so it never needs to touch yours. As far as I've found they don't provide a simple endpoint to send this data. I'm guessing this is for security reasons. — Constellates, May 25 '14 at 20:45
OK, then whoever wrote this directive is still thinking in jQuery and not Angular. — gkalpak, May 25 '14 at 21:22

score 0 · Accepted Answer · answered May 27 '14 at 02:32

0

I over complicated this entirely. All of the stripe examples that I'd seen were done with jQuery so I was trying to re-invent that into angular. It became much easier when I simply looked into the methods provided with stripe. For example tokenization looks like this Stripe.card.generateToken(card, callback()); Card is just an object provided you pull the right properties from their documentation. So throwing that into an ng-clickable function was not a problem.

answered May 27 '14 at 02:32

Constellates

2,083
3
19
29

Constellates - I'm facing the same kind of problem and a bit of a noob with Angular - how can i create the card object without passing the card number through my server? – Mobaz Mar 17 '15 at 18:56
I haven't worked with stripe in a while but as I remember there is never a need to send a card number to your server. With the flow I remember using you would send the card info directly to stripe from the client side using a function provided by stripe. They send you back a token which you send to your server. Then your server sends the token to stripe. If you have some code you can post to stack overflow I can take a look. But basically you'll be using functions provided by stripe to create the card object on the client side. – Constellates Mar 18 '15 at 21:23
here is my problem: http://stackoverflow.com/questions/29134086/how-do-i-send-additional-user-information-in-a-form-after-getting-stripe-token – Mobaz Mar 18 '15 at 22:43

How can I trigger stripe token generation from an ng-click or controller event instead of a form submission?

1 Answers1