gkash-react-native-gkashpayment v1.0.4

Gkash React Native GkashPayment

This is the new 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 SDK Version: 28 ++

• Minimum Android API level: 19 ++

• Minimum Android target version: Android 4.4

• Minimum React Navtive version : 0.47.1 ++

• Xcode version: 9 ++

• Minimum target version: iOS 8

Installation

npm i gkash-react-native-gkashpayment

ExpoKit

React Native CLI

Android

1. npm install following dependencies

You might have multiple 3rd party libraries, make sure that you don't create multiple include.

npm install react-native-unimodules

react-native-unimodules refer to https://docs.expo.io/bare/installing-unimodules/

npm install react-native-webview

react-native-webview refer to https://github.com/react-native-webview/react-native-webview

npm install react-native-reanimated
npm install react-native-gesture-handler
npm install react-native-screens
npm install react-native-safe-area-context
npm install @react-native-community/masked-view

npm navigation can refer https://reactnavigation.org/docs/4.x/getting-started#installing-dependencies-into-a-bare-react-native-project

2. run react-native run-android to see if everything is compilable.

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 'gkash-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