Braintree в веб-fliutter, используя JS получил эту ошибку "options.selector или options.container должен ссылаться на действительный узел DOM" - PullRequest
Новая
       18

Braintree в веб-fliutter, используя JS получил эту ошибку "options.selector или options.container должен ссылаться на действительный узел DOM"

0 голосов
/ 22 марта 2020

Попытка внедрить платежный шлюз Braintree в флаттер-сеть. Все еще нет SDK для веб-флаттера от Braintree. Поэтому пытаюсь реализовать их 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
            });
         });
    });
}

Вызов этой функции 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",
              ),
            )
          ],
        ),
      ),
    );
  }

Когда я запускаю этот код, я вижу только кнопку отправки на экране. Получил эту ошибку из веб-консоли 

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

Как интегрировать платеж Braintree в веб-флаттер ?

или любой другой международный платежный шлюз, который работает в флаттере веб.

1 Ответ

0 голосов
/ 22 марта 2020

Технический отказ от ответственности : flutter-web находится на стадии бета-тестирования, и я не рекомендую использовать его с любым платежным сервисом. Это может привести к критическим проблемам и не рекомендуется.

Виджет HtmlElementView добавляет все свои элементы в shadowdom, который не доступен напрямую для глобального контекста javascript. Проверьте эту проблему здесь, в github.

Решением было бы передать ссылку DivElement на внешнюю функцию js. Например, в вашем случае

Создайте элемент div вне метода build и удерживайте ссылку, как в 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 передайте этот элемент для * Метод 1020 *. 

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

Настройка взаимодействия JS для принятия параметра Dynami c. 

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

Перезапись Javascript для непосредственной работы со ссылкой на этот элемент. например, 

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