Ionic + Braintree JS integration
Hi Today Discussed Ionic Framework Braintree JS Integration. Ionic Framework.Braintree Payments drop-in into an Ionic mobile app I have them with an ionic modal view. Here follows Code.
 |
| Ionic + Braintree JS integration |
Html Page
<ion-content ng-controller="payController"> <div ng-show="step == 'signup'"> <div class="list"> <label class="item item-input"><input type="text" placeholder="First name" ng-model="customer.firstname"></label> <label class="item item-input"><input type="text" placeholder="Last name" ng-model="customer.lastname"></label> <label class="item item-input"><input type="text" placeholder="Company" ng-model="customer.company"></label> <label class="item item-input"><input type="text" placeholder="email" ng-model="customer.email"></label> <label class="item item-input"><input type="text" placeholder="phone" ng-model="customer.phone"></label> </div> <div class="padding"> <button class="button button-block button-positive" ng-click="signup(customer)" ng-disabled="!ready">Continue</button> </div> </div> <div ng-show="step == 'verification'"> <div class="list"> <label class="item item-input"> <input type="text" placeholder="Cardholder name" ng-model="card.cardholder"> </label> <label class="item item-input"> <input type="text" placeholder="Number" ng-model="card.number"> </label> <label class="item item-input"> <input type="text" placeholder="CVV" ng-model="card.cvv"> </label> <label class="item item-input"> <span class="input-label">Expire date</span> <input type="text" placeholder="mm" ng-model="card.expiration_month"> <input type="text" placeholder="yy" ng-model="card.expiration_year"> </label> </div> <div class="padding"> <button class="button button-block button-positive" ng-click="saveCard(card)" ng-disabled="!ready">Save</button> </div> </div> <div ng-show="step == 'checkout'"> <div class="item range"> <span>€</span> <input type="range" ng-model="amount" min="0" max="100"> <span>{{ amount }}</span> </div> <div class="padding"> <button class="button button-block button-positive" ng-click="pay(10)" ng-disabled="!ready">Pay</button> </div> </div> <div ng-show="step == 'done'"> <p>Transaction completed with transaction id: {{ transactionId }}</p> </div>
App.js
angular.module('starter', ['ionic'])
.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();
}
});
})
Services.js
angular
.module('starter')
.factory('braintreeService', braintreeFactory);
function braintreeFactory($http) {
/**
* Braintree server-side implementation
* @type string
*/
var Url = 'Api URL';
return {
getClientToken: function(customerId) {
return $http
.get(Url + '/Access_token' + (cus_Id ? '/' + cus_Id: ''))
.then(function(response) {
if (response.status === 200 && response.data !== undefined) {
return response.data;
}
throw 'Invalid response';
});
},
createCustomer: function(firstName, lastName, company, email, phone, fax, website) {
var postData = {
customer: {
firstName: firstName,
lastName: lastName,
company: company,
email: email,
phone: phone,
fax: fax,
website: website
}
};
return $http
.post(Url + '/cus', postData)
.then(function(response) {
if (response.status === 200 && response.data !== undefined) {
return response.data;
}
});
},
createPaymentMethod: function(customerId, nonce) {
var postData = {
paymentMethod: {
customerId: customerId,
paymentMethodNonce: nonce
}
};
return $http
.post(Url + '/payment_method', postData)
.then(function(response) {
if (response.status === 200 && response.data !== undefined) {
return response.data;
}
});
},
sale: function(amount, paymentMethodToken) {
var postData = {
transaction: {
amount: amount,
paymentMethodToken, paymentMethodToken
}
};
return $http
.post(Url + '/sale', postData)
.then(function(response) {
if (response.status === 200 && response.data !== undefined) {
return response.data;
}
});
}
};
};
Controller.js
angular
.module('starter')
.controller('payController', payController);
function payController($scope, braintreeService) {
/**
* Form steps
* 1. signup - create customer
* 2. verification - save & validate card
* 3. checkout - charge the card
* 4. done - displays transaction id
*/
$scope.step = 'signup';
/**
* customerId in Braintree
* reference to credit card in Braintree
*
* These should be persisted for future reference
*/
$scope.customerId = false;
$scope.paymentMethodToken = false;
$scope.amount = 10;
/**
* Bypass step forms for testing
*/
/*$scope.customerId = '';
$scope.step = 'checkout';
$scope.paymentMethodToken = '';
$scope.card = {
cardholder: 'Michael',
number:'4111111111111111',
cvv: 444,
expiration_month: 10,
expiration_year: 18
};*/
/**
* Setup Braintree client with clientToken generated on our server
*/
$scope.ready = false;
var braintreeClient;
braintreeService.getClientToken().then(function(clientToken) {
// braintree.setup(clientToken, "custom", {id: "checkout", enableCORS: true});
braintreeClient = new braintree.api.Client({clientToken: clientToken, enableCORS: true});
$scope.ready = true;
});
/**
* Creates braintree customer
*/
$scope.signup = function(customer) {
braintreeService
.createCustomer(customer.firstname, customer.lastname, customer.company, customer.email, customer.phone)
.then(function(customerId) {
console.log("customerId " + customerId);
$scope.customerId = customerId;
$scope.step = 'verification';
});
};
/**
* Save card
*/
$scope.saveCard = function(card) {
// console.log('tokenizing card', card);
braintreeClient.tokenizeCard({
number: card.number,
cardholderName: card.cardholder,
expirationMonth: card.expiration_month,
expirationYear: card.expiration_year,
cvv: card.cvv
// billingAddress: {}
}, function(err, nonce) {
if (err) {
throw err;
}
braintreeService
.createPaymentMethod($scope.customerId, nonce)
.then(function(paymentMethodToken) {
console.log('paymentMethodToken ' + paymentMethodToken);
$scope.paymentMethodToken = paymentMethodToken;
$scope.step = 'checkout';
});
})
};
$scope.pay = function(amount) {
braintreeService
.sale(amount, $scope.paymentMethodToken)
.then(function(transactionId) {
$scope.step = 'done';
$scope.transactionId = transactionId;
console.log('transactionId ' + transactionId);
});
};
};
