Cara Integrasi DOKU ke Aplikasi Flutter
Flutter TutorialHalo sob! Kali ini ane pengen share tentang sebuah riset yang ane lakuin beberapa hari ke belakang. Ane ada project mobile app yang perlu integrasi ke payment gateway yang namanya DOKU. Ane tau payment gateway satu ini udah cukup lama, pas zaman DOKU masih belum terlalu terkenal dan bisa dibilang agak ribet buat setupnya waktu itu. Tapi kayanya udah banyak major update nih dari si DOKU dan mulai nyaman untuk dipake.
Oke, untuk bahan-bahan yang kita perlukan di sisi Flutter adalah webview. Disini ane gak pakai package webview_flutter kaya di tutorial-tutorial yang dikasih Google, tapi ane pakenya flutter_inappwebview. Package in_app_webview ini memungkinkan kita buat nempelin webview di aplikasi ini.
DOKU Payment URL
Disini ane gak bakalan bahas tentang gimana cara ngirim request ke DOKU nya. Tapi disini ane bakal pake yang namanya DOKU sandbox yang udah buatin kita form apa aja yang dibutuhin sama DOKU buat generate payment.url buat kita.
- Sobat bisa masuk ke url ini https://sandbox.doku.com/demo/jokul-checkout-js. Url ini merupakan sandbox demo, halamannya memuat form, semacam form pembelian dummy biar kita gak terlalu ribet buat setup request ke DOKU
- Sebelum ke langkah selanjutnya, sobat bisa inspect element terlebih dahulu di browser sobat. Cara umumnya bisa dengan klik kanan -> Inspect Element. Nanti bakal muncul tampilan inspeksi dari website sandbox demo tersebut.
- Setelah itu baru kita bisa klik tombol PURCHASE nya aja
- Di tampilan Inspect Element, sobat pindah ke tab Network, lalu cari API dengan url: <URL>, klik url tersebut, lalu dibawahnya ada tab Response.
- Nah kita bisa dapetin payment.url yang udah DOKU buatin, yang nantinya bakal kita pake di aplikasi Flutter kita. Copy url tersebut dan simpan di notes.
Integrasi ke Flutter
- Tambahin package in_app_webview ke aplikasi kita dengan cara tambahin di pubspec.yaml
- Jalanin flutter pub get buat nge-install package tersebut
- Import package nya di aplikasi kita
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';- Buat widget yang pake InAppWebView
class WebPage extends StatefulWidget {
const WebPage({super.key});
@override
State createState() => _WebPageState();
}
class _WebPageState extends State {
final GlobalKey webViewKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: InAppWebView(
key: webViewKey,
initialUrlRequest: URLRequest(
url: Uri.parse(
// ubah url dibawah ini
"https://sandbox.doku.com/checkout/link/0JLIXq08pYjDnP6hPXXknmMMyV3gu3ZF20233320053302808"),
),
onLoadStart: (controller, url) {
if (url?.toString() == "https://doku.com/") {
Navigator.pop(context);
}
},
),
),
],
),
),
);
}
}