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.
- Register a midtrans account.
- Create a simple backend with 2 endpoints
- Create a flutter project.
- Obtain transaction token from midtrans.
webview_flutterto wrap snap.js
Register midtrans account:
- Go to https://account.midtrans.com/register to register a merchant account. For now, it only supports ID country only.
- Obtain access key via https://dashboard.sandbox.midtrans.com/
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.
/productendpoint: Fake to return a list of product
/purchaseendpoint: the purpose of this endpoint is to create a transaction token from midtrans.
- The backend side was submitted to Github. Lets clone that repos and follows my steps in the README.md file (https://github.com/trongdth/midtrans/tree/main/backend)
Create a sample Flutter project:
- Checkout the flutter project at https://github.com/trongdth/midtrans/tree/main/flutter_midtrans and follows the steps in the README.md file before running.
- Product list screen:
- Open snap.dart screen after retrieving transaction token when pressing
BUY NOWbutton. By handling callback methods (_loadHtmlFromAssets()) of snap payment and use
postMessageas 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 https://github.com/trongdth/midtrans.git. Feel free to contact me via firstname.lastname@example.org if there is any problem.