使用 JS 进入 Flutter Web 的 Braintree 出现此错误“options.selector 或 options.container 必须引用有效的 DOM 节点”

Question

尝试在 Flutter Web 中实现 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 web？

或任何其他在 Flutter Web 中工作的国际支付网关。

Answer 1

技术免责声明：flutter-web 处于测试阶段，我不建议将其与任何支付服务一起使用。这可能会导致严重问题，不建议这样做。

HtmlElementView 小部件将其所有元素添加到全局 javascript 上下文无法直接访问的 shadowdom 中。在 github 中查看此 issue。

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

在 build 方法之外创建 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

}

然后在您的构建/其他方法中将此元素传递给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
}