React Native Midtrans Payment gateway example

SNAP Midtrans payment gateway example on client side (this is not the best way to do this, better all the midtrans API processed on a cloud functions for better performance *I think)

Preview

Problems

Unfortunately midtrans npm package not supported for Expo projects

Solutions

I found the way to use snap midtrans payment gateway using their HTTP API, full docs here

SNAP midtrans gives response a url for the payment gateway you can use react-native-webview or open the url on a browser, but I use react-native-webview for better UX 😛

Package used

"dependencies": {
   "base-64": "^1.0.0",
    "expo": "^41.0.0",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.2.3"
}

Transactions

midtrans() to get the payment gateway url

Get your midtrans server key https://dashboard.sandbox.midtrans.com/settings/config_info

// dont forget add ":" in the end of the string
const serverKey = "YOURSERVERKEY:";
const base64Key = base64.encode(serverKey);

API endpoint

This endpoint using method POST

Sandbox url

// Transactions url/payment gateway
const transactionsUrl =
  "https://app.sandbox.midtrans.com/snap/v1/transactions";

Production url

// Transactions url/payment gateway
const transactionsUrl = "https://app.midtrans.com/snap/v1/transactions";

Minimum transaction details (full read here)

{
  "transaction_details": {
    "order_id": "ORDER-101",
    "gross_amount": 10000
  }
}

Response success

{
  "token":"66e4fa55-fdac-4ef9-91b5-733b97d1b862",
  "redirect_url":"https://app.sandbox.midtrans.com/snap/v2/vtweb/66e4fa55-fdac-4ef9-91b5-733b97d1b862"
}

Status

getStatus() to check status of the transaction

Get your midtrans server key https://dashboard.sandbox.midtrans.com/settings/config_info

// dont forget add ":" in the end of the string
const serverKey = "YOURSERVERKEY:";
const base64Key = base64.encode(serverKey);

API endpoint

This endpoint using method GET

require an id

Sandbox url

// Status url/check status of the transaction using an ID
const statusUrl = `https://api.sandbox.midtrans.com/v2/${ID}/status`;

Production url

// Status url/check status of the transaction using an ID
const statusUrl = `https://app.midtrans.comv2/${ID}/status`;

Response

// Example response
{
  "status_code" : "200",
  "status_message" : "Success, transaction found",
  "transaction_id" : "249fc620-6017-4540-af7c-5a1c25788f46",
  "masked_card" : "481111-1114",
  "order_id" : "example-1424936368",
  "payment_type" : "credit_card",
  "transaction_time" : "2015-02-26 14:39:33",
  "transaction_status" : "capture",
  "fraud_status" : "accept",
  "approval_code" : "1424936374393",
  "signature_key" : "2802a264cb978fbc59f631c68d120cbda8dc853f5dfdc52301c615cf4f14e7a0b09aa...",
  "bank" : "bni",
  "gross_amount" : "30000.00",
  "channel_response_code": "00",
  "channel_response_message": "Approved",
  "card_type": "credit"
}

Transactions status see here

if you find these useful don't forget to give it a star ⭐ and share it to your friends ❤️

Reach me on twitter

codingki / react-native-midtrans-example