How to import js library properly in dart? Flutter web application

Viewed 141

I want to render a YooKassa widget in flutter app, so I've written this code to implement it 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);
}

then trying to call the constructor for a JS code

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

and then render it in DivElement in a HTMLElement

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

What's wrong here? Flutter raises an error - YooMoneyCheckoutWidget is not a constuctor

0 Answers
Related