使用JS进入Flutter网站的错误提示为“ options.selector或options.container必须引用有效的DOM节点”

Question

[尝试将Braintree付款网关实施到混乱的网络中。仍然没有Braintree的flutter web SDK。因此，尝试实现其javascript SDK。

这是我的js文件

function payment(auth){
    var button = document.querySelector('submit-button');
    console.log(auth);
    console.log(button);
    braintree.dropin.create({
      authorization: auth,
      container: 'dropin-container'
    }, function (createErr, instance) {
        console.log(createErr);
        console.log(instance);
         button.addEventListener('click', function () {
            instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
              // Submit payload.nonce to your server
              return payload.nonce
            });
         });
    });
}

从dart调用此js函数。这是完整的飞镖代码。

@JS()
library my_script;

import 'dart:html';
import 'dart:js_util';

import 'package:carbonbins/model/model.dart';
import 'package:carbonbins/pages/navigation.gr.dart';
import 'package:carbonbins/utils/image_helper.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

import 'package:js/js.dart';
import 'package:js/js.dart' as js;

@JS()
external void initBraintree(auth);

@JS()
external String payment(auth);

class PaymentPage extends StatefulWidget {
  final UserModel userModel;

  PaymentPage({@required this.userModel});

  @override
  _PaymentPageState createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {

  String auth = "sandbox_.....";

  void getButton() {
    var htmlL = """<div id="checkout-message"></div>
        <div id="dropin-container"></div>
    <button id="submit-button">Submit payment</button>""";

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        'payment-container',
        (int viewId) => DivElement()
          ..appendHtml(htmlL)
          ..style.border = 'none');

    print(HtmlElementView(
      viewType: "dropin-container",
    ));
  }

  void setupDropin() {
    print(auth);
    var status = payment(auth);
    print("Status: $status");
  }

  @override
  void initState() {
    getButton();
    setupDropin();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 100,
            ),
            Container(
              width: 500.0,
              height: 300.0,
              child: HtmlElementView(
                viewType: "payment-container",
              ),
            )
          ],
        ),
      ),
    );
  }

运行该代码时，我在屏幕上仅看到提交按钮。从Web控制台收到此错误，

"options.selector or options.container must reference a valid DOM node."

如何将Braintree付款集成到flutter网站？

或任何其他在颤动网络中运行的国际支付网关。

Answer 1

技术免责声明：flutter-web是beta版，我不建议将其与任何付款服务一起使用。这可能会导致严重问题，因此不建议这样做。

HtmlElementView小部件将其所有元素添加到影子域中，全局javascript上下文无法直接访问该元素。在github上检查issue。

解决方案是将DivElement引用传递给外部js函数。例如在您的情况下

在构建方法之外创建div元素并保存引用，例如initSate

DivElement paymentDiv;

@override
initState(){

// always call before rest of the logic.
super.initState();

var htmlL = """<div id="checkout-message"></div>
        <div id="dropin-container"></div>
    <button id="submit-button">Submit payment</button>""";
paymentDiv=  DivElement()
          ..appendHtml(htmlL)
          ..style.border = 'none');
// remaining logic

}

然后在您的build / other方法中将此元素传递给registerViewFactory方法。

// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        'payment-container',
        (int viewId) => paymentDiv;

将您的JS互操作设置为接受动态参数。

@JS()
external String payment(dynamic auth);

重写您的Javascript以直接使用此元素引用。例如

function payment(auth){
    var button = auth;
    // Remaining logic
}