Javascript braintree使用JS进入fliutter web时出现此错误；options.selector或options.container必须引用有效的DOM节点；

尝试将Braintree支付网关实现到Flatter web中。 仍然没有Braintree提供的用于颤振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函数。这是完整的dart代码

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

我如何将Braintree支付集成到颤振网络中

或任何其他在Flatter web中工作的国际支付网关

技术免责声明：Flitter web处于测试阶段，我不建议将其用于任何支付服务。这可能导致关键问题，不可取

HtmlElementView

小部件将其所有元素添加到shadowdom中，而全局javascript上下文无法直接访问shadowdom。在github中检查此项

解决方案是将

DivElement

引用传递给外部js函数。例如在你的情况下

在build方法的外面创建div元素，并保存一个引用，就像在initSate中一样

DivElement paymentDiv；
@凌驾
initState（）{
//总是在剩下的逻辑之前调用。
super.initState（）；
var htmlL=“”
“提交付款”；
paymentDiv=DivElement（）
…附加HTML（htmlL）
..style.border='none'）；
//剩余逻辑
}

然后在构建/其他方法中，将此元素传递给

registerViewFactory

方法

//忽略：未定义的\u前缀\u名称
ui.platformViewRegistry.registerViewFactory(
‘付款容器’，
（int viewId）=>paymentDiv；

将JS interop设置为接受动态参数

@JS（）
外部字符串支付（动态授权）；

重写Javascript以直接使用此元素引用

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

---

如何将按钮的元素引用从paymentDiv传递到PaymentJS函数？您是否能够使其正常工作？我一直无法将实际的支付时间返回Hey@DanielN。基本上，我切换到了另一个框架，但现在在稳定通道中飘动，准备生产，所以您可以现在尝试。

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