1

我已经集成了 RazorPay 自定义结帐，在那里我为良好的用户体验创建了自定义设计。

我在inappwebviewFlutter插件中打开这个定制的网络应用程序。Web 应用程序可以正确打开，但是一旦 Razorpay 的 SDK 功能createPayment(data)运行，它就会打开一个窗口弹出窗口。这个弹出窗口现在在 webview 中不可见。

调用 webview 的 Flutter 代码：

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _handleBackPress,
      child: SafeArea(
        child: Scaffold(
          body: InAppWebView(
            initialUrlRequest: URLRequest(
              url: Uri.parse(Strings.checkoutUrl),
            ),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                clearCache: true,
                javaScriptCanOpenWindowsAutomatically: true, // I thought this will help, but not working
                mediaPlaybackRequiresUserGesture: false,
              ),
              android: AndroidInAppWebViewOptions(useHybridComposition: true),
              ios: IOSInAppWebViewOptions(allowsInlineMediaPlayback: true),
            ),
            onWebViewCreated: (controller) async {
              _controller = controller;
              _controller.clearCache();
              _controller.addJavaScriptHandler(
                handlerName: 'PaymentHandle',
                callback: (data) {
                  // ... Will do somthing
                },
              );
            },
            onLoadStop: (_, __) async {
              await _controller.evaluateJavascript(source: '''
                  window.parent.postMessage(${widget.paymentJsonData}, "*");
                ''');
            },
          ),
        ),
      ),
    );
  }

调用代码createPayment()：当用户单击按钮时，在 webapp 上调用此函数。

    async makePayment() {
      try {
        const data = {
          callback_url: '<Callback URL>',
          redirect: true,
          amount: 50000,
          email: 'gaurav.kumar@example.com',
          contact: '9123456780',
          order_id: 'order_<order_hash>',
          method: 'upi',
          upi: {
            vpa: this.vpa, // Fetch from input field
            flow: 'collect,',
          },
        };

        window.rz.createPayment(data);
        window.rz.focus(); // Found in RazorPay's document to bring the window in focus. Not working on Webview
      } catch (e) {
        console.error(e);
      }
    },

PS - RazorPay 的初始化工作正常。我们在浏览器上单独运行 Webview。弹出窗口正在正确打开

4

1 回答 1

1

如果您不想在单独的窗口中打开重定向 URL。在 Razorpay 的全局配置中，您必须通过redirect: true而不是data在方法中传递对象传递它createPayment()；

 this.configOptions = {
    key: process.env.VUE_APP_API_KEY,
    redirect: true,
     ...
 };
  // eslint-disable-next-line no-undef
  window.rz = new Razorpay(this.configOptions);
于 2021-10-11T16:25:16.613 回答