Stripe checkout link not loading in Flutter's webview

Question

I am opening a stripe checkout link with Flutter's web view plugin webview_flutter, but the site keeps on loading without any result. Opening the link on my phone's web browser(chrome or the native Samsung browser) works fine and the site loads up properly.

I need help figuring out why it's not loading in my app's web view.

This is my implementation of the web view plugin:

class RemittanceWebview extends ConsumerStatefulWidget {
  final String url;
  final int id;
  const RemittanceWebview({
    Key? key,
    required this.url,
    required this.id,
  }) : super(key: key);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _RemittanceWebviewState();
}

class _RemittanceWebviewState extends ConsumerState<RemittanceWebview> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..clearCache()
      ..runJavaScript(widget.url)
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {},
          onPageStarted: (String url) {},
          onPageFinished: (_) {
            Helpers.logc("finished loading $_");
          },
          onWebResourceError: (WebResourceError error) {
            Helpers.logc(error.errorType ?? "", error: true);
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: AppColors.whiteColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
      ),
      child: Wrap(
        children: [
          SizedBox(
            height: screenHeight(context, percent: 0.9),
            width: double.maxFinite,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Align(
                    alignment: Alignment.topRight,
                    child: IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      icon: Text(
                        "Close",
                        style: semiBoldStyle(16, AppColors.grey59Color),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: screenHeight(context, percent: 0.8),
                  child: WebViewWidget(controller: _controller),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

The link to the stripe checkout page being generated by my backend had a ? at the end of it, so removing the ? made the checkout page in the webview. To anyone facing this kind of issue, please make sure the link generated doesn't have any weird characters in it.