CODEWITHSUNDEEP
angularcordovatypescriptionic2ionic3
Paresh Gami
Paresh Gami

Reputation: 4782

Razorpay ionic 3 callback issue

I will implement razorpay with ionic 3 app everything works find, i got successcallback with payment_id but after that nothing happenig like redirect to other page or route or any other activity or calling functions etc.

I am refer following link,

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

Here is my code,

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 protected]',
        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);
    })

Upvotes: 2

Views: 2423

Answers (3)

goldenbharani pept
goldenbharani pept

Reputation: 1

i fixed it...

step1: let make one button with unique ID at html page

step2: document.getElementById('your ID').click()

What is a problem !!!

We are loading javascript function..there is no active method from javascript to typescript..so we should call html element to typescript..

Upvotes: 0

karan sharma
karan sharma

Reputation: 604

Another solution to this problem can be assigning this variable to some other variable and using it in the callback like - 

let me = this;

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

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

You should use arrow functions like this:

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 protected]',
    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);
})

When using a regular function, the this keyword references the function itself, but when using arrow functions, the this property is not overwritten and still references the component instance (where you defined the navCtrl property).

Upvotes: 5

Related Questions