Question

我想在 flutter 应用中渲染一个 YooKassa 小部件，所以我写了这段代码来实现它 https://yookassa.ru/checkout-widget/v1/checkout-widget.js

@JS()
library checkout-widget.js;
import 'package:js/js.dart';


@JS('YooMoneyCheckoutWidget')
class YooMoneyCheckoutWidget {
  external YooMoneyCheckoutWidget(YooMoneyCheckoutWidgetParams params);
  external render(String viewID);
}

@JS()
@anonymous
class YooMoneyCheckoutWidgetParams {
  external factory YooMoneyCheckoutWidgetParams({
    String confirmation_token,
    String return_url,
    Map<String, dynamic> customization,
    Function error_callback
  });
}

class YooKassa {
  YooMoneyCheckoutWidget _checkoutWidget;

  YooKassa({String confirmation_token,String return_url}):_checkoutWidget = YooMoneyCheckoutWidget(YooMoneyCheckoutWidgetParams(confirmation_token: confirmation_token, return_url: return_url, customization: {'colors': {'controlPrimary':'#00BF96'}},error_callback: null));
  void render(String viewID) => _checkoutWidget.render(viewID);
}

然后尝试调用 JS 代码的构造函数

final widget = YooKassa(confirmation_token: 'ct-2834a83d-000f-5000-9000-1316627a4610',return_url: 'https://app.moneyhat.ru/');

然后在 HTMLElement 中的 DivElement 中渲染它

final wrapper = html.DivElement()
      ..style.width = '100%'
      ..style.height = '100%'
    ..id = 'pay-form';
    
    ui.platformViewRegistry.registerViewFactory(
      viewID,
          (int viewId) => wrapper,
    );

    widget.render('pay-form');

    return Scaffold(
        body: SizedBox(
      height: 500,
      child: HtmlElementView(
        viewType: viewID,
      ),
    ));
  }

这里有什么问题？ Flutter 引发错误 - YooMoneyCheckoutWidget 不是构造函数

如何在 dart 中正确导入 js 库？ Flutter Web 应用程序

0 个答案: