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