@philly25/react-native-paytm

This library has been forked from https://github.com/elanic-tech/react-native-paytm Updated it to work with the latest version of react-native and latest PayTM SDK.

Installation

react-native-paytm	react-native
1.0.11	< 0.60
1.0.12	>= 0.60

npm i --save @philly25/react-native-paytm

or

yarn add @philly25/react-native-paytm

For RN < 0.60

Link it:

react-native link @philly25/react-native-paytm

For RN >= 0.60

Use CocoaPods installation if auto-linking doesn't work.

CocoaPods

Add to your Podfile:

pod 'RNPayTm', :path => '../node_modules/@philly25/react-native-paytm'

Install it:

pod install && pod update

If it's not gonna work, then add libPaymentsSDK.a to "Link Binary With Libraries" Build Phase for the RNPayTm target (in Pods project).

iOS (Manually)

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules/@philly25/react-native-paytm and add RNPayTm.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNPayTm.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

Methods

startPayment(details: PayTmPaymentDetails): void

type PayTmPaymentDetails = {
  mode: 'Staging' | 'Production',
  MID: string,
  INDUSTRY_TYPE_ID: string,
  WEBSITE: string,
  CHANNEL_ID: string,
  TXN_AMOUNT: string,
  ORDER_ID: string,
  EMAIL?: string,
  MOBILE_NO?: string,
  CUST_ID: string,
  CHECKSUMHASH: string, 
  CALLBACK_URL: string,
  MERC_UNQ_REF?: string,
};

Usage

For more details check official documentation: iOS and Android.

Example:

import React from 'react';
import { Platform } from 'react-native';
import Paytm from '@philly25/react-native-paytm';

// Data received from PayTM
const paytmConfig = {
    MID: 'Value from PayTM dashboard',
    WEBSITE: 'Value from PayTM dashboard',
    CHANNEL_ID: 'WAP',
    INDUSTRY_TYPE_ID: 'Retail',
    CALLBACK_URL: 'https://securegw.paytm.in/theia/paytmCallback?ORDER_ID='
};

export default class Test extends React.Component {
    componentWillMount() {
        Paytm.addListener(Paytm.Events.PAYTM_RESPONSE, this.onPayTmResponse);
    }
    
    componentWillUnmount() {
        Paytm.removeListener(Paytm.Events.PAYTM_RESPONSE, this.onPayTmResponse);
    }
    
    onPayTmResponse = (resp) => {
        const {STATUS, status, response} = resp;
    
        if (Platform.OS === 'ios') {
          if (status === 'Success') {
            const jsonResponse = JSON.parse(response);
            const {STATUS} = jsonResponse;
    
            if (STATUS && STATUS === 'TXN_SUCCESS') {
              // Payment succeed!
            }
          }
        } else {
          if (STATUS && STATUS === 'TXN_SUCCESS') {
            // Payment succeed!
          }
        }
      };
    
    runTransaction(amount, customerId, orderId, mobile, email, checkSum, mercUnqRef) {
        const callbackUrl = `${paytmConfig.CALLBACK_URL}${orderId}`;
        const details = {
            mode: 'Staging', // 'Staging' or 'Production'
            MID: paytmConfig.MID,
            INDUSTRY_TYPE_ID: paytmConfig.INDUSTRY_TYPE_ID,
            WEBSITE: paytmConfig.WEBSITE,
            CHANNEL_ID: paytmConfig.CHANNEL_ID,
            TXN_AMOUNT: `${amount}`, // String
            ORDER_ID: orderId, // String
            EMAIL: email, // String
            MOBILE_NO: mobile, // String
            CUST_ID: customerId, // String
            CHECKSUMHASH: checkSum, //From your server using PayTM Checksum Utility 
            CALLBACK_URL: callbackUrl,
            MERC_UNQ_REF: mercUnqRef, // optional
        };
        
        Paytm.startPayment(details);
    }
}