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