Razorpay ionic 3 回调问题答案

【问题标题】：Razorpay ionic 3 callback issueRazorpay ionic 3 回调问题
【发布时间】：2017-12-04 00:20:47
【问题描述】：

我将使用 ionic 3 应用程序实现 razorpay 一切正常，我通过 payment_id 获得了成功回调，但之后没有任何事情发生，例如重定向到其他页面或路由或任何其他活动或调用函数等。

我指的是以下链接，

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

这是我的代码，

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: 'pranav@razorpay.com',
        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);
    })

【问题讨论】：

标签： angular cordova typescript ionic2 ionic3

【解决方案1】：

我修好了……

第一步：让在html页面上制作一个唯一ID的按钮

第二步： document.getElementById('your ID').click()

有什么问题！！！

我们正在加载 javascript 函数..没有从 javascript 到 typescript 的活动方法..所以我们应该调用 html 元素到 typescript..

【讨论】：

【解决方案2】：

这个问题的另一种解决方案是将此变量分配给其他变量并在回调中使用它，例如 -

let me = this;

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

【讨论】：

【解决方案3】：

你应该像这样使用arrow functions：

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: 'pranav@razorpay.com',
    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);
})

使用常规函数时，this 关键字引用函数本身，但使用箭头函数时，this 属性不会被覆盖，并且仍然引用组件实例（您在其中定义了 navCtrl 属性） 。

【讨论】：