Failed to instantiate module angular-stripe about angularjs-stripe HOT 12 CLOSED

First off, thanks for picking angular-stripe. You made the right choice 😄

Please format your code using the correct GitHub Flavored Markdown syntax in the future so I can read it more easily.

That error would seem to indicate that window.Stripe isn't available. Could you verify that it is? Also, if you upgrade to the latest (4.2.0), I've added an explicit exception when Stripe is undefined.

from angularjs-stripe.

Thank you for your quick reply. And in the future I will try to use the markdown syntax.
Using angular-payment, it didn't complain about window.Stripe unavailable.
So I figured that just changing from angular-payment to your angular-stripe would be enough.
I will look into if upgrading solves the problem.
I will let you know.

from angularjs-stripe.

Using angular-payment, it didn't complain about window.Stripe unavailable

That's a bug. Upgrading will throw a better error. If Stripe isn't available and the library doesn't say so, you can end up with obscure bugs and error messages in production if Stripe doesn't load or you forget to include the script from their CDN.

from angularjs-stripe.

Okay, I don't get this at all obviously.
In index.html I do

<script src="https://js.stripe.com/v2/"></script>

Without including anything else neither your angular-stripe or other things, just to verify that connection towards stripe.com is established, what more needed to do a successfully create token?
I include the 'stripe' directive below in the controller...

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() {
        button.prop('disabled', false);
        var args = arguments;
        scope.$apply(function() {
          scope.$eval(attributes.stripeForm).apply(scope, args);
        });
      });
    });
  };
  return directive;
}]);

from angularjs-stripe.

No idea what you're doing here. That directive is not from here. The reason I created angular-stripe in the first place was to offer a better alternative to the awful habits the author of stripe-angular encourages (that's where the snippet above is from, not here).

Check out the example. Build your form the Angular way using ng-model.

It sound like you're asking for help implementing stripe-angular which I'm not willing to do. Nothing personal here and I totally get if you're on a deadline and need to get something quick and dirty working.

from angularjs-stripe.

Okay, I'm sorry if I gave you the wrong impression.
The thing is, I really want to implement your angular-stripe, not stripe-angular. But I just tested that as well to try to understand what is really needed to get things up and running with Stripe.
What I don't understand is that I get both stripe-angular and angular-payments to work, but I cannot include angular-stripe without getting an include error:

Failed to instantiate module angular-stripe due to:
Error: Stripe must be available as window.Stripe
    at new stripeProvider (http://localhost/lp/bower_components/angular-stripe/release/angular-stripe.js:253:22)

I have now upgraded to latest angular-stripe, version 4.2.0.

I feel I'm missing something that should be obvious, but I just can't get my head around it...

I really hope you can help...

from angularjs-stripe.

As you see, you were correct from the beginning, window.Stripe is not available.
You asked me to verify that it is, but how do I do that and how can I make it available?
As I mentioned, I include stripe in my index.html

<script src="https://js.stripe.com/v2/"></script>

Is there anything more needed?

And a comment to improve your Examples (which really is just one example).
It would be great if you could provide a simple working html form to go with that controller.
Then later you can point to your angular-credit-cards for those who want to use that for validation.
I really think that would improve your documentation a lot.

from angularjs-stripe.

Okay, I figured it out.
I was including angular-stripe before js.stripe.com in my index.html.
Swapping places solved the problem.
That should probably also be mentioned in your readme.md file , to include angular-stripe after js.stripe.com.
I guess obvious for some people, but clearly not for all, me included.

I rest my case for now, and will see what the future brings when trying to implement and use angular-stripe.

from angularjs-stripe.

That should probably also be mentioned in your readme.md file

996b0fd is the most I'm willing to do. I'm not interested in writing documentation based on the use of <script> tags since I want to do everything possible to convince people to stop building applications like that.

It would be great if you could provide a simple working html form to go with that controller

An HTML form is out of scope — that's precisely what's wrong with the various other Angular/Stripe integrations. angular-stripe has no defined relationship with your forms (as it should be). This is a one line library. You just pass it data and it gives you a promise instead of taking a callback. That said, I'm committed to working on a generalized angular-stripe + angular-credit-cards + angular-form-state example project this weekend #12 (comment).

from angularjs-stripe.

Jumping in here @bendrucker, curious how that example project is going? I'm transitioning over from using the angular-payments library (which makes different scope very hard to work with). Would love to see a generalized example of your libraries.

from angularjs-stripe.

https://github.com/bendrucker/angular-payment

Code's mostly there, I just need to start hooking up a bunch of directives so you can run the app, see the states of the form controls, and see the calls being made. When the UI is done I'll put it live on GH pages and start writing docs.

In the mean time, as noted in the readme, I'm happy to answer general how-to questions in angular-payment's issues.

from angularjs-stripe.

Sounds good, I'll have a look. Looks like your libraries are definitely the most actively developed—thanks for all of the work you do!

from angularjs-stripe.