bendrucker / angularjs-stripe Goto Github PK
View Code? Open in Web Editor NEWAngular Stripe.js service that returns promises for token calls
License: MIT License
Angular Stripe.js service that returns promises for token calls
License: MIT License
Can you please give an example of how to use bankAccount.validateAccountNumber ?
in my test, it does give back some answer (true/false), but does not even send anything to stripe.
please give a quick line on how to call it. thanks :)
Hey Ben,
I've recently started using your module for credit card and bank account processing, and it's significantly better than the others I had tried to use. One thing I have been having trouble with though, is generating unique tokens using stripe.card.createToken(). I'm trying to create two tokens because I'll need to generate both a Customer and and Account, so I can charge and pay out to the same card. This seems dumb, but people at Stripe have told me that this is what I need to do to do both without multiple form submissions.
The problem I'm having is that when I call createToken two times, both calls return the same exact token. I've had this working in jQuery with back-to-back createToken calls, where they both return unique tokens. Do you know if there's a way to do this with your module?
Thanks,
-Frank
Code:
var token =
stripe.card.createToken({
number: $scope.card.number,
cvc: $scope.card.cvc,
exp_month: $scope.card.expiry_month,
exp_year: $scope.card.expiry_year,
currency: "usd",
});
token.then(function(obj) {
//console.log('then');
console.log('obj.id: ' , obj.id)
$scope.token=obj.id;
return obj;
});
setTimeout(function(){
var token2 =
stripe.card.createToken({
number: $scope.card.number,
cvc: $scope.card.cvc,
exp_month: $scope.card.expiry_month,
exp_year: $scope.card.expiry_year,
currency: "usd",
});
token.then(function(object) {
//console.log('then');
console.log('object.id: ' , object.id)
$scope.token2=object.id;
$http.post(ApiEndpoint.url +'/debitChargePayout', {'userId': 2, 'stripeToken': $scope.token, 'stripeToken2': $scope.token2})
return obj;
});
},200);
Hi Ben,
Can you grant me permissions to submit a pull request for angular-stripe and angular-credit-cards? I would like to contribute the minified versions for both of those scripts.
Thanks!
Hi,
I can't see that you've exposed anything that would enable me to store a Stripe customer object and then charge their card details later is there? I don't want to take payment immediately but need to be able to do so automatically based on customer behaviour. The functionality in Stripe that I'm after is detailed here - https://stripe.com/docs/tutorials/charges
Looks like a great module btw....would be a shame if I couldn't use it.
Thanks,
Ben
When processing a payment I get: TypeError: object is not a function
which traces back to:
return new Promise(function (resolve, reject) {
fn.apply(context, args.concat(function () {
resolver.apply({ resolve: resolve, reject: reject }, arguments);
}));
});
Error: $injector:modulerr
Module Error
Failed to instantiate module angular-stripe due to:
TypeError: Cannot read property 'setPublishableKey' of undefined
at new module.exports (http://localhost/lp/bower_components/angular-stripe/release/angular-stripe.js:18:34)
Hi Ben.
I have made a successful app with angular-payments, but I have desided to try out your angular-stripe instead. But no matter what I do, I cannot seem to get past this error above.
I would appretiate your thoughts about this error.
One thing about my app:
I need to read the stripe public key from the server, so I read it using a controller.
Works fine with angular-payments, when I do this:
controllers.controller('MyCtrl', function ($scope, $http) {
$http.get(host + '/path/to/config').success(function (conf) {
if (conf.Result === 'OK') {
window.Stripe.setPublishableKey(conf.Details.StripePublicKey);
}
});
Then I tried to change that to using angular-stripe instead, by doing this:
controllers.controller('MyCtrl', function ($scope, $http, stripeProvider) {
$http.get(host + '/path/to/config').success(function (conf) {
if (conf.Result === 'OK') {
stripeProvider.setPublishableKey(conf.Details.StripePublicKey);
}
});
And of course change the module to include 'angular-stripe' instead of 'angularPayments'.
No luck.
Let me know if you need more information.
Here's a copy from your angular-stripe bower.json that I use:
{
"name": "angular-stripe",
"version": "4.1.0",
"homepage": "https://github.com/bendrucker/angular-stripe",
"authors": [
"Ben Drucker <[email protected]>"
],
"description": "Angular service provider for interacting with Stripe",
"main": "./release/angular-stripe.js",
"moduleType": [
"node",
"amd",
"globals"
],
"keywords": [
"angular",
"stripe",
"promise",
"wrapper"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"components",
"test",
"tests",
"karma.conf.js"
],
"dependencies": {
"angular": "~1.3.2"
},
"devDependencies": {
"angular-mocks": "~1.3.2",
"stripe": "https://js.stripe.com/v2/stripe-debug.js"
}
}
I would really appretiate a quick response since I'm close to a dead-line to make things work....
Thanks.
Hi There,
I'm playing around with this, but it seems that some of the functionality of stripe is missing like e.g. customers.create
Are there any plans to add these, or is it just me that is an complete idiot and don't know how to use the module?
Is this package compatible with Stripe v3 ? There is no Stripe.setPublishableKey
function.
I have a question on this statement:
angular-stripe expects Stripe.js to be available as window.Stripe when it loads.
I know it's a different problem. But how do we do this? Is there a callback?
I'm not sure why/if this is desired behavior, but installing the NPM library doesn't download the release directory. importing the index.js file results in problems (most specifically, dupe loading angular).
I see in package.json there is a key, "standard," which has nested an "ignore" array with "release" listed. I'm not familiar with the "standard" key, and Google wasn't helpful. It seems like a possible culprit for the missing files.
Hello,
Really nice library, but as I am pretty new to AngularJS am having some issues trying to implement. Do you have some examples which show it being implemented? Looking to use your full stack but not having examples is causing an issue; especially with using the module inside a controller.
Many thanks
When trying to press the delete/backspace button (key = 46) to correct the card number, the formatter gets stuck in a loop which adds a symbol then adds whitespace and vice versa.
Not sure how this is working but could it be possible to use .trim() if the last digit is a gap?
I also noticed that its adding: /b to the value
This is happening in firefox but not happening in chrome if that helps
Also makes sense to make 'Stripe'
a constant in the index and then just inject it elsewhere.
Per #7 (comment), this seems to be a common mistake
I am using this on the angle dashboard plugin running anuglar 1.3.10 found at https://wrapbootstrap.com/theme/angle-bootstrap-admin-app-angularjs-WB04HF123 if it is a compatability issue.
I get a successful response from stripe with a created token. But
$scope.charge = function () {
return Stripe.card.createToken($scope.stripeAccount)
.then(function (token) { console.log('token created for card ending in ', token.card.last4); var payment = angular.copy($scope.payment); payment.card = void 0; payment.token = token.id; return $http.post('https://yourserver.com/payments', payment); }) .then(function (payment) { console.log('successfully submitted payment for $', payment.amount); }) .catch(function (err) { if (err.type && /^Stripe/.test(err.type)) { console.log('Stripe error: ', err.message); } else { console.log('Other error occurred, possibly with your API', err.message); } }); };
and below is the error:
TypeError: undefined is not a function
at f.$scope.charge (http://loc.rvshare.com:8888/panel/app/js/app.js:4016:8)
at $o.functionCall (http://loc.rvshare.com:8888/panel/app/js/base.js:7:10219)
at ra.(anonymous function).compile.n.on.i (http://loc.rvshare.com:8888/panel/app/js/base.js:7:16597)
at f.$get.f.$eval (http://loc.rvshare.com:8888/panel/app/js/base.js:6:1083)
at f.$get.f.$apply (http://loc.rvshare.com:8888/panel/app/js/base.js:6:1309)
at HTMLButtonElement. (http://loc.rvshare.com:8888/panel/app/js/base.js:7:16649)
at HTMLButtonElement.Z.event.dispatch (http://loc.rvshare.com:8888/panel/app/js/base.js:2:14424)
at HTMLButtonElement.Z.event.add.m.handle (http://loc.rvshare.com:8888/panel/app/js/base.js:2:11199)base.js:5 (anonymous function)base.js:5 $getbase.js:6 $get.f.$applybase.js:7 (anonymous function)base.js:2 Z.event.dispatchbase.js:2 Z.event.add.m.handle
This module loads Stripe Checkout on demand. Would love to see something similar.
https://github.com/tobyn/angular-stripe-checkout
Thanks for the code!
I like that you include your source in your published npm package, but could you also include the same release files that you include in your bower package for those of us who no longer want to depend on bower?
I appreciate your consideration! Thanks!
Hi Ben,
Any timeframe for pulling in angular 1.4 as a dependency and testing your library?
Thanks!
Hi,
Will you be able to add a sample HTML form as I getting a card invalid error.
Thanks mate
I'm up for considering expanding the library to handle window.Stripe
being undefined (script load error), but only if the default/recommended behavior is to allow angular-stripe to handle script loading.
This would involve a few notable changes:
window.Stripe
if it's definedThis will significantly increase the size/complexity of the library in exchange for potentially eliminating all custom user boilerplate. For an example of how this'll work see https://github.com/bendrucker/complacent and its dependency chain.
Would any of the following people who have asked about this feature in the past care to weigh in on whether you'd be willing to test/adopt this if I build it?
@PaddyMann @grcasanova @cyberwombat
In former versions of angular-stripe
, the concatenated file angular-stripe.js
was shipped together with the project. If, for whatever reason you don't ship it though nodejs, at least I would assume that it is created automatically whenever I install the package using npm install angular-stripe --save
, but that doesn't work either, nor can I find any instruction on how to build it manually.
How can I include angular-stripe in webpack application ? For example, I use babel (for ES6), I write
import ngSprite from 'angular-stripe';
but it does not work, I get error in this line
import Stripe from 'stripe'
because Stripe.js will be exists after build (I load Stripe.js on my html page).
It is possible to use this library with webpack and as npm module (if I don't use babel I get error that SyntaxError: Unexpected reserved word ) ?
I am using the sean-generator, I keep getting:
Error: [$injector:modulerr] Failed to instantiate module angular-stripe due to:
TypeError: Cannot read property 'setPublishableKey' of undefined
at new module.exports (http://localhost/lib/angular-stripe/release/angular-stripe.js:18:34)
I am not just learning angular can someone explain how I can fix this.. with that platform. Would be greatley appreciated.
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-stripe due to:
Error: Stripe must be available as window.Stripe
ofcourse <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
injected
Hello !
I get this error :
"ionic.bundle.js:25642 TypeError: Cannot read property 'card' of undefined
at Scope.$scope.charge (controllers.js:29)
at fn (eval at (ionic.bundle.js:26457), :4:209)
at callback (ionic.bundle.js:36610)
at Scope.$eval (ionic.bundle.js:29158)
at Scope.$apply (ionic.bundle.js:29257)
at HTMLFormElement. (ionic.bundle.js:36615)
at HTMLFormElement.eventHandler (ionic.bundle.js:16583)
at triggerMouseEvent (ionic.bundle.js:2948)
at tapClick (ionic.bundle.js:2937)"
... when i submit the form
(Sorry i I started with angular)
My Controller
`.controller('PaiementCtrl', function($scope, $rootScope, $http, $state, stripe) {
$scope.charge = function () {
console.log(stripe.card);
return stripe.card.createToken($scope.payment.card)
.then(function (response) {
console.log('token created for card ending in ', response.card.last4);
var payment = angular.copy($scope.payment);
payment.card = void 0;
payment.token = response.id;
return $http.post('https://localhost/payments', payment);
})
.then(function (payment) {
console.log('successfully submitted payment for $', payment.amount);
})
.catch(function (err) {
if (err.type && /^Stripe/.test(err.type)) {
console.log('Stripe error: ', err.message);
}
else {
console.log('Other error occurred, possibly with your API', err.message);
}
});
}
})`
Form html
`
<label class="item item-input item-stacked-label">
<span class="input-label">Numéro de la carte</span>
<input type="text" ng-model="payment.card.number" name="cardNumber" cc-number placeholder="Numéro de carte">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Expiration</span>
<input type="text" name="expiry" ng-model="payment.card.expiry" placeholder="01 / 99">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Cryptogramme visuel</span>
<input type="text" name="cvc" ng-model="payment.card.cvc" placeholder="Cryptogramme">
</label>
<button type="submit" class="button button-full button-positive">Payer</button>
</form>`
Thanks !
Sorry if this is not the smartest of questions.. but how do you get started?
Are you using RequireJS with Angular or something?
I have never seen the require being used to load a module and googling it has availed nothing useful.
This module won't instantiate if Stripe's JS isn't loaded, which causes the entire app to break.
While Stripe's uptime is > 99% (https://status.stripe.com/), we can't have our app going down if Stripe is down :)
Ideally, I'd like this module to load stripe.js for me when I want it, and then handle the error if it can't.
I'm on a deadline so will probably hand-crank our solution, but v interested if there are workarounds with the current module :)
Hi,
Do you know why piiData is undefined on stripe? Trying to use this method: https://stripe.com/docs/stripe.js#pii-data-createToken
Thanks in advance,
Pavel.
Hi Ben,
Great work on this, but running into a bit of difficulty when writing tests for a module that is dependent on angular-stripe. I'm using stripe-debug, and logging Stripe within a spec confirms it is available so I'm confused by the following error:
PhantomJS 1.9.8 (Mac OS X 0.0.0) WARN: 'It looks like Stripe.js is not being loaded from https://js.stripe.com. Stripe does not support serving Stripe.js from your own domain.'
PhantomJS 1.9.8 (Mac OS X 0.0.0) Directive: checkout-form can instantiate angular-stripe FAILED
Error: [$injector:modulerr] Failed to instantiate module angular-stripe due to:
Error: Stripe must be available as window.Stripe
I've also tried mocking Stripe in a before function like so:
window.Stripe = {
card: {},
bankAccount: {}
}
My suite (stripped down to the essentials):
describe('Directive: checkout-form', function () {
beforeEach(module('checkout'));
beforeEach(angular.mock.inject(function(_$scope_) {
$scope = _$scope_;
}));
it("can instantiate angular-stripe", function () {
});
});
I suspect I am not getting something, so I'm really looking for some pointers more than anything else. Oh, and I look forward to seeing what you come up with for mockstripe.
A key can be passed as params.key
which will override the one set by setPublishableKey
.
I'm trying to use this library into a webpack+angular2+typescript project.
I've just installed: npm install --save angular-stripe
.
My app.module.ts
is like:
@NgModule({
bootstrap: [ App ],
declarations: [
App,
ErrorComponent
],
imports: [ // import Angular's modules
BrowserModule,
CoreModule,
SharedModule,
RouterModule.forRoot(ROUTES, { useHash: true })
]
})
I've tried to import { angular-stripe } from 'angular-stripe'
but I'm getting an error. I don't quite figure out how to use it into my code.
Any ideas?
The .bower.json
file that is included with version 5.0.0 doesn't include an entry for the main
javascript file so it isn't included in bower dependencies for builds. I worked around this locally by updating my bower.json
with an overrides
entry.
"overrides": {
"angular-stripe": {
"main": [
"release/angular-stripe.js"
]
}
}
Is it possible to have the main
entry included in the .bower.json
file in the angular-stripe
module? Thanks!
I've been using this with angular 1.5 with no issues. Can you please bump the bower allowed version to <2.0
Mind you I have not fully looked over your scripts, but Stripe has an ACH payment ability in Beta. That along with BalancedPayments.com closing their doors and sending all their customers to Stripe means they get ACH abilities now as those currently with Stripe accounts must wait, bummer but so-be-it.
Anyway, would you be including the ACH payment ability to your script?
For my use I'm looking at 2 Tabs and partials for a single payment page with separate templates to ease maintenance.
The Readme uses stripe with lowercase s and the service name. This is incorrect
Stripe.js requires to load the JS from their server.
If Stripe.js is not loaded, angular-stripe will trigger the error
Error: [$injector:modulerr] Failed to instantiate module angular-stripe due to:
Error: Stripe must be available as window.Stripe
How would you advice to perform unit tests using angular-stripe?
response.error
is a string. Rejection should wrap that error in an Error
. Still need to decide if that merits 4.0.
Is there any breaking changes in 5.x?
When trying to run unit test with Jasmine none of my tests will start. I keep getting the Stripe must be available as window.Stripe
error messing up my whole test suite from running. I have loaded the stripe.js and angular-stripe js files in my karma.conf before the main app.js which includes it loads, but it just won't working. Any ideas on how to fix this and be able to run unit tests?
When using bower package with bower-rails gem it seems that angular-stripe can't be found.
On closer inspection I noticed that bower.json main points to a directory that doesn't contain angular-stripe.js
Is this right?
Thanks so much for making this, just had a quick question.
I spent a good amount of time on laurihy's angular-payments but realized they didn't do these checks.
I didn't see anywhere in your documentation about this so just wanted to see if you could confirm.
Hey there,
Wondering if you can provide an example of how your setting up the payment form and passing $scope.payment.card.
I'm migrating over from a custom form I built for testing through the Stripe docs and need a bit of direction if thats alright.
Do we still need to include the data-stripe attribute? i.e
data-stripe="number"
data-stripe"cvc"
Thanks in advance!
npm install --save angular-stripe
does not load the release folder, which contains angular-stripe.js
Hi,
in your examples there are couple of references to this object.
considering we are using Angular-Stripe in combination with Angular-Credit-Card, how you would initialize that object?
As far as i can see $scope.payment.card is the card object generated by ACC, but not sure about the other fields.
Thanks
Hi,
I have been working on this issue for a few days. I see several examples but I get the same error whatever approach tested.
angular.module('myApp', [
'angularPayments',
'angular-stripe',
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'mm.foundation',
'ngAnimate',
'angularSpinner'
])
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('testkey');
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/plans', {
templateUrl: 'views/plans.html',
controller: 'PlansCtrl',
controllerAs: 'plans'
})
.otherwise({
redirectTo: '/'
});
});
< script src="bower_components/jquery/dist/jquery.js"></script>
< script src="bower_components/angular/angular.js"></script>
< script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
< script src="bower_components/angular-animate/angular-animate.js"></script>
< script src="bower_components/angular-cookies/angular-cookies.js"></script>
< script src="bower_components/angular-resource/angular-resource.js"></script>
< script src="bower_components/angular-route/angular-route.js"></script>
< script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
< script src="bower_components/angular-touch/angular-touch.js"></script>
< script src="bower_components/angular-stripe/release/angular-stripe.js"></script>
< script src="bower_components/angular-payments/lib/angular-payments.js"></script>
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-stripe due to:
Error: Stripe must be available as window.Stripe
at new stripeProvider (http://localhost:9000/bower_components/angular-stripe/release/angular-stripe.js:149:22)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4473:17)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4481:27)
at provider (http://localhost:9000/bower_components/angular/angular.js:4315:36)
at Object.provider (http://localhost:9000/bower_components/angular/angular.js:4307:16)
at runInvokeQueue (http://localhost:9000/bower_components/angular/angular.js:4379:35)
at http://localhost:9000/bower_components/angular/angular.js:4387:11
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4369:5)
at http://localhost:9000/bower_components/angular/angular.js:4386:40
http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=angular-stripe&p1=E…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A4386%3A40
at http://localhost:9000/bower_components/angular/angular.js:68:12
at http://localhost:9000/bower_components/angular/angular.js:4408:15
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4369:5)
at http://localhost:9000/bower_components/angular/angular.js:4386:40
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1655:20)
at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1676:12)
http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=myApp&p1=Error%3A%…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1676%3A12)
Any help would be great.
Thanks
Phil
It would be nice to be able to set the publishable key after configuration.
In my case I pull the key in using a $http call inside another service, which can't be done easily inside a configuration step.
Hi There!
I'm really excited to use this library you created. However in my naive approach I added the module via bower, where I specified the latest version:
"angular-stripe": "*"
I then included stripejs above the script reference like this in my index.html:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
However after starting the app, I receive a failure to instantiate module.
[$injector:modulerr] Failed to instantiate module angular-stripe due to:
$[injector:nomod] Module 'angular-stripe' is not available.
My bower injects this into the index.html:
<script src="wwwroot/lib/angular-stripe/release/angular-stripe.js"></script>
All my files are in IFEE blocks and I declare my App like
var app = angular.module("topSecretAppName",
[
"common.services",
"ngAnimate",
"ngCookies",
"ngResource",
"ngRoute",
"ui.router",
"payment",
"angular-stripe"
]);
Thank you in advance for creating this nice library.
~Dennis
Anyone tried using this library with ionic? I'm having problem including this module. Tried installing with npm, bower or putting src in root folder and including with <script>
tag. No luck with any of this methods.
angular.module('myApp', [
require('angular-stripe')
]);
gives me require is not defined
error.
angular.module('myApp', [
'angular-stripe'
]);
gives me Module 'angular-stripe' is not available!
error.
Hello,
it looks like the module needs a callback in case there is no connection (and Stripe API is consequently unavailable), otherwise the whole angular app crashes in a WSOD with the following error:
Error: [$injector:modulerr] Failed to instantiate module washery due to:
[$injector:modulerr] Failed to instantiate module angular-stripe due to:
Stripe must be available as window.Stripe
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.