Cara Integrasi DOKU ke Aplikasi Flutter

Cara Integrasi DOKU ke Aplikasi Flutter

Halo 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.

Integrasi DOKU Flutter


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.

Jokul 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.
Jokul DOKU - Inspect Element


  • Setelah itu baru kita bisa klik tombol PURCHASE nya aja
Purchase


  • Di tampilan Inspect Element, sobat pindah ke tab Network, lalu cari API dengan url: <URL>, klik url tersebut, lalu dibawahnya ada tab Response.
Get URL from Network


  • 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

Untuk integrasi ke flutter, sobat bisa ikuti langkah-langkah berikut
  • 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);
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Di widget tersebut, kita masukin widget InAppWebView, dimana kita passing url dari payment.url nya si DOKU ke initialUrlRequest. Nanti si InAppWebView bakalan nge-embed url tersebut di aplikasi Flutter kita.

Disini ane nambahin function onLoadStart untuk melakukan deteksi, apakah url yang ditampilin itu balik lagi ke redirect-nya si DOKU, dalam hal ini default-nya adalah "https://doku.com/". Ketika url yang di-load-nya itu balik ke default, kita bakal close halaman WebPage tersebut, dengan tujuan supaya user balik lagi ke halaman sebelum pembayaran. Disini sobat juga bisa handle redirect ke page manapun di aplikasi Flutter sobat.

Oke, untuk cara integrasi DOKU ke app flutter segitu aja, jika ada yang kurang boleh ditambahin, atau jika ada yang gak jelas mari kita discuss di comment section below sob! See ya!

Referensi: