Adapt External Asynchronous JavaScript API to AngularJS Framework

Question

I have been trying to adapt an API's JavaScript code for receiving a payment token, but I can't find a way to create a function that runs the code. The API's original example works great, but I just can't convert the code into a reusable function. I tried different approaches but I'm always getting the same error:

TypeError: $scope.token is not a function

I'm using this code inside an Ionic app. Please help me, I can't find a solution.

API's original example:

$gn.ready(function(checkout) {
 
  var callback = function(error, response) {
    if(error) {
      // Error
      console.error(error);
    } else {
      // Success
      console.log(response);
    }
  };
 
  checkout.getPaymentToken({
    brand: 'visa', 
    number: '4012001038443335', 
    cvv: '123', 
    expiration_month: '05',
    expiration_year: '2018'
  }, callback);
 
});

My code:

$gn.ready(function(checkout) {

  $scope.token = function(b,n,c,m,y) {

    var callback = function(error, response) {

      if(error) {
        // Trata o erro ocorrido
        console.error(error);
      } else {
        // Trata a resposta
        console.log(response.data.payment_token);

      }
    };

    checkout.getPaymentToken({
      brand: b, // bandeira do cartão
      number: n, // número do cartão
      cvv: c, // código de segurança
      expiration_month: m, // mês de vencimento
      expiration_year: y // ano de vencimento
    }, callback);

  };

});

What is $gn? You should use the dollar prefix, this is angular reserved. — alphapilgrim, Jan 05 '17 at 02:55
$gn comes from the API's SDK. The documentation is poor in details, but this is basically an initialization function, which enables calling "getPaymentToken". — Fillipe Rodrigues, Jan 05 '17 at 03:22

score 0 · Answer 1 · answered Jan 05 '17 at 06:34

  $scope.getToken = function(checkout,b,n,c,m,y) {

    var callback = function(error, response) {

      if(error) {
        // Trata o erro ocorrido
        console.error(error);
      } else {
        // Trata a resposta
        console.log(response.data.payment_token);

      }
    };

    checkout.getPaymentToken({
      brand: b, // bandeira do cartão
      number: n, // número do cartão
      cvv: c, // código de segurança
      expiration_month: m, // mês de vencimento
      expiration_year: y // ano de vencimento
    }, callback);

  };




$gn.ready(function(checkout) {
  $scope.getToken(checkout,b,n,c,m,y);
});

From what i understand from the example this should do it.

It works, but there's still a problem: the $scope.getToken function is running every time I start the app. I'd like to run it after a button click event... I tried to store that checkout and use it later but it's not working. Any suggestions? — Fillipe Rodrigues, Jan 06 '17 at 00:47

georgeawg · Accepted Answer · 2017-01-06T05:36:00.543

Put the $gn asynchronous API in a service:

app.constant("gnAPI", $gn);

app.service("gnService", function(gnAPI,$q) {
    this.getPaymentToken = function(cardData) {
        var future = $q.defer();
        gnAPI.ready(function(checkout) {
            checkout.getPaymentToken(
                cardData,
                function callback(error, response) {
                   if (error) {
                       future.reject(error);
                   } else {
                       future.resolve(response);
                   };
                } 
            );
        });
        return future.promise;
    };
});

Then to use in a controller:

var cardData = {
    brand: 'visa', 
    number: '4012001038443335', 
    cvv: '123', 
    expiration_month: '05',
    expiration_year: '2018'
};

gnService.getPaymentToken(cardData)
  .then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
    throw error;
});

By using the AngularJS $q service to create a $q service promise, the external asynchronous API will properly integrate with the AngularJS framework and its scope digest cycle.

For more information, see AngularJS $q Service API Reference.

I tried it but it's logging an error at **function callback(future.reject, future.resolve)** : "app.js:18 Uncaught SyntaxError: Unexpected token . " — Fillipe Rodrigues, Jan 06 '17 at 00:42
Your solution looks great though, I'm really trying to make it work. I'm new to Angular and Ionic, that's why I've been struggling a bit with Services and asynchronous API. — Fillipe Rodrigues, Jan 06 '17 at 01:29

Adapt External Asynchronous JavaScript API to AngularJS Framework

2 Answers2