Aller au contenu principal

Flutter

Pour le cas d'usage utilisant Flutter, il est recommandé d'utiliser inappwebview.

Après avoir créé la transaction et obtenu le lien de transaction, l'implémentation suivante est recommandée :

  • Dans votre flux habituel (qui inclut Vérification sans carte présente), vous ouvrirez le inappwebview avec le lien généré via l'API ;
  • Vous pouvez personnaliser cette ouverture selon les besoins de votre application ;
  • Vous surveillerez si l'URL change (vers le redirectUrl), puis vous fermerez le inappwebview.

Pour ouvrir un inappwebview et contrôler les changements d'URL, vous pouvez procéder comme suit :

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('LOADING');
setState(() {
_link = url.toString();
});
},
onProgressChanged: (controller, progress) {
setState(() {
progress == 100 ? _isLoading = false : _isLoading = true;
});
},
onLoadStop: (controller, url) {
print('LOADED');
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 RedirectScreen(),
),
);
return NavigationActionPolicy.CANCEL;
}
return NavigationActionPolicy.ALLOW;
},
),
);
}

Pour obtenir la permission d'accès à la caméra, vous pouvez procéder comme suit :

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");
}
}
}
remarque

Les permissions suivantes sont requises pour un fonctionnement correct, telles que :

  • Caméra
  • Géolocalisation

Pour plus d'informations, nous recommandons de consulter la documentation officielle de flutter_inappwebview.