Flutter Web: Implemented solution using HtmlElementView, IFrameElement, registerViewFactory is not working in ios

问题

I have implemented a solution to integrate an online payment gateway in my flutter web project till now i have not found any other solution except this one. The link for the solution I have implemented in my flutter web project is This for refrence, now the problem is, this works fine in android web but it is not working in iOS web i don't know why. can anyone help me with what is the problem with this or why it is not working in iOS?, or any other solution for implementing payment gateway in flutter web.

below is the code I have implemented from that article.

UiFake.dart

import 'dart:ui' as ui;

// ignore: camel_case_types
class platformViewRegistry {
static registerViewFactory(String viewId, dynamic cb) {
ui.platformViewRegistry.registerViewFactory(viewId, cb);
}
}

web/payment.html

<!DOCTYPE html><html>
<meta name="viewport" content="width=device-width">
<head><title>RazorPay Web Payment</title></head>
<body>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>

       var options = {
         "key": "YOUR_KEY_HERE",
          "amount": "50000", "currency": "INR",
          "name": "Acme Corp",
          "description": "Test Transaction",
          "image": "https://example.com/your_logo",
          "handler": function (response){
             window.parent.postMessage("SUCCESS","*");      //2 
             alert(response.razorpay_payment_id);
             alert(response.razorpay_order_id);
             alert(response.razorpay_signature)    
          },    
          "prefill": {        
             "name": "Gaurav Kumar",        
             "email": "gaurav.kumar@example.com",
             "contact": "9999999999"   
           },   
           "notes": {        
             "address": "Autofy"    
          },    
          "theme": {
             "color": "#DF0145"    
          },
          "modal": {
            "ondismiss": function(){
               window.parent.postMessage("MODAL_CLOSED","*");   //3
            }
          }
       };

       var rzp1 = new Razorpay(options);
       window.onload = function(e){  //1  
          rzp1.open();
          e.preventDefault();
       }

     </script>
</body>
</html>

RazorPayWeb.dart

import 'dart:html';
import 'dart:ui' as ui;
//conditional import
import 'package:autofystore/utils/UiFake.dart' if (dart.library.html) 'dart:ui' as ui;
import 'package:flutter/material.dart';

class RazorPayWeb extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //register view factory
    ui.platformViewRegistry.registerViewFactory("rzp-html",(int viewId) {
      IFrameElement element=IFrameElement();
//Event Listener
       window.onMessage.forEach((element) {
        print('Event Received in callback: ${element.data}');
        if(element.data=='MODAL_CLOSED'){
          Navigator.pop(context);
        }else if(element.data=='SUCCESS'){
          print('PAYMENT SUCCESSFULL!!!!!!!');
        }
      });

      element.requestFullscreen();
      element.src='assets/html/payment.html';
      element.style.border = 'none';
      return element;
    });
    return Scaffold(
      body: Builder(builder: (BuildContext context) {
          return Container(
            child: HtmlElementView(viewType: 'rzp-html'),
          );
    }));
  }

}

Thanx in advance.

来源：https://stackoverflow.com/questions/65874137/flutter-web-implemented-solution-using-htmlelementview-iframeelement-register

标签

Flutter

payment-gateway

flutter-web

razorpay