WooCommerce REST API with Ionic Framework

• Step 1 : Enabling REST API

• To enable the REST API within WooCommerce, visit the WooCommerce > Settings > API tab and tick the Enable REST API checkbox.

• Step 2 : Generating API keys

• The WooCommerce REST API works on a key system to control access. These keys are linked to WordPress users on your website.

• To create or manage keys for a specific WordPress user, go to WooCommerce > Settings > API > Keys/Apps.

• To get started, select Add Key.

• Select the User you would like to generate a key for in the User field and add a Description. Choose the level of access for this API key, which can be Read access, Write access or Read/Write access. Then select the Generate API Key button and WooCommerce will generate API keys for that user.

• Now that keys have been generated, you should see two new keys, a QRCode, and a Revoke API Key button. These two keys are your Consumer Key and Consumer Secret.

• Place your consumer key and consumer secret in the application that uses the WooCommerce API (the application should request your URL as well).

• Note : For the next part required the understanding of WooCommerce REST API Docs.

Implementation in Ionic Framework

1. Creating basic demo of Ionic framework.
2. We required the some dependency to implement this assignment like as follows,
1. hmac-sha1
2. enc-base64
3. oauth-1.0a
4. oauth-signature

             Download the js files and place in your required directory and include in your index.html

        <script src="js/lib/hmac-sha1.js"></script>

        <script src="js/lib/enc-base64-min.js"></script>

        <script src="js/lib/oauth-1.0a.js"></script>

        <script src="js/lib/oauth-signature.js"></script>

3. Here I am Creating  the service in angularjs to handle the calling of woocommerce api ,

angular.module(myapp.restservices', [])

.service("woocommerce",['$q','$http','errorHandler','$ionicLoading',

              function($q,$http,errorHandler,$ionicLoading){

               var self=this;

  //Request Url and method

              var request = {

                      url: 'http://www.example.com/wc-api/v3/products',

                      method: 'GET'

               };

 //OAuth Protocol authentication parameters

 var oauth = new OAuth({

                     consumer: {

    //Consumer Public Key

                                        public: 'ck_50xxxxxxxx',

    //Consumer Secrete Key

                                         secret: 'cs_b5xxxxx'

                       },

        //oauth1.0a protocol signature method

                     signature_method: 'HMAC-SHA1'

              });

//Service Function to get products

           this.products=function(){

$ionicLoading.show({

                                template: '<ion-spinner class="light"></ion-spinner>'

                     });

//OAuth Parameters to call woocommerce api      

var oauth_data = {

            oauth_consumer_key: oauth.consumer.public,

            oauth_nonce: oauth.getNonce(),

            oauth_signature_method: oauth.signature_method,

            oauth_timestamp: oauth.getTimeStamp()

          };

         //Oauth signature

         oauth_data.oauth_signature =  oauthSignature.generate(request.method,request.url,

                                                      oauth_data,oauth.consumer.secret );

         console.log("Params : "+ JSON.stringify(oauth_data));

         var deff=$q.defer();

          $http({

                     method:request.method,

                     url:request.url,

                     headers: {

                               "Content-Type":"application/JSON",

                       },

          params: oauth_data

           }).then(function(objS){

    $ionicLoading.hide();

               alert('Success :-    '+JSON.stringify(objS));

           },function(objE){

   $ionicLoading.hide();

               alert('error:-    '+JSON.stringify(objE));

               errorHandler.serverErrorhandler(objE);

               deff.reject("server Error");

           });

           return deff.promise;

       };

   }])

   .service('errorHandler',['$q',function($q){

       this.serverErrorhandler=function(error){

           alert("ERROR ::"+JSON.stringify(error));

           console.log("ERROR ::"+JSON.stringify(error));

       };

    }

])

4. Write controller to call the service function as like follows,

angular.module(myapp.categorycontrollers, [])

.controller('MainCtrl', function($scope,woocommerce) {

       //Method to get all Products

         $scope.getAllProducts = function(){

               woocommerce.products().then(function(objS){

                },function(err){

               });

         }

        //calling to function

         $scope.getAllProducts();

}

• Resources 
1. woocommerce-rest-api-docs
2. Github
3. Stackoverflow