1 | # react-native-razorpay
|
2 | [![npm](https://img.shields.io/npm/l/express.svg)]()
|
3 | [![NPM Version](http://img.shields.io/npm/v/react-native-razorpay.svg?style=flat)](https://www.npmjs.com/package/react-native-razorpay)
|
4 | [![NPM Downloads](https://img.shields.io/npm/dm/react-native-razorpay.svg?style=flat)](https://npmcharts.com/compare/react-native-razorpay?minimal=true)
|
5 | [![install size](https://packagephobia.com/badge?p=react-native-razorpay@2.1.35)](https://packagephobia.com/result?p=react-native-razorpay@2.1.35)
|
6 |
|
7 | [![NPM](https://nodei.co/npm/react-native-razorpay.png?downloads=true)](https://nodei.co/npm/react-native-razorpay/)
|
8 |
|
9 | React Native wrapper around our Android and iOS mobile SDKs
|
10 |
|
11 |
|
12 | * [Prerequisites](#prerequisites)
|
13 | * [Installation](#installation)
|
14 | * [Requirements](#requirements)
|
15 | * [Linking](#linking)
|
16 | * [Usage](#usage)
|
17 | * [Example App](https://github.com/razorpay/react-native-razorpay/tree/master/example/SampleProject)
|
18 | * [Proguard Rules](#proguard-rules)
|
19 | * [Notes](#things-to-be-taken-care)
|
20 | * [FAQ's](#faqs)
|
21 | * [Contributing](#contributing)
|
22 | * [License](#license)
|
23 |
|
24 | The following documentation is only focussed on the react-native wrapper around our Android and iOS sdks. To know more about our react-native SDK, refer to the following documentation -
|
25 |
|
26 | https://razorpay.com/docs/payment-gateway/react-native-integration/
|
27 |
|
28 | To know more about Razorpay payment flow and steps involved, read up here:
|
29 | <https://docs.razorpay.com/docs>
|
30 |
|
31 | ## Prerequisites
|
32 |
|
33 | - Learn about the <a href="https://razorpay.com/docs/payment-gateway/payment-flow/" target="_blank">Razorpay Payment Flow</a>.
|
34 | - Sign up for a <a href="https://dashboard.razorpay.com/#/access/signin">Razorpay Account</a> and generate the <a href="https://razorpay.com/docs/payment-gateway/dashboard-guide/settings/#api-keys/" target="_blank">API Keys</a> from the Razorpay Dashboard. Using the Test keys helps simulate a sandbox environment. No actual monetary transaction happens when using the Test keys. Use Live keys once you have thoroughly tested the application and are ready to go live.
|
35 |
|
36 | ## Installation
|
37 |
|
38 | Using npm:
|
39 |
|
40 | ```shell
|
41 | npm install --save react-native-razorpay
|
42 | ```
|
43 |
|
44 | or using yarn:
|
45 |
|
46 | ```shell
|
47 | yarn add react-native-razorpay
|
48 | ```
|
49 | ## Requirements
|
50 |
|
51 | - iOS 10.0+ / macOS 10.12+ / tvOS 10.0+ / watchOS 3.0+
|
52 | - Xcode 11+
|
53 | - Swift 5.1+
|
54 |
|
55 | ## Linking
|
56 |
|
57 | ### Automatic
|
58 |
|
59 | <details>
|
60 | <summary>iOS</summary>
|
61 |
|
62 | ### For React Native 0.60+
|
63 |
|
64 | ```sh
|
65 | # install
|
66 | npm install react-native-razorpay --save
|
67 | cd ios && open podfile # Change the platform from iOS 9.0 to 10.0
|
68 | pod install && cd .. # CocoaPods on iOS needs this extra step
|
69 | # run
|
70 | yarn react-native run-ios
|
71 | ```
|
72 | ### For React Native 0.59 and lower
|
73 |
|
74 |
|
75 | 1. `$ npm install react-native-razorpay --save` // Install the Razorpay React Native Standard SDK using the npm command.
|
76 |
|
77 | 2. `react-native link react-native-razorpay` // Link the SDK with React Native Project using Xcode.
|
78 |
|
79 | 3. Drag the `Razorpay.framework` file from the Libraries folder and drop it under the root folder, for more info follow [this link](https://razorpay.com/docs/payment-gateway/react-native-integration/standard/#step-2---link-the-sdk-with-react),
|
80 | after this go to **Target** > **General Settings**> **Framework, Libraries and Embedded Content** section, set the **Embed** status of Razorpay.framework to **Embed & Sign**.
|
81 |
|
82 | 6. Also make sure the razorpay framework is added in the embedded binaries section and you have Always Embed Swift
|
83 | Standard Binaries set to yes in build settings.
|
84 | </details>
|
85 |
|
86 | ### Manual
|
87 |
|
88 | <details>
|
89 | <summary>iOS (via CocoaPods)</summary>
|
90 |
|
91 | Add the following line to your build targets in your `Podfile`
|
92 |
|
93 | `pod 'react-native-razorpay', :path => '../node_modules/react-native-razorpay'`
|
94 |
|
95 | Then run `pod install`
|
96 |
|
97 | </details>
|
98 |
|
99 | <details>
|
100 | <summary>iOS (without CocoaPods)</summary>
|
101 |
|
102 | In XCode, in the project navigator:
|
103 |
|
104 | * Right click _Libraries_
|
105 | * Add Files to _[your project's name]_
|
106 | * Go to `node_modules/react-native-razorpay`
|
107 | * Add the `.xcodeproj` file
|
108 |
|
109 | In XCode, in the project navigator, select your project.
|
110 |
|
111 | * Add the `libRNDeviceInfo.a` from the _deviceinfo_ project to your project's _Build Phases ➜ Link Binary With Libraries_
|
112 | * Click `.xcodeproj` file you added before in the project navigator and go the _Build Settings_ tab. Make sure _All_ is toggled on (instead of _Basic_).
|
113 | * Look for _Header Search Paths_ and make sure it contains both `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../React`
|
114 | * Mark both as recursive (should be OK by default).
|
115 |
|
116 | Run your project (Cmd+R)
|
117 |
|
118 | </details>
|
119 |
|
120 | <details>
|
121 | <summary>Android </summary>
|
122 |
|
123 |
|
124 | 1. Open up `android/app/src/main/java/[...]/MainApplication.java`
|
125 | - Add `import com.razorpay.rn.RazorpayPackage;` to the imports at the top of
|
126 | the file
|
127 | - Add `new RazorpayPackage()` to the list returned by the `getPackages()` method
|
128 | 2. Append the following lines to `android/settings.gradle`:
|
129 | ```gradle
|
130 | include ':react-native-razorpay'
|
131 | project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')
|
132 | ```
|
133 | 3. Insert the following lines inside the dependencies block in
|
134 | `android/app/build.gradle`:
|
135 | ```gradle
|
136 | implementation project(':react-native-razorpay')
|
137 | ```
|
138 | </details>
|
139 |
|
140 | ## Usage
|
141 |
|
142 | Sample code to integrate with Razorpay can be found in
|
143 | [index.js][index.js] in the included example directory.
|
144 |
|
145 | To run the example, simply do the following in example directory and then
|
146 | link iOS SDK as explained in the previous section:
|
147 |
|
148 | `$ npm i`
|
149 |
|
150 | ### Steps
|
151 |
|
152 | 1. Import RazorpayCheckout module to your component:
|
153 | ```js
|
154 | import RazorpayCheckout from 'react-native-razorpay';
|
155 | ```
|
156 |
|
157 | 2. Call `RazorpayCheckout.open` method with the payment `options`. The method
|
158 | returns a **JS Promise** where `then` part corresponds to a successful payment
|
159 | and the `catch` part corresponds to payment failure.
|
160 | ```js
|
161 | <TouchableHighlight onPress={() => {
|
162 | var options = {
|
163 | description: 'Credits towards consultation',
|
164 | image: 'https://i.imgur.com/3g7nmJC.png',
|
165 | currency: 'INR',
|
166 | key: '', // Your api key
|
167 | amount: '5000',
|
168 | name: 'foo',
|
169 | prefill: {
|
170 | email: 'void@razorpay.com',
|
171 | contact: '9191919191',
|
172 | name: 'Razorpay Software'
|
173 | },
|
174 | theme: {color: '#F37254'}
|
175 | }
|
176 | RazorpayCheckout.open(options).then((data) => {
|
177 | // handle success
|
178 | alert(`Success: ${data.razorpay_payment_id}`);
|
179 | }).catch((error) => {
|
180 | // handle failure
|
181 | alert(`Error: ${error.code} | ${error.description}`);
|
182 | });
|
183 | }}>
|
184 | ```
|
185 |
|
186 | A descriptive [list of valid options for checkout][options] is available (under
|
187 | Manual Checkout column).
|
188 |
|
189 | ## Proguard Rules
|
190 | If you are using proguard for your builds, you need to add following lines to proguard files
|
191 | ```
|
192 | -keepattributes *Annotation*
|
193 | -dontwarn com.razorpay.**
|
194 | -keep class com.razorpay.** {*;}
|
195 | -optimizations !method/inlining/
|
196 | -keepclasseswithmembers class * {
|
197 | public void onPayment*(...);
|
198 | }
|
199 | ```
|
200 |
|
201 | ## Things to be taken care
|
202 |
|
203 | - The react native plugin is wrapper around native SDK, so it doesn't work with the tools like expo which doesn't support native modules.
|
204 |
|
205 | ## FAQ's
|
206 |
|
207 | - Still having trouble with integrating our payment gateway? Follow [this link](https://github.com/razorpay/react-native-razorpay/wiki/FAQ's) for more info.
|
208 |
|
209 | ## Contributing
|
210 |
|
211 | See the [CONTRIBUTING] document. Thank you, [contributors]!
|
212 |
|
213 | ## License
|
214 |
|
215 | react-native-razorpay is Copyright (c) 2020 Razorpay Software Pvt. Ltd.
|
216 | It is distributed under [the MIT License][LICENSE].
|
217 |
|
218 | We ♥ open source software!
|
219 | See [our other supported plugins / SDKs][integrations]
|
220 | or [contact us][contact] to help you with integrations.
|
221 |
|
222 | [contact]: mailto:integrations@razorpay.com?subject=Help%20with%20React%20Native "Send us a mail"
|
223 | [CONTRIBUTING]: CONTRIBUTING.md "Our contributing guidelines"
|
224 | [contributors]: https://github.com/razorpay/react-native-razorpay/graphs/contributors "List of contributors"
|
225 | [index.js]: example/SampleProject/index.js "index.js"
|
226 | [integrations]: https://razorpay.com/integrations "List of our integrations"
|
227 | [ios-docs]: https://docs.razorpay.com/v1/page/ios-integration "Documentation for the iOS Integration"
|
228 | [LICENSE]: /LICENSE "MIT License"
|
229 | [options]: https://docs.razorpay.com/docs/checkout-form#checkout-fields "Checkout Options"
|
230 | [wiki]: https://github.com/razorpay/react-native-razorpay/wiki/Manual-Installation
|