react-native-gkashpayment v0.0.5

react-native Gkash payment SDK

This is the beta but functional Gkash Payment React Native payment module that is ready to be implemented into any React Native (Expo or React-Native-CLI) project npm install module. An example application project (GkashPaymentReactExampleProject) is provided for Gkash Payment framework integration reference.

Recommended configurations

• Node.js Version: 5.3.0 ++

• Minimum Android API level: 19 ++

• Minimum React Native version : 0.47.1 ++

• Xcode version: 9 ++

• Minimum target version: iOS 8

Installation

npm install react-native-gkashpayment

ExpoKit

React Native CLI

Sample Result

=========================================
Sample transaction result in query string:
=========================================

Example of return page included query string:

https://api-staging.pay.asia/api/return.aspx?CID=M161-U-33&POID=M147-PO-65576&cartid=20201116110946&status=88+-+Transferred&description=&currency=MYR&amount=1.00&returnurl=https%3A%2F%2Fpaymentdemo.gkash.my%2Freturn-staging.php&signature=7a72c8774e43270c5af362330d9843dfccbd0669da857284e4c2a29069b6444994e2d5cbd5ec9ead301b8701e462e3474d5ea963c09470123518a4805b3baa61&PaymentType=TnG+ECOMM&email=&companyName=Newland

Parameter and meaning:

"CID" - Merchant ID. 
"POID" - Gkash's Unique Referece No. (Issue by GKash) .
"cartid" - Merchant's Unique Referece ID. (Order ID from Merchant) 
"status" - Payment status , "88 - Transferred" for Success , "66 - Failed" for Failed
"description" - Payment description
"currency" - Currency notation (currently only support MYR)
"amount" - Payment amount
"returnurl" - Handle response page (navigation page)
"signature" - Response Signing
"PaymentType" - Payment method
"email" - Payer email 
"companyName" - Merchant's company name

* Notes: You may ignore other parameters and values not stated above

Prepare Navigation component

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import SubmitForm from './SubmitForm';
import ResponsePage from './ResponsePage';
import PaymentPage from 'react-native-gkashpayment';

const screens ={
    SubmitForm:{
        screen:SubmitForm,
        navigationOptions:{
            title:'Submit Payment'
        }
    },
    PaymentPage:{
        screen:PaymentPage,
        navigationOptions:{
            title:'Payment Page'
        }
    },
    ResponsePage:{
        screen:ResponsePage,
        navigationOptions:{
            title:'Payment Response'
        }
    }
}

Prepare the Payment detail object and start the payment module

submitHandler = () =>{
    if(isNaN(parseFloat(this.state.v_amount))){
      return Alert.alert("Warning!","Amount is required!");
    }

    Keyboard.dismiss();

    const date = new Date().getDate(); //Current Date
    const month = new Date().getMonth() + 1; //Current Month
    const year = new Date().getFullYear(); //Current Year
    const hours = new Date().getHours(); //Current Hours
    const min = new Date().getMinutes(); //Current Minutes
    const sec = new Date().getSeconds(); //Current Seconds

    const currentDate = (year +""+ month +""+ date +""+ hours +""+ min +""+ sec);
    
    	this.setState({
      version:"refer to api docs",
      CID:"integration credential MerchantID",
      signature:"integration credential Signature Key",
      v_currency:"MYR",
      v_cartid:currentDate, 
      callbackurl:"your callback url",
      v_billemail:"gkashdemo@gkash.com",
      productionEnvironment:false, //integate environment
      returnurl:"ResponsePage" //payment response page navigator destination name
    },() =>this.props.navigation.navigate("PaymentPage",this.state))
  }

Support

Submit issue to this repository or email to our merchantsupport@gkash.my