1.0.10 • Published 3 years ago

gkashpaysdk1 v1.0.10

Weekly downloads
1
License
ISC
Repository
-
Last release
3 years ago

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 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 install gkash-reactnative

ExpoKit

React Native CLI

Auto link

Android

1) npm install following dependencies

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

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

npm install react-native-unimodules

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

npm install react-native-webview

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

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

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

IOS

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 'gkashpaysdk1';

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