Question on Flutter HtmlElementView. Want to know the shown URL if possible after changes?

Question

I have made a Flutter WebApp for a shop. At the end the customer needs to pay. I have create a payment flow separately on web with a web page and some server code. I am using Adyen for this.

I researched online and found something in Flutter i.e. HtmlElementView widget to show the webpage in my flutter app.

I am using the following code for my payment screen for now:

class Payment extends StatefulWidget {
  @override
  _PaymentState createState() => _PaymentState();
}

String viewID = "your-view-id";

class _PaymentState extends State<Payment> {
  @override
  Widget build(BuildContext context) {
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewID,
            (int id) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString()
          ..height = MediaQuery.of(context).size.height.toString()
          ..src = 'http://localhost:3000/getPaymentMethods' // Call to server to get the payment page
          ..style.border = 'none');
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.white, //change your color here
        ),
        elevation: 0.0,
        title: Text("PAYMENT", style: Header),
        backgroundColor: Provider.of<CP>(context, listen: false).primary,
      ),
      body: Column(
        children: [
          Expanded( 
            child: Container(
              color: Colors.amber,
              child: HtmlElementView(
                viewType: viewID,
              ),
            ),
          )
        ],
      ),
    );
  }
}

This much of code shows the payment box in my flutter application.

I need help in figuring out how can I interact with this payment page inside the HtmlElementView more. What I want to do is:

a) Provide a total as double to this page

b) Know when it redirects to the .../success or .../failure page. i.e. http://localhost:3000/success or http://localhost:3000/failure

Answer 1

You don't want to rely on a client for passing the payment amount as it is in the user space and can be manipulated by a malicious user.

Your backend instead should maintain the cart with the items and amounts you want to charge. Your client should only initiate payment against a specified cart/session.

For communication with an iframe, you can use cross document messaging. This stackoverflow answer has a good example.