flutter - 关于 Flutter HtmlElementView 的问题。如果可能的话，想知道更改后显示的 URL 吗？

Question

我为一家商店制作了一个 Flutter WebApp。最后客户需要付款。我已经在网页上单独创建了一个支付流程，其中包含一个网页和一些服务器代码。我正在为此使用 Adyen。

我在网上研究并在 Flutter 中发现了一些东西，即 HtmlElementView 小部件可以在我的 Flutter 应用程序中显示网页。

我现在在我的付款屏幕上使用以下代码：

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,
              ),
            ),
          )
        ],
      ),
    );
  }
}

这么多代码显示了我的颤振应用程序中的支付框。

我需要帮助来弄清楚如何在 HtmlElementView 中与这个支付页面进行交互。我想做的是：

a) 在本页提供双倍的总数

b) 知道它何时重定向到 .../success 或 .../failure 页面。即 http://localhost:3000/success 或 http://localhost:3000/failure

Answer 1

您不想依赖客户端来传递付款金额，因为它在用户空间中并且可能被恶意用户操纵。

相反，您的后端应该使用您要收取的物品和金额来维护购物车。您的客户应该只针对指定的购物车/会话发起付款。

对于与 iframe 的通信，您可以使用跨文档消息传递。这个stackoverflow答案有一个很好的例子。