React Native Integrate Payment Gateway with Razorpay
December 15, 2020
$ 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;
`;