Integration (Android)

Steps to integrate your React Native Android application with Dhanyatra Payment Gateway.

Follow the steps to integrate Dhanyatra React Native SDK for Android.

1. Install Dhanyatra React Native SDK
2. Run React Native App
3. Create an Order in server
4. Add Dhanyatra checkout option to your project File
5. Store payment success in your server
6. Verify Payment Signature
7. Verify Payment Status

Install Dhanyatra React Native SDK

Install the SDK using the following npm command. For Windows, use Git Bash instead of Command Prompt. Run this within your React Native project folder.

yarn add react-native-dhanyatra

npm install react-native-dhanyatra

npx expo install react-native-dhanyatra

Run React Native App

Run the React Native app.

npx react-native run-android

This links the SDK with your React Native project.

Expo Application

After adding the react-native-dhanyatra package, use the option to prebuild the app. This generates the android platform folders in the project to use native-modules.

npx expo prebuild

To run the application on android execute.

npx expo run:[android] --device

Create an Order in server

Order is an important step in the payment process.

• An order should be created for every payment.
• You can create an order using the Orders API. It is a server-side API call. Know how to authenticate Orders API.
• The order_id received in the response should be passed to the checkout. This ties the order with the payment and secures the request from being tampered.

You can create an order:

• Using the sample code on the Dhanyatra Postman Public Workspace.
• By manually integrating the API sample codes on your server.

Dhanyatra Postman Public Workspace

You can use the Postman workspace below to create an order:

You can create an order manually by integrating the API sample codes on your server.

API Sample Code

    curl -X POST https://api.dhanyatra.com/orders \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer YOUR_API_KEY" \
    -d '{
      "amount": 1000,
      "currency": "INR",
      "receipt": "order_rcptid_11",
    }'

const dhanyatra = new Dhanyatra({ key_id: 'YOUR_KEY_ID'})

dhanyatra.orders.create({
 "amount": 5000,
 "currency": "INR",
 "receipt": "receipt#1",
 "notes": {
   "key1": "value3",
   "key2": "value2"
 }
})

{
 "id": "order_IluGWxBm9U8zJ8",
 "amount": 5000,
 "currency": "INR",
 "receipt": "receipt#1",
 "status": "created",
 "attempts": 0,
 "notes": [],
 "created_at": 1642662092
}

{
 "error": {
   "code": "BAD_REQUEST_ERROR",
   "description": "Order amount less than minimum amount allowed",
   "step": "payment_initiation",
   "reason": "input_validation_failed",
   "metadata": {},
   "field": "amount"
 }
}

Add Dhanyatra checkout to your project

To integrate the Dhanyatra Checkout with your React Native app, you must add the Checkout Display Options.

Open the .jsx or .tsx file in your project folder and perform the following:

1. Import the DhanyatraCheckout module to your component.

import DhanyatraCheckout, {PaymentOptions} from 'react-native-dhanyatra';

2. Declare the button or touchable opacity to call the dhanyatra function.

<TouchableOpacity onPress={() => openPayment()}>
    <Text>Pay with Dhanyatra</Text>
</TouchableOpacity>

3. Call the DhanyatraCheckout.open method with the payment options. The method returns a JS Promise where the then part corresponds to a successful payment and the catch part corresponds to payment failure.

const openPayment = async () => {
    var options: PaymentOptions = {
      key: '', //your key here
      currency: 'INR',
      amount: '400',
      order_id: 'od_12Hfed775' //Replace this with an order_id created using Orders API.
      config: {
        display: {
          blocks: [
            {
              preferred: {
                name: 'Preferred Payment',
                instruments: [
                  {
                    method: 'upi',
                    flows: ['qr', 'intent'],
                    apps: ['phonepe', 'google_pay', 'paytm'],
                  },
                ],
              },
            },
          ],
          sequence: ['block.preferred'],
          preferences: {
            show_default_blocks: true, // Should Checkout show its default blocks?
          },
        },
      },
      theme: {
        color: {
          text: '#ffa800',
          base: '#ffa800',
        },
      },
      prefill: {
        email: 'yashkumar12125@gmail.com',
        contact: '9191919191',
        name: 'Kumar Yash'
      }
    };

    DhanyatraCheckout.open(options)
      .then(async (paymentSuccess: any) => {
        console.log("paymentSuccess ::",paymentSuccess)
        // your success callback logic here
      })
      .catch(error => {
        // error handler here
      });
}

Store payment success in your server

A successful payment returns the following fields.

• You need to store these fields in your server.
• You can confirm the authenticity of these details by verifying the signature in the next step.

{
  "data": {
    
  }
}