Payments In Angular Via Angular Stripe
Posted By : Milind Ahuja | 28-Sep-2017
Angular Stripe is a commonly used service for online payment purposes, which is easy to integrate and use in web and mobile applications. A fixed fee of 2.9% + 0.30 per transaction will be charged. If you search for the Angular stripe, you will find at least six different open source alternatives which aim to do the same, i.e. to bring payments to Angular.
Following is the list of different libraries or modules for online payment:
https://github.com/bendrucker/angular-stripe
https://github.com/laurihy/angular-payments
https://github.com/seandesmond/angular-payment
https://github.com/gtramontina/stripe-angular
https://github.com/Venturocket/angular-stripe-js
https://github.com/raaspazasu/ngPayments
I personally chose Angular Stripe as it was the client's requirement and to me, it seems easy to integrate, secure, easy to use and is also starred well. It provides easy integration of Angular provider with Stripe.js and it uses async operations in $q promises which makes response handing easier by eliminating $scope.$apply calls.
To get started with it, you just need to install angular stripe by running following command:
bower install angular-stripe --save //OR
npm install angular stripe --save
Include the module in your app.js to use it in your application:
angular.module('myApp', [
'angular-stripe'
])
stripe provider is exposed by angular-stripe to configure stripe.js. stripeProvider.setPublishableKey(key)sets your stripe publishable key
.config(function (stripeProvider) {
stripeProvider.setPublishableKey('my_key')
})
You need to inject strip in your service or controller in order to access the API methods. A $q promise will be returned by createToken method. If Stripe responds with an error, the promise will be rejected.
Now, you just need to call stripe.card.createToken method and pass a key property under params and you will receive a token after getting a successful response.
$scope.payment = function(cardDetails) {
stripe.card.createToken(cardDetails).then(function(response) {
var paymentToken = response.id;
}).catch(function(errResponse) {
//Error please try again
});
}
Once you have successfully acquired a single-use credit card token, you need to send this token to your server to complete the billing process.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.