How to automatically return back to Flutter app after user completes a web form

Question

I am developing a toll-payment mobile application with Flutter and I need to provide an internet payment (with bank's IPG page) for user to pay her/his toll debt.
What exactly I need is to automatically return back to my Flutter app after user finishes the form and taps on submit button.
How to do that?

have you tried https://pub.dartlang.org/packages/stripe_payment — ikben, Apr 29 '19 at 14:38
@dubace The question is about Internet Payment Gateway, I edited the question so ignore SOAP web service — Mohsen Emami, Apr 30 '19 at 05:13
@ikben stripe_payment is Mobile Payment Gateway. My need is to launch a bank's payment URL on web browser and after user fills the form and completes the payment , a CallBack is occurred to tell me the payment is successfully finished by that user. — Mohsen Emami, Apr 30 '19 at 05:26
@MohsenEmami you can build an API that can return a form when the user fill the form it's submitted back to the server for processing using [stripe node api](https://stripe.com/docs/libraries#node) for payment. Once the server to serve process is complete you can decide to maybe update the record in your database where your app can fetch the new data — ikben, Apr 30 '19 at 20:28
@ikben not only my bank but also any bank does not accept its users' credit cards information to be accessed by a third party library, so because they don't have SDK for Flutter I have to accomplish this with IPG — Mohsen Emami, May 01 '19 at 03:35

Sohail · Answer 1 · 2021-01-24T17:26:23.163

This may be too late, but you can use Uni Links package to define a URI scheme like: my_great_app://open to be called by your web form to return to the app. That package works for both Android and iOS, and you can define both Deep link or App link, based on your criteria. Most apps use the simpler Deep links for that purpose.

There are also other packages in pub.dev to do that, search "App Link" or "Universal Link" to find more.

score 0 · Answer 2 · answered Jun 17 '22 at 15:28

This is the code I used in my app for flutterwave payment gateway

Expanded(
          child: Stack(
            children: [
              WebView(
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: selectedUrl,
                gestureNavigationEnabled: true,
                userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E233 Safari/601.1',
                onWebViewCreated: (WebViewController webViewController) {
                  _controller.future.then((value) => controllerGlobal = value);
                  _controller.complete(webViewController);
                },
                onPageStarted: (String url) {
                  if(url.contains(AppConstants.BASE_URL)) {
                    bool _isSuccess = url.contains('success');
                    bool _isFailed = url.contains('fail');
                    print('Page started loading: $url');
                    setState(() {
                      _isLoading = true;
                    });
                    if (_isSuccess) {
                      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
                      showAnimatedDialog(context, MyDialog(
                        icon: Icons.done,
                        title: getTranslated('payment_done', context),
                        description: getTranslated('your_payment_successfully_done', context),
                      ), dismissible: false, isFlip: true);
                    } else if (_isFailed) {
                      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
                      showAnimatedDialog(context, MyDialog(
                        icon: Icons.clear,
                        title: getTranslated('payment_failed', context),
                        description: getTranslated('your_payment_failed', context),
                        isFailed: true,
                      ), dismissible: false, isFlip: true);
                    } else if (url == '${AppConstants.BASE_URL}/cancel') {
                      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (_) => DashBoardScreen()), (route) => false);
                      showAnimatedDialog(context, MyDialog(
                        icon: Icons.clear,
                        title: getTranslated('payment_cancelled', context),
                        description: getTranslated('your_payment_cancelled', context),
                        isFailed: true,
                      ), dismissible: false, isFlip: true);
                    }
                  }
                },
                onPageFinished: (String url) {
                  print('Page finished loading: $url');
                  setState(() {
                    _isLoading = false;
                  });
                },
              ),

How to automatically return back to Flutter app after user completes a web form

2 Answers2