angular - problema de callback de Razorpay en ionic 3

Voy a implementar Razorpay con la aplicación Ionic 3, todo funciona bien, obtuve el successcallback con payment_id, pero después de eso no pasa nada, como redirigir a otra página o ruta o cualquier otra actividad o llamar funciones, etc.

Me refiero al siguiente enlace,

https://github.com/razorpay/razorpay-cordova-sample-app/tree/master/rzp-ionic2-example

Aquí está mi código,

var options = {
      description: 'Credits towards consultation',
      image: 'https://i.imgur.com/3g7nmJC.png',
      currency: 'INR',
      key: 'rzp_test_1DP5mmOlF5G5ag',
      amount: '5000',
      name: 'foo',
      prefill: {
        email: '[email ',
        contact: '8879524924',
        name: 'Pranav Gupta'
      },
      theme: {
        color: '#F37254'
      },
      modal: {
        ondismiss: function() {
          alert('dismissed')
        }
      }
    };

    var successCallback = function(payment_id) {
      alert('payment_id: ' + payment_id);
      this.navCtrl.push("ThankyouPage",{
              status: this.status
          });
    };

    var cancelCallback = function(error) {
      alert(error.description + ' (Error ' + error.code + ')');
    };

    this.platform.ready().then(() => {
      RazorpayCheckout.open(options, successCallback, cancelCallback);
    })

Respuesta #1

Deberías usar funciones flecha así:

var options = {
  description: 'Credits towards consultation',
  image: 'https://i.imgur.com/3g7nmJC.png',
  currency: 'INR',
  key: 'rzp_test_1DP5mmOlF5G5ag',
  amount: '5000',
  name: 'foo',
  prefill: {
    email: '[email ',
    contact: '8879524924',
    name: 'Pranav Gupta'
  },
  theme: {
    color: '#F37254'
  },
  modal: {
    ondismiss: () => { // <- Here!
      alert('dismissed')
    }
  }
};

var successCallback = (payment_id) => { // <- Here!
  alert('payment_id: ' + payment_id);
  this.navCtrl.push("ThankyouPage",{
          status: this.status
      });
};

var cancelCallback = (error) => { // <- Here!
  alert(error.description + ' (Error ' + error.code + ')');
};

this.platform.ready().then(() => {
  RazorpayCheckout.open(options, successCallback, cancelCallback);
})

Al usar una función regular, la palabra clave this hace referencia a la función en sí, pero al usar funciones flecha, la propiedad this no se sobrescribe y todavía hace referencia a la instancia del componente (donde definiste la propiedad navCtrl).

Respuesta #2

Otra solución a este problema puede ser asignar esta variable a alguna otra variable y usarla en la función de retorno como -

let me = this;

var successCallback = function(payment_id) {
    alert('payment_id: ' + payment_id);
    me.navCtrl.push("ThankyouPage",{
        status: me.status
    });
};