时间戳

首页 > 解决方案 > Angular Cordova Project (Android) 未打开 Razorpay 外部页面（输入 OTP/输入登录凭据页面）

android - Angular Cordova Project (Android) 未打开 Razorpay 外部页面（输入 OTP/输入登录凭据页面）

问题描述

Razor pay 在浏览器中打开时可以正常工作，但是当我将项目转换为 android 应用程序时，应该打开以提交 OTP 的外部页面不显示。我知道我需要一个 inAppBrowser 来打开链接，但它不受我控制。当用户选择刷卡支付或网上银行时，Razorpay 会自动打开链接。如何解决这个问题？请帮忙！

窗口-ref.service.ts

    import {Injectable} from '@angular/core';
// declare var cordova:any;

export interface ICustomWindow extends Window {
  __custom_global_stuff: string;
}

function getWindow(): any {
  return window;
}

@Injectable({
  providedIn: 'root'
})
export class WindowRefService {

  get nativeWindow(): ICustomWindow {
    return getWindow();
  }
}

app.component.ts

constructor(private winRef: WindowRefService) {
    this._window = this.winRef.nativeWindow;
  }

private _window: ICustomWindow;
  public rzp: any;
  public options: any = {
    key: 'KEY', // add razorpay key here
    name: 'Bunto Couriers Pvt. Ltd.',
    description: 'Delivery Fee',
    amount: this.price*100, // razorpay takes amount in paisa
    prefill: {
      name: '',
      email: '', // add your email id
    },
    image: 'https://isell-bunto.000webhostapp.com/assets/img/loader.png', 
    notes: {},
    theme: {
      color: '#3880FG'
    },
    handler: this.paymentHandler.bind(this),
    modal: {
      ondismiss: (() => {
        this.zone.run(() => {
          // add current page routing if payment fails
          this.toastr.error("Payment Error!");
        })
      })
    }
  };

initPay(): void {
    this.rzp = new this.winRef.nativeWindow['Razorpay'](this.options);
    this.rzp.open();
  }

  paymentHandler(res: any) {
    this.zone.run(() => {
      // add API call here
      console.log(res);
    });
  }

这是一个弹出窗口，可以在浏览器和 android 应用程序中正常打开此外部 页面不会显示在应用程序 的应用程序中，仅此而已。在此阶段后外部 url 不打开

标签： androidhtmlangularcordova

解决方案

我不确定 Javascript 库将如何工作，而我们无法控制使用 InAppBrowser 显示它。

为此，我真的建议使用原生 Cordova Razorpay 插件以获得更高的兼容性和稳定性：https ://github.com/razorpay/razorpay-cordova

您可以查看他们的示例应用程序（Cordova 和 Ionic）

添加命令：cordova plugin add https://github.com/razorpay/razorpay-cordova.git --save

var options = {
  description: 'Credits towards consultation',
  image: 'https://i.imgur.com/3g7nmJC.png',
  currency: 'INR',
  key: 'rzp_test_1DP5mmOlF5G5ag',
  order_id: 'order_7HtFNLS98dSj8x',
  amount: '5000',
  name: 'foo',
  theme: {
    color: '#F37254'
  }
}

var successCallback = function(success) {
  alert('payment_id: ' + success.razorpay_payment_id)
  var orderId = success.razorpay_order_id
  var signature = success.razorpay_signature
}

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

RazorpayCheckout.on('payment.success', successCallback)
RazorpayCheckout.on('payment.cancel', cancelCallback)
RazorpayCheckout.open(options)

推荐阅读