Comments (8)
No need to use data attributes. For building payment forms, you'll want to pair:
- angular-stripe
- https://github.com/bendrucker/angular-credit-cards
- https://github.com/bendrucker/angular-form-state
I think this merits a full example application with a mock server. If you post code in the mean time I can help answer specific questions.
from angularjs-stripe.
Hey thanks for the prompt response and leading me in right direction.
A few notes to help anyone else trying to use angular-credit-cards with angular-stripe.
These changes apply if your using the form provided in the example from angular-credit-cards.
- Make sure to set attribute 'full-year' to the expiration year field. Stripe requires the year to be passed as 4 digits.
- Update the ng-model attributes for all input fields with prefix 'payment.'
- Change attributes for expiration to 'payment.card.exp_month' & 'payment.card.exp_month', matching the parameter names required by Stripe.
I haven't incorporated 'angular-form-state' yet, but these were the steps I had to go through in order to create a successful token and make the post request to my server which I will work out.
I'm assuming that using angular-credit-cards, we can avoid doing card validations through Stripe.js Helpers?
Let me know what you think about some of my comments.
Thanks!
from angularjs-stripe.
Stripe requires the year to be passed as 4 digits.
Incorrect according to the docs:
exp_year
: two or four digit number representing the card's expiration year
There's also no obligation to use a payment
prefix for your models or any prefix at all. You just have to put the attributes on an object in the same format as Stripe expects. Or don't and just collect the right properties in the controller.
And yes, definitely use angular-credit-cards over the Stripe.js helpers. Stripe's just trying to make the new user experience a little easier, but coupling your validation to the tokenization library is code smell. angular-credit-cards delegates to https://github.com.com/bendrucker/creditcards which has better validation and type detection than Stripe's own jQuery.payments that powers Stripe Checkout.
from angularjs-stripe.
Your right I think I had attempted to switch it to four digit before converting to the right parameters.
from angularjs-stripe.
Cool. So I'll put together a full demonstration project that deals with payments and is backed by both a mock implementation for Stripe.js (https://github.com/bendrucker/mockstripe) and a mock server for simulating the server success scenarios. I'm 100% sure it'll be done by May so I can plug it in my ng-vegas talk.
from angularjs-stripe.
It appears mockstripe never got finished (https://github.com/bendrucker/mockstripe), but I feel the need is still great. The adoption of your (wonderful) work is hindered by IMHO equating the best practice of modularizing working components, with the (confusing) practice of allowing documentation to be modularized. Said another way, modularize and encapsulate to your heart's content, but unify your documentation somehow. without adoption, what's the point in open source?
my use case: i am using meanjs 0.4.0 with a gulp task runner on localhost:3000, and am seeking to define a route within an encapsulated module (with ui-router), called "/charge" that will accomplish what is described here (https://stripe.com/docs/tutorials/charges) on the backend. I keep getting the following error in the console: Stripe.isDoubleLoaded.c.
here is my controller in angular (based on your docs).
var testCard = {
'number': '4242424242424242',
'cvc': '123',
'exp_month': 12,
'exp_year': 2016
};
$scope.charge = function() {
console.log('i am scope.charge:');
console.log('i am scope.payment.card');
console.log($scope.payment.card);
return stripe.card.createToken(testCard)
.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('/charge', 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 here is my (preliminary) code for the backend:
//subPages.server.controller.js
'use strict';
///things get required at top
/functions related to subPages: charge a user for buying a gift card/
exports.charge = function(req,res){
// res
console.log('i am exports.charge!');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://dashboard.stripe.com/account/apikeys
var stripe = require('stripe')('sk_test_7SdP9ZjFu208DhIxMnrpf8qy');
// (Assuming you're using express - expressjs.com)
// Get the credit card details submitted by the form
var stripeToken = req.body.stripeToken;
var charge = stripe.charges.create({
amount: 1000, // amount in cents, again
currency: 'usd',
source: stripeToken,
description: 'Example charge'
}, function(err, charge) {
res.sendStatus(200);
// if (err && err.type === 'StripeCardError') {
// // The card has been declined
// }
});
};
any and ALL help is appreciated.
from angularjs-stripe.
as an update this reaches the node backend:
var testCard = {
'number': '4242424242424242',
'cvc': '123',
'exp_month': 12,
'exp_year': 2016
};
$scope.testCharge = function() {
console.log('i am the beginning of testCharge...')
$http.post('/charge', testCard).then(function(){
console.log('i am testCharge http:');
});
}
but I can't seem to get the above charge() function based on your angular-stripe example to reach the backend...
from angularjs-stripe.
sorry for the garbled lines, been busy, but want to contribute/get help from you.
so part of the issue: i was using 1.2 and angular-q-constructor BEFORE i decided to use angular-credit-cards; when i started using angular-credit-cards, i was forced to upgrade to angular 1.3 (with not breaking changes in my app so far). But I never got rid of angular-q-constructor as a dependency.
Separately, i was using my live key from stripe locally; that's a no-go; using BOTH the test publishable and test secret keys got me working.
so now this is working as expected (with little tweaks to the expected returned object after success):
$scope.charge = function() {
return stripe.card.createToken($scope.payment.card)
.then(function(token) {
console.log('token created for card ending in ', token.card.last4);
console.log('i am token:');
console.log(token);
var payment = angular.copy($scope.payment);
payment.card = void 0;
payment.token = token.id;
return $http.post('/charge', payment);
})
.then(function(payment) {
console.log('successfully submitted payment for $', payment.data.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);
}
});
};
Next I pass the token to my modules server.controller.js file where i define exports.charge:
//subPages.server.controller.js
'use strict';
///things get required at top
/*functions related to subPages: charge a user for buying a gift card*/
exports.charge = function(req, res) {
console.log('i am exports.charge!');
// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://dashboard.stripe.com/account/apikeys
var stripe = require('stripe')('sk_test_7SdP9ZjFu208DhIxMnrpf8qy');
// (Assuming you're using express - expressjs.com)
// Get the credit card details submitted by the form
console.log('i am req.body');
console.log(req.body);
var stripeToken = req.body.token;
console.log('i am stripeToken:');
console.log(stripeToken);
var charge = stripe.charges.create({
amount: 1000, // amount in cents, again
currency: 'usd',
source: stripeToken,
description: 'Example charge'
}, function(err, charge) {
console.log('i am charge:');
console.log(charge);
res.status(200).json(charge);
if (err && err.type === 'StripeCardError') {
// The card has been declined
}
});
};
from angularjs-stripe.
Related Issues (20)
- npm install angular-stripe doesn't build angular-stripe.js HOT 1
- Card type when user finished to add the Card Number HOT 1
- Card formatting, unable to press the backspace/delete key to edit this field HOT 1
- how to use this library into webpack+angular2+typescript project HOT 2
- Stripe v3 HOT 4
- piiData undefined HOT 1
- Version 5.0.0 doesn't export main javascript file in .bower.json HOT 1
- 5.0 change log HOT 1
- stripe.card.validateCardNumber not working
- Support with Stripe v3 HOT 1
- v5 doesn't include bower.json export of release/angular-stripe.js HOT 1
- release folder and js not included in NPM HOT 1
- Support for stripe.js v3 paymentRequest method HOT 4
- [gdpr] [lazy-load] Conditionally include Stripe.js HOT 4
- Facing an Issue in integrating angular-stripe HOT 1
- Action required: Greenkeeper could not be activated 🚨
- promise not triggered back while created token anuglar-stripe.js
- This is AngularJs not Angular HOT 1
- [question] Seems there is no possibility to set apiVersion?
- The naming of the library is misleading HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angularjs-stripe.