Getting Started

Use our library to integrate the Cashfree Payment Gateway directly into your app using Cashfree SDK for React Native. Cashfree SDK has been designed to offload the complexity of handling and integrating payments in your app.

The Cashfree SDK is available as an npm package. Instructions on importing the package is also provided.

https://www.npmjs.com/package/cashfreereactnativepg

Step 1

cd /path-to-project-directory

npm install cashfreereactnativepg

Step 2

Add the necessary code to App.js

import { CashfreePG, returnData } from 'cashfreereactnativepg';

render() {    
    return (
      <View style=>
         
         <CashfreePG 
          appId="YOUR_APP_ID" 
          orderId="YOUR_ORDER_ID"
          orderAmount = "100"
          orderCurrency = "INR"
          orderNote = "This is an order note"
          source = "reactsdk"
          customerName = "John"
          customerEmail = "abc@email.com"
          customerPhone = "1234561234"
          notifyUrl = "YOUR_NOTIFY_URL"
          paymentModes = ""
          env = "TEST"
          tokenData = "TOKENDATA"
          caller = {this}
          /> 
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
        <Text>{base64.decode(this.state.testData)}</Text>
      </View>

    );
  }
The value for parameter source MUST be "reactsdk".

The base64 decoded transaction response is stored in {base64.decode(this.state.testData)}

Step 3: Generate token

You will need to generate a token and pass it to SDK while initiating payments for security reasonse. For generating token you need to use our token generation API. Please take care that this API is called only from your backend as it uses secretKey which should never be sent to frontend.

For production/live usage set the endpoint will be: https://api.cashfree.com/api/v2/cftoken/order

For testing the endpoint will be: https://test.cashfree.com/api/v2/cftoken/order

You need to send orderId, orderCurrency and orderAmount as a JSON object to the API endpoint and in response a token will received. Please see the description of request below


Request Description

For production/live usage set the endpoint will be: https://api.cashfree.com/api/v2/cftoken/order

For testing the endpoint will be: https://test.cashfree.com/api/v2/cftoken/order

curl -XPOST -H 'Content-Type: application/json' 
-H 'x-client-id: <YOUR_APP_ID>' 
-H 'x-client-secret: <YOUR_SECRET_KEY>' 
-d '{
  "orderId": "<ORDER_ID>",
  "orderAmount":<ORDER_AMOUNT>,
  "orderCurrency": "INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'


Request Example

curl -XPOST -H 'Content-Type: application/json' -H 'x-client-id: 275432e3853bd165afbf5272' -H 'x-client-secret: 2279c0ffb9550ad0f9e0652741c8d06a49409517' -d '{
  "orderId": "Order0001",
  "orderAmount":1,
  "orderCurrency":"INR"
}' 'https://test.cashfree.com/api/v2/cftoken/order'


Response Example

{
"status": "OK",
"message": "Token generated",
"cftoken": "v79JCN4MzUIJiOicGbhJCLiQ1VKJiOiAXe0Jye.s79BTM0AjNwUDN1EjOiAHelJCLiIlTJJiOik3YuVmcyV3QyVGZy9mIsEjOiQnb19WbBJXZkJ3biwiIxADMwIXZkJ3TiojIklkclRmcvJye.K3NKICVS5DcEzXm2VQUO_ZagtWMIKKXzYOqPZ4x0r2P_N3-PRu2mowm-8UXoyqAgsG"
}

The “cftoken” attribute is the token that needs to be used to secure your request. We will cover in next step

Parameters

Parameter Required Description
appId Yes Your app id
orderId Yes Order/Invoice Id
orderAmount Yes Bill amount of the order
orderCurrency No Currency for the order. INR if left empty. See the Currency Codes below for a list of available currencies.Please contact care@gocashfree.com to enable new currencies.
orderNote No A help text to make customers know more about the order
customerName Yes Name of the customer
customerPhone Yes Phone number of customer
customerEmail Yes Email id of the customer
notifyUrl No Notification URL for server-server communication. Useful when user’s connection drops while
paymentModes No Allowed payment modes for this order. Available values: cc, dc, nb, paypal, wallet, upi. Leave it blank if you want to display all modes

Response parameters, shared with callback functions

These parameters are returned to the functions you implement using PGTabBarViewController().getResult() (see Step 4). transactionResult contains the details of the transaction.

Parameter Description
orderId Order id for which transaction has been processed. Ex: GZ-212
orderAmount Amount of the order. Ex: 256.00
referenceId Cashfree generated unique transaction Id. Ex: 140388038803
txStatus Payment status for that order. Values can be : SUCCESS, FLAGGED, PENDING, FAILED, CANCELLED.
paymentMode Payment mode used by customer to make the payment. Ex: DEBIT_CARD, MobiKwik, etc
txMsg Message related to the transaction. Will have the reason, if payment failed
txTime Time of the transaction

Running your App

The CashFree SDK has been tested with React Native version 0.56.0

If you are facing issues, please send us an email or reach us on the Chat on our homepage

Test Credentials

Parameter Required Description
Card Number Yes 4111111111111111
Card Holder Yes Test
Expiry Month Yes 10
Expiry Year Yes 22
CVV/CVC Yes 123

Example Project

You can test Cashfree SDK for React Native by cloning the example react native project from its Github repo link.

cd cashfree-pg-react

npm install

npm start -- --reset-cache

In another terminal, run below commands (whichever platform you need)

react-native run-ios

react-native run-android