Posted on by — 2 Comments

Creating A POS System With Lumen and Ionic – Part 2

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Before We Begin

Have you already have the Lumen back end micro service up and running? If not head over to part 1 and write your own implementation. Alternatively you can clone the repository from GitHub. Now with that working, let us begin!

Ionic

As with part 1 I will assume you already have the environment set up to begin Ionic development. If you don’t, please head over and read my previous Ionic tutorial. Otherwise let’s create a new project

ionic start ParkerPay

cd into the new application and install the dependencies

bower install ngCordova  

cordova plugin add https://github.com/Paldom/SpinnerDialog.git


cordova plugin add cordova-plugin-dialogs

This will install ngCordova which will allow us to access native APIs via plugins, the two plugins are for accessing native spinner dialogs and alert dialogs. Now let’s edit the application logic, head over to www/js/app.js and paste the following code:


angular.module('parker-pay', ['ionic','ngCordova'])


.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})


.controller('HomeCtrl', function($scope,$http,$cordovaSpinnerDialog,$cordovaDialogs){
$scope.charge = {};
$scope.createToken = function(){
$cordovaSpinnerDialog.show("Processing Payment","Please wait....", true);
Stripe.setPublishableKey('STRIPE PUBLISHABLE KEY');
Stripe.card.createToken({
number: $scope.charge.number,
cvc: $scope.charge.cvc,
exp_month: $scope.charge.exp_month,
exp_year: $scope.charge.exp_year
}, $scope.stripeResponseHandler);
};


$scope.stripeResponseHandler = function(status, response){
if (response.error) {
// Show the errors on the form
$cordovaSpinnerDialog.hide();
$cordovaDialogs.alert('There was an error', 'Alert', 'OK')
.then(function() {
// callback success
});


} else {
// response contains id and card, which contains additional card details
var token = response.id;
//console.log()
// Insert the token into the form so it gets submitted to the server
var data = {token:token,amount:$scope.charge.amount,description:$scope.charge.description}
// and submit


$http.post('http://payment.jyroneparker.com/charge',data).success(function(dta){
console.log(dta);
$cordovaSpinnerDialog.hide();
// beep 1 time
$cordovaDialogs.beep(1);
$cordovaDialogs.alert('Payment was a success.', 'Alert', 'OK')
.then(function() {
// callback success
});

}).error(function(dta){
console.log(dta);
$cordovaSpinnerDialog.hide();
alert('There was an error.');


$cordovaDialogs.alert('There was an error', 'Alert', 'OK')
.then(function() {
// callback success
});


//$cordovaSpinnerDialog.hide();
});
}
}
})

Be sure to put your Stripe key in. Last thing to do programmatically speaking, is to edit the index.html file. Paste the following code:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->


<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>


<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>


<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="parker-pay" ng-controller="HomeCtrl">


<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Parker Pay</h1>
</ion-header-bar>
<ion-content
<div class="list list-inset">
<label class="icon icon-left ion-pricetag item item-input">
<input ng-model="charge.amount" type="text" placeholder=" Amount">
</label>
<label class="icon icon-left ion-card item item-input">
<input ng-model="charge.number" type="text" placeholder=" Card Number">
</label>
<label class="ion-calendar icon icon-left item item-input">
<input ng-model="charge.exp_month" type="text" placeholder=" Exp. Month">
</label>
<label class="icon icon-left ion-calendar item item-input">
<input ng-model="charge.exp_year" type="text" placeholder=" Exp Year">
</label>
<label class="icon icon-left ion-card item item-input">
<input ng-model="charge.cvc" type="text" placeholder=" CVC">
</label>
<label class="icon icon-left ion-edit item item-input">
<input ng-model="charge.description" type="text" placeholder=" Description">
</label>
</div>
<div class="row">
<button ng-click="createToken()" class="col-offset-33  icon icon-left ion-social-usd button button-positive">
Charge
</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>

Next add your preferred platform by running

ionic platform add <PLATFORM>

, connect your device and run ionic run <PLATFORM> , THAT’S IT YOU ARE NOW TAKING PAYMENTS!! See how easy that was? You are on your way to being an Artisan! Be sure to check the code out on GitHub

2 thoughts on “Creating A POS System With Lumen and Ionic – Part 2”

  1. Usama

    hello why u use http.post i guess everything would be done via angularjs

    Reply
    1. mastashake08

      I don't understand your comment.

      Reply

Leave a Reply