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

Posted 2023-05-06

【中文标题】Angular Cordova Project (Android) 未打开 Razorpay 外部页面（输入 OTP/输入登录凭据页面）

【英文标题】：Angular Cordova Project (Android) doesn't open Razorpay external page (Enter OTP/ Enter Login credential page)

【发布时间】：2020-12-24 09:19:52

【问题描述】：

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

window-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);
    );
  

this is a pop up window which opens fine in both browser and in android app this external page doesn't show up in the app in the app, this is as far as it goes. external url doesn't open after this stage

【问题讨论】：

你在使用 Razor 的 javascript SDK 吗？还是 Cordova 插件？

我正在使用 JavaScript SDK

【参考方案1】：

我不确定 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)

【讨论】：

感谢您的信息。我这样做了，但我得到了一个错误。 RazorpayCheckout 未定义。你能帮忙吗？链接 - ***.com/questions/63762182/…