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": "[email protected]",
"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.
question from:
https://stackoverflow.com/questions/65874137/flutter-web-implemented-solution-using-htmlelementview-iframeelement-register 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
