React Native Integrate Payment Gateway with Razorpay

December 15, 2020

React Native Integrate Payment Gateway with Razorpay pay

$ npm install react-native-razorpay --save

React Native Version 0.60+: No need to linking

You can find the SDK integration steps for apps with React Native version 0.59 and lower on GitHub.

After install the library you need an API key from Razorpay

1)Login or singup in Razorpay

2)Choose setting menu and Ganerate the API key

import React from 'react'
import { Linking, Button } from 'react-native'
import styled from 'styled-components/native';
import RazorpayCheckout from 'react-native-razorpay';
const App = () => {
  return (
    <Container>
    <Button onPress={OpenUPI} title="Pay"></Button>
    </Container>
  )
}
const OpenUPI=()=>{
  let options = {
    description: 'Credits towards consultation',
    image: 'https://i.imgur.com/3g7nmJC.png', 
    currency: 'INR',
    key: '',  // Use Ganerate API KEY here
    amount: '100', // 100 = 1 RS
    name: 'App User',
    prefill: {
      email: 'youremail@gmail.com',
      contact: 'yourmobile', 
      name: 'Custom Software Limited'
    },
    theme: {color: '#6200ee'}
  }
  RazorpayCheckout.open(options).then((data) => {
    // handle success
    alert(`Success: ${data.razorpay_payment_id}`);
  }).catch((error) => {
    // handle failure
    alert(`Error: ${error.code} | ${error.description}`);
  });
}

export default App;


const Container = styled.View`
      flex:1;
      align-items:center;
      justify-content:center;
`;