Implement Midtrans payment gateway in Flutter by using Snap method


  • This tutorial requires you need to know BloC knowledge. If not, please read this document first.


  1. Register a midtrans account.
  2. Create a simple backend with 2 endpoints /productand /purchase
  3. Create a flutter project.
  4. Obtain transaction token from midtrans.
  5. Use webview_flutter to wrap snap.js
  6. Handle postMessage in javascript channel.

Register midtrans account:

Create a simple backend:

  • In this tutorial, I use Python-Flask for the backend side ’cause it’s a fast development language. You can use Golang or anything else depends on your requirements.
  • GET /product endpoint: Fake to return a list of product
  • POST /purchase endpoint: the purpose of this endpoint is to create a transaction token from midtrans.

Create a sample Flutter project:

  • Open snap.dart screen after retrieving transaction token when pressing BUY NOW button. By handling callback methods (_loadHtmlFromAssets()) of snap payment and use postMessage as an interaction channel between webview and native code, we can easily receive messages from midtrans.

Thanks for reading my article, all source code is available at Feel free to contact me via if there is any problem.

Full demo:




I’m a peaceful person who wants to make friend with people around the world.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introduction to Java Programming

Multiple Recursive Portals and AI In Unity Part 1: Basic portal rendering

Community Update: We Hate You, We Love You, Growth & Decentralization

How to Use Integer Division in Python

Integrating Stripe Connect with Rails 5 — Part 3/3


Node.js vs PHP: Battle of the web development platforms

php vs node.js

Scraping Data from Website to Excel (Tutorial 2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Trong Dinh Thai Hoang

Trong Dinh Thai Hoang

I’m a peaceful person who wants to make friend with people around the world.

More from Medium

onGenerateRoutes and onUnknownRoutes in Flutter, Handle error route, show error page in flutter.

To Explore SQLite Database in command prompt using the emulator in windows for flutter applications

What is async, async*, sync*, yield and yield* keywords in dart?

#FlutterWithSakshi — Part 2