In this tutorial, we‘ll look how we can create angular-stripe-checkout into our website. We will use Stripe payment gateway but you can also use other payment gateway for checkout. Stripe is very popular processing service that make easy to online payment, in this tutorial, we’ll guide you through how to use Stripe to process payment in Angularjs application. A Stripe is a recognized payment gateway, it’s provide a well-documented API for integrate Stripe into Angularjs applications. Stripe is automatically saves the critical data on its own servers and implements security standards; it’s encrypting the credit card data.
Stripe is the best way to accept online payments in website and mobile apps. They handle billions of dollars every year for forward-thinking businesses around the world. A PayPal is also best for the accept online payments, you can look difference between Stripe and PayPal to visit this site https://www.merchantmaverick.com/paypal-vs-stripe/.
For the development of angular-stripe-checkout into website, you must have an account in stripe for developer testing, A Stripe provide test and live account for developers. Developer can use test environment for development environment, when development will done then activate the live account. In test environment developers can use test credit cards for testing but if the stripe account is active or live mode then testing credit card not allowed , it’s must accept the real credit card.
After created account in stripe, you can implement angular-stripe-checkout in your website. Let’s see how to implement it.
Open Visual studio or visual studio code, if you don’t have visual studio code then download it from https://code.visualstudio.com/ . For this tutorial we will use visual studio, so opened visual studio and create new empty project. An empty project is created then creates new folders like (views, controller, bower_components, and scripts).
First install the Angularjs bower component in bower_component folder. Angular component is most useful and important for development because we will develop this tutorial using angularjs. After installed the angularjs bower component second install the (Jquery, Jquery-ui, Jquery.payment) bower component in bower_component folder. We have installed four components in bower_components folder.
For implement, angular-stripe-checkout, we must have install the angular-stripe-form component from Bower site and add it in bower_component folder. We installed all the required components and added in same folder. Now we will create view page (.html file) for design angular stripe checkout. Create index.html file in views folder.
In Index.html file first of all we have to inject the required files in the tag. First inject the bootstrap file (bootstrap.min.css), second is stripe Css file (stripe-form.css). Now inject the (.js) files in tag. So first inject (jquery.min.js), second is (jquery.ui.js), third (bootstrap.js), fourth is (angular.js). Inject the stripe related (.js) files that one is (“ https://js.stripe.com/v2/”) this is useful for the card details verified and it’s work if the intenet connection available because it calls to Stripe live API. Second is (jquery.payment.js), and third one is (stripe-form.js) in this file all the stripe validations, Stripe API call from this file. We have installed the all (.css) and (.js) files that required in this tutorial.
It’s time to create Controller and that controller inject in the tag like this . But before create controller file we must create modular file for whole project, after created modular file we will create other files and we must have to inject the modular name in tag in index.html.
Index.Html
<!DOCTYPE html>
<html data-ng-app="StripeDemo">
<head>
<title>Stripe Payment</title>
<!-- Bootstrap -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--stripe-->
<link rel="stylesheet" type="text/css" href="../bower_components/angular-stripe-form/src/css/stripe-form.css">
<!--end-->
</head>
<body data-ng-controller="stripeController">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jqueri-ui/jquery-ui.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<!--Stripe-->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="../bower_components/jquery.payment/lib/jquery.payment.js"></script>
<script src="../bower_components/angular-stripe-form/src/js/stripe-form.js"></script>
<!--end-->
</body>
</html>
Create Modular file (app.js) in scripts folder, it is the most important for the whole project to create controller, services, directive, etc.
App.js
var app = angular.module('StripeDemo', ['ui.bootstrap.stripe-form'])
app.config(function ($httpProvider) {
Stripe.setPublishableKey('pk_test_9UmoLTisWuQ6zpNwlHVpx9Oy');
});
A modular file is created using the name of “StripeDemo” and we have injected the stripe component in modular like “ui.bootstrap.stripe-form”. In the modular file set the Stripe publishable key, a stripe publishablekey available in test mode and live mode, you can create test and live publishable key on Stripe. If the project is under development the use test publishable key or if the project is going live the use live publishable key.
Modular file is created then create controller file using the modular name, a controller file connected with view (.html) file. Because we bind the data in HTML page from getting controller and post the data to controller and the controller send that to service and service send that data to API. We can write our business code in the controller file. Create Controller file using the name of “stripeController”.
Modular file is created then create controller file using the modular name, a controller file connected with view (.html) file. Because we bind the data in HTML page from getting controller and post the data to controller and the controller send that to service and service send that data to API. We can write our business code in the controller file. Create Controller file using the name of “stripeController”.
stripeController.js
app.controller('stripeController', ['$scope',function ($scope) {
}]);
We have created modular and controller file, inject this files in tag and bottom of the “stripe-form.js” file. Now, It’s time to add angular-stripe-checkout design in index.html, for this we will use component , we use different attributes with the component like a “data-image”, “data-on-cancel”, “data-on-create-token”. We use the bootstrap class also for the better design. Add in "
" tag in index.html.
Index.html
<div class="row">
<div class="col-xs-6" style="margin-left:340px; top:30px">
<div style="height:100%">
<div class="row" style="margin-left:10px">
<h4 class="group inner list-group-item-heading" style="text-align:center">Add Credit Card</h4>
<stripe-form data-image="https://stripe.com/img/documentation/checkout/marketplace.png" data-on-cancel='cancelHandler' data-on-create-token='createTokenHandler'></stripe-form>
</div>
</div>
</div>
</div>
In above code, you can see attributes of “data-on-cancel” and “data-on-create-token”. When user entered the details and click on submit button then call the “createTokenHandler” function in controller, when we cancel the card details then calls the “cancelHandler” function in controller. We have to create both functions in controller side.
cancelHandler
$scope.cancelHandler = function () {
alert("you discard the card details");
};
createTokenHandler
$scope.createTokenHandler = function (code, body) {
if (code !== 200) {
alert(body.error.message);
$scope.xhr = false;
} else {
$scope.$apply(function () {
var tokens = body;
$scope.updateCard =
{
tokenid: tokens.id,
};
paymentService.updateCardProcess($scope.updateCard).then(function (swalSuccess)
{
},
function (swalError) {
}).finally(function () {
});
});
}
};
Above function call when we submit the card details, that card details send to Stripe API by encryption of data. Third party can’t access that secret data. Stripe API verify that card details, if the card details are right then it give the success response with the token, if the card details are wrong then Stripe API give the Unsucess response without any token. If card details verified successfully then it give response code 200. If response code is not 200 then show message within alert message. If the response code 200 then it gives token in body variable and we use this token to API side for customer to this cards is added by this user.
Output
You can see above fourth fields are available “card number”, “card code”, “name on card”, “expires”. If the card number, card code, name on card, expires is blank or invalid then try to verify card details then it will give the red line error. If you fill up the all details and then click on cancel button, the all filed reduce the data and all fields will be blank.
If you want to change the checkout panel design, you can change design in “stripe-form” (.js) file. The whole validations are also available in same file.
Thanks again,
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
Hi I am getting error after downloading and running the code that
ReplyDeleteHTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
Please help
ReplyDeleteCall this URL from browser
ReplyDeletehttp://localhost:49701/views/index.html