Ionic + Braintree JS integration

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
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);
   });
 };
};



Ionic + Braintree JS integration Dev2Tricks 5 of 5
Ionic + Braintree JS integration Hi Today Discussed  Ionic Framework Braintree JS Integration. Ionic Framework. Braintree Payments ...

Share this

Related Posts

Previous
Next Post »

Xolo Offer