Utilizing the Stripe payment system for processing payments, I referenced a project on GitHub and a helpful blog.
Incorporating nested views and routers in my project, the structure appears as follows:
src
app
views
controllers
directives
index.html
app.js
The critical "app.js" file loads the Angular module manually along with the necessary routers.
app.js
var myApp = angular.module('myApp', ['ui.router', 'formData']);
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
// routers
}
The inclusion of Angular and Stripe scripts happens in the "index.html" file.
index.html
<head lang="en">
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<Script src="resources/angular.min.js"></Script>
<Script src="resources/angular-ui-router.min.js"></Script>
<script src="app.js"></script>
<script src="directives/formData/formData.js"></script>
<script type="text/javascript"
src="resources/angular-payments.js">
</script>
<script>
Stripe.setPublishableKey('key')
</script>
</head>
<div>
<div ui-view>
</div>
</div>
Within the "formData" directive lies the integration of Stripe payment functionality.
formData.js
var formData = angular.module('formData',['angularPayments']);
formData.directive('formData',function(){
return {
restrict: 'EA',
scope: {},
replace: true,
link: function($scope, element, attributes){
},
controller: function($scope,$attrs,$http, $state){
//Callback for handling Stripe payment is implemented here
$scope.stripeCallback = function (code, result) {
console.log("inside cc callbakc");
if (result.error) {
console.log("credit card error");
window.alert('it failed! error: ' + result.error.message);
} else {
console.log(result);
console.log("credit card success "+result.id);
window.alert('success! token: ' + result.id);
}
};
},
templateUrl: 'directives/formData/formData.tpl.html'
}
});
The "formData.tpl.html" also includes another ui router.
formData.tpl.html
<form id="signup-form" ng-submit="processForm()">
<!-- Nested state views will be injected here -->
<div ui-view></div
</form>
One of the HTML pages handled by the ui router is the payment page containing the following code:
<form stripe-form="stripeCallback" name="checkoutForm">>
<input ng-model="number" placeholder="Card Number"
payments-format="card" payments-validate="card" name="card" />
<input ng-model="expiry" placeholder="Expiration"
payments-format="expiry" payments-validate="expiry"
name="expiry" />
<input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" />
<button type="submit">Submit</button>
</form>
While validations are functioning correctly, hitting submit does not print anything to the console. It seems that the JavaScript is not executing properly. Additional information can be provided upon request.