Tidak bisa menjalankan pembayaran snap ui menggunakan flutter webview 4.0.2

[hakimasmui]

Assalamu'alaikum teman-teman. Saya mau minta tolong. Disini saya sedang membuat pembayaran di aplikasi menggunakan Snap dari Midtrans. Tapi terkendala ketika memilih salah satu metode pembayarannya tidak bisa jalan. Saya menggunakan webview_flutter versi 4.0.2.

di log muncul [INFO:CONSOLE(1)] "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://app.sandbox.midtrans.com') does not match the recipient window's origin ('null').", source: https://app.sandbox.midtrans.com/snap/snap.js (1)

[Xaxxis]

Hi @hakimasmui waalaikumsalam, Snap saat ini memiliki 2 options, open directly vis snap ~redirect_ud~ redirect_url atau menggunakan Pop-Up via Snap.js. Apakah bisa dibantu jelaskan lebih details, implementasi yang anda lakukan saat ini dengan WebView mode apa?

Terima Kasih

[hakimasmui]

Selamat siang mas, terima kasih sudah menjawab. saya menggunakan popup via snap.js, ketika memilih metode pembayaran gopay. ketika saya buka di browser berjalan dengan baik, tapi ketika implementasi di webview flutter, image qr, timer tidak berjalan semestinya

[Xaxxis]

Hi @hakimasmui terima kasih atas responsenya. Apakah implementasi Anda menggunakan iFrame using WebView? Sayangnya Kami tidak bisa memastikan secara spesific issuenya ada pada implementasi Anda. Dilihat dari response errornya, sepertinya issuenya dikarenakan implementasi iFrame in iFrame yang anda lakukan. Karena pada dasarnya Snap Midtrans menggunakan iFrame.

Untuk implementasi WebView pada mobile app yang lebih singkat, anda dapat membuka halaman Midtrans Snap menggunakanredirect_url melalui WebView. Sehingga akan meminimalisir config pada implementasi WebView anda.

Terima Kasih

[hakimasmui]

Terima kasih sarannya mas. sudah saya coba masih sama. setiap kali memilih metode gopay, tidak ada response sama sekali, hanya berpindah halaman saja, tapi tidak menampilkan qr dan timer masih 1 jam, padahal harusnya 15 menit saja

[Xaxxis]

Tambahan mohon pastikan kembali permission terkait javascript pada webview anda telah aktif ya @hakimasmui

Berikut

webView.settings.javaScriptCanOpenWindowsAutomatically = ?
webView.settings.domStorageEnabled = ?
webView.settings.databaseEnabled = ?
webView.settings.allowFileAccessFromFileURLs = ?
webView.settings.allowFileAccess = ?
webView.settings.allowContentAccess = ?
webView.settings.domStorageEnabled = ?
webView.settings.cacheMode = ?
webView.settings.setAppCacheEnabled ?

[hakimasmui]

untuk settingan diatas, di webview_flutter versi 4.0.2 tidak ditemukan.

kenpa ya ketika saya mencoba menggunakan redirect_url setingan UI di dashboard sandbox tidak berpengaruh

[hakimasmui]

Oh iya, kalau pakai snap.js, pasti web kita ketika di devtools, bakal kelihatan token dan client-key. apakah itu aman mas ?

[Xaxxis]

Hi @hakimasmui agar lebih mudah Anda bisa mencoba dengan project sample dengan WebView flutter. Ketika berhasil Anda dapat menggabungkan sample code yang telah Anda coba, dengan Main project yang Anda punya. Saya coba coba jalankan code sample simple WebView Flutter dengan url Snap redirect_url berjalan Normal.

Sample code

import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});
  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
        ..loadRequest(
        Uri.parse('https://app.midtrans.com/snap/v3/redirection/06cb3f65-8750-4bf9-bd36-95a8eccb5107'),
      );
    controller.setJavaScriptMode(JavaScriptMode.unrestricted);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

Oh iya, kalau pakai snap.js, pasti web kita ketika di devtools, bakal kelihatan token dan client-key. apakah itu aman mas ?

Untuk Client-key sifatnya public yang digunakan pada frontend merchant, jadi aman untuk terlihat public ya

kenpa ya ketika saya mencoba menggunakan redirect_url setingan UI di dashboard sandbox tidak berpengaruh

Pastikan Anda melakukan pengaturan Snap preferences pada halaman VT-Web Preferences berikut https://dashboard.sandbox.midtrans.com/settings/vtweb_preference

[hakimasmui]

Terima kasih banyak mas sudah dibantu untuk dibuatkan sample code nya. Apakah sudah di coba untuk pembayaran menggunakan GoPay mas ?, karena untuk bank transfer tidak ada masalah, tapi yang gopay/qris tidak bisa. oh iya. saya menggunakan emulator. apakah itu berpengaruh ?

[Andrenzo17]

Hi @hakimasmui

Dari sisi kami untuk payment method Gopay tidak ada masalah. Jadi untuk kendala yang di alami untuk GoPay saja ya? apakah untuk shopeepay bisa ke redirect juga? Bisa tolong infokan merchant ID nya agar saya cek lebih lanjut dulu.

Terima kasih

[hakimasmui]

Untuk yang gopay, terkendalanya hanya di emulator. untuk real device belum mencoba, tapi ketika saya buka di browser pc / laptop aman.

Untuk shopeepay kita tidak pakai mas.

Apakah benar ini Merchant ID nya ? G801982585

[Andrenzo17]

Saya coba create trx Gopay Qrisnya tidak berkendala di akun G801982585 dengan ENV sandbox. mungkin dari sisi Anda, bisa coba untuk test di real device terlebih dahulu ya.

Terima kasih

[hakimasmui]

selamat siang, maaf kak merepotkan. tapi ini sudah saya coba di real device dan dengan sample project diatas, masih belum bisa ketika menjalankan pembayaran GoPay. bolehkah saya dibagikan project yang sudah bisa menjalankan trx Gopay Qrisnya menggunakan flutter.

[hakimasmui]

apakah bener ini untuk project midtransnya mas ? [https://github.com/veritrans/Midtrans-Sample-SnapWebView]

[hakimasmui]

https://github.com/veritrans/Midtrans-Sample-SnapWebView

[Andrenzo17]

Benar, untuk link di atas merupakan project Midtrans. Bisa coba menggunakan sample project diatas https://github.com/veritrans/Midtrans-Sample-SnapWebView/tree/master/flutter

Terima kasih

[hakimasmui]

Mohon maaf mas, apakah benar emang flownya seperti ini ya

Jika pembayaran menggunakan device mobile, harus pencet bayar sekarang, maka akan dibukakan aplikasi gojek Jika pembayaran menggunakan pc/laptop akan memunculkan image qr ?

[Andrenzo17]

Jika pembayaran menggunakan device mobile, harus pencet bayar sekarang, maka akan dibukakan aplikasi gojek
Jika pembayaran menggunakan pc/laptop akan memunculkan image qr ?

Iya benar flownya memang seperti ini, selengkapnya bisa cek di docs berikut ya https://docs.midtrans.com/reference/gopay https://docs.midtrans.com/reference/gopay-1

Terima kasih

[hakimasmui]

ooh begitu. baik mas sudah bisa. terima kasih sudah merepotkan, ternyata dari sayanya yang kurang baca dokumentasi. Kalau boleh tahu, apakah berarti untuk versi mobile hanya bisa menggunakan gopay mas ?

[Andrenzo17]

Baik terima kasih konfirmasinya mas. Untuk versi mobile memang hanya bisa menggunakan gopay deeplink. dan untuk versi desktop maka akan menggunakan Gopay QRIS

[Andrenzo17]

Karena tidak ada response lebih lanjut akan saya close issue ini.

Untuk response yang lebih cepat, silahkan hubungi kami via menu Contact Us di website midtrans.com . Dimana ada team Support yang standby menjawab pertanyaan. Sedangkan Github Issue belum tentu dicek berkala oleh tim kami.

Terima kasih

[Andrenzo17]

Kalau boleh tahu, apakah berarti untuk versi mobile hanya bisa menggunakan gopay mas ?

Hi mas @hakimasmui ingin menambahkan point sebelumnya. Jika dari merchant untuk versi mobile ingin tetap menampilkan gopay QRIS maka bisa force QRIS display SNAP di mobile device dengan berikut. Di snap.js bisa specify gopayMode menjadi qr berikut docs lengkapnya https://docs.midtrans.com/docs/snap-advanced-feature#specify-gopay-mode

Terima kasih