Flutter
In this section, you will find how to implement the webview in Flutter for using the Unico IDPay product.
For the use case using Flutter, it is recommended to use inappwebview.
After creating the transaction and obtaining the transaction link, the following implementation is recommended:
In your common flow (which includes IDPay), you will open the inappwebview with the link generated via the API;
You can customize this opening as needed for your application;
You will monitor if the URL changes (to the redirectUrl) and then close the inappwebview;
To open an inappwebview and control URL changes, you can do it as follows:
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:unico_poc_id_pay_inappwebview/RedirectScreen.dart';
import 'package:unico_poc_id_pay_inappwebview/service.dart';
Widget setWebView(String URL_TO_LOAD) {
InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
useShouldOverrideUrlLoading: true,
mediaPlaybackRequiresUserGesture: false,
),
android: AndroidInAppWebViewOptions(
useHybridComposition: true,
),
ios: IOSInAppWebViewOptions(
allowsInlineMediaPlayback: true,
));
return Expanded(
child: InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse(URL_TO_LOAD),
),
initialOptions: options,
androidOnPermissionRequest: (controller, origin, resources) async {
return PermissionRequestResponse(
resources: resources,
action: PermissionRequestResponseAction.GRANT);
},
onWebViewCreated: (controller) {
setState(() {
_inAppWebViewController = controller;
});
},
onLoadStart: (controller, url) {
print('CARREGANDO');
setState(() {
_link = url.toString();
});
},
onProgressChanged: (controller, progress) {
setState(() {
progress == 100 ? _isLoading = false : _isLoading = true;
});
},
onLoadStop: (controller, url) {
print('CARREGADO');
setState(() {
_link = url.toString();
});
},
shouldOverrideUrlLoading: (controller, navigationAction) async {
var uri = navigationAction.request.url;
if (uri == Uri.parse("<URL_TO_OBSERVER>")) {
setState(() {
_link = "";
});
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const RedirectSreen(),
),
);
return NavigationActionPolicy.CANCEL;
}
return NavigationActionPolicy.ALLOW;
},
),
);
}
To obtain camera permission, you can do it as follows:
import 'package:permission_handler/permission_handler.dart';
void requestPermission() async {
var status = await Permission.camera.status;
if (status.isDenied) {
if (await Permission.camera.request().isGranted) {
print("ok");
}
}
}
To obtain camera permission, you can do it as follows:
The following permissions are required for proper functioning, such as:
For more information, we recommend reading the following articles and documentation:
To access the official documentation, click here.
Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.
