By https://dumbways.id (Ega Radiegtya)
This plugin already tested on Production at https://fifilio.com
React Native Midtrans is module for applicate Midtrans Payment Gateway, its use Midtrans Mobile SDK.
react-native-midtrans enable merchant to accept online payments in React Native apps. it use Midtrans Mobile user Interface SDK to make transactions on all the payment types supported by Midtrans. Watch the video for the default module example.
There are four parties involved in the payment process for making a payment.
- Merchant Server : The merchant backand implementation
- Customers
- Midtrans Backend (Payment Procesor)
- PaymentProject
- Checkout: Customer clicks the Checkout button on the Host application and the app makes a request to the Merchant Server
- Token request: Merchant Server makes a request to Veritrans server with Order Information.
- Token response: Midtrans responds with a valid transaction token to Merchant server
- Token response: Merchant server forwards the token to the Mobile SDK
- Get transaction options: Mobile SDK requests payment/merchant information based on the token
- Transaction options response: Mobile SDK renders the payment Options and payment information to make the payment
- Pay: Customers selects the payment method and the payment details and clicks “Pay”
- Charge: Mobile SDK sends the Charge request to the Veritrans Backend for payment Processing.
- Charge response: Mobile SDK receives the response from the Veritrans Backend and triggers the handler on Mobile App with success/failure/pending status
- Charge notification: Midtrans Backend sends a notification to the Merchant backend confirming the completion of transaction.
- Create a merchant account in MAP
- In MAP, setup your merchant accounts settings, in particular Notification URL.
- Setup your merchant server. A server side implementation is required for midtrans mobile SDK to work. You can check the server implementation reference, and walk through the API’s that you may need to implement on your backend server.
- Minimum requirements for Android
- compileSdkVersion 25
- buildToolsVersion min 25.0.2
- targetSdkVersion 25
- Install the module
npm i --save react-native-midtrans
or
npm install --save git+https://github.com/radiegtya/react-native-midtrans.git
- Link the library
react-native link react-native-midtrans
- In your
android/build.gradleadd
android {
.....
}
repositories {
// Add the midtrans repository into the list of repositories
maven { url "http://dl.bintray.com/pt-midtrans/maven" }
}
Lets require react-native-midtrans module
import PaymentMidtrans from 'react-native-midtrans'
Checkout Payment
PaymentMidtrans.checkOut(
optionConect,
transRequest,
itemDetails,
creditCardOptions,
userDetail,
optionColorTheme,
optionFont,
callback(res)
);
Props of Payment CheckOut
-
optionConect (Object)
- clientKey (String) clientKey from MAP (Merchant Admin Portal)
- urlMerchan (String) url Backend
Example: const optionConect = { clientKey: "VT-CLIENT-AAAAAAAAAAAAA", urlMerchant : "http://example.com/payment" }Note: in merchant Server (backend) must be have route with name charge for handle request to Veritrans server with Order Information. for detail can visit here
-
transRequest (Object)
- transactionId (String) id of transaction
- totalAmount (Number) total amount be paied on checkOut
Example: const transRequest = { transactionId : "001", totalAmount : 6000 } -
itemDetails (Arrray), holds infromation about ilist of tem purchased by user transaction required for Mandiri Bill and BCA KlikPay, Optional for another payment
- id (String) id of item
- price (Number) price of item
- qty (Number) qty of item
- name (String) name of item
Example:
var itemDetails = [
{id:"001", price:1000, qty:4, name:"cimory"},
{id:"002", price:2000, qty:2, name:"cofimix"}
];
Note: Sum of price must be equals with totalAmount in transRequest
- creditCardOptions (Object)
- saveCard = save card to Snap (true or false)
- saveToken = save card token as 'one click' token (true or false)
- paymentMode = mode payment use credit Card ("Normal", "Two Click", "One Click")
- secure = using 3D secure (true, false)
var creditCardOptions = {
saveCard:false,
saveToken:false,
paymentMode:"Normal",
secure:false
};
- userDetail (Object)
- fullName = Full Name member (customer)
- email = Email customer
- phoneNumber = Phone Number Customer
- userId = User Id Customer
- address = Address Customer
- city = City Customer
- country = Country Customer
- zipCode = ZipCode Customer
var userDetail = {
fullName:"Ahmad", email:"[email protected]", phoneNumber:"0850000000", userId:"U01", address:"kudus", city:"kudus", country:"IDN", zipCode:"59382"
};
*Note: value of country use ISO 3166-1 alpha-3, visit wikipedia to learn about ISO 3166-1 alpha-3
- optionColorTheme (Object)
- primary = For top panels showing amount
- primaryDark = For bordered button, link button
- secondary = For text field.
var optionColorTheme = {
primary:'#c51f1f',
primaryDark:'#1a4794',
secondary:'#1fce38'
}
- optionFont (Object)
- defaultText = for default Text
- semiBoldText = for semi bold text
- boldText = for bold text
var font = {
defaultText:"open_sans_regular.ttf", semiBoldText:"open_sans_semibold.ttf",
boldText:"open_sans_bold.ttf"
}
*Note: open_sans_regular.ttf, open_sans_semibold.ttf, open_sans_bold.ttf is path of the custom font on the assets directory.
- Callback (function) to return result of payment transaction;
var callback = (res)=>{console.log(res)};
TransactionResult is wrapper for UI flow finished transaction object. It contains:
status : either
canceled,pending,success,failedorinvalidbased on payment API.
- status canceled is value if transaction canceled. for example when selecting payment method users click back
- status: pending will be only use on asynchronous transaction like bank transfer or internet banking.
- status success / failed: For synchronous transaction you can immediately know the status of the transaction.
- status invalid : There are unknown error happened.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent