Promise based API

README.md

@@ -2,6 +2,9 @@
 
 React Native wrapper around our Android and iOS mobile SDKs
 
+To know more about Razorpay payment flow and steps involved, please read up here:
+<https://docs.razorpay.com/docs>
+
 ## Installation
 
 Run the following on terminal from your project directory:
@@ -83,25 +86,13 @@ link iOS SDK as explained in the previous section:
 
 ### Steps
 
-1. Import Razorpay module to your component:
-```js
-import { Razorpay } from 'react-native-razorpay';
-const { RazorpayCheckout, RazorpayEventEmitter } = Razorpay;
-```
-2. Instantiate an event emitter with `RazorpayEventEmitter`:
-```js
-const razorpayEvents = new NativeEventEmitter(RazorpayEventEmitter);
-```
-3. Add payment event listeners to your component, preferably in `componentWillMount`:
+1. Import RazorpayCheckout module to your component:
 ```js
-razorpayEvents.addListener('onPaymentError', (data) => {
-  alert("Error: " + data.code + " | " + data.description)
-});
-razorpayEvents.addListener('onPaymentSuccess', (data) => {
-  alert("Success: " + data.payment_id)
-});
+import { RazorpayCheckout } from 'react-native-razorpay';
 ```
-4. Call RazorpayCheckout's `open` method with `options`, preferably on a user action:
+2. Call RazorpayCheckout's `open` method with `options` (preferably on a user
+action) as a **JS Promise**. The `then` part corresponds to a successful payment,
+and the `catch` part corresponds to payment failure.
 ```js
 <TouchableHighlight onPress={() => {
  var options = {
@@ -111,17 +102,22 @@ razorpayEvents.addListener('onPaymentSuccess', (data) => {
    key: 'rzp_test_1DP5mmOlF5G5ag',
    amount: '5000',
    name: 'foo',
-   prefill: {email: '[email protected]', contact: '8879524924', name: 'Pranav Gupta'},
+   prefill: {
+     email: '[email protected]',
+     contact: '8955806560',
+     name: 'Akshay Bhalotia'
+   },
    theme: {color: '#F37254'}
  }
- RazorpayCheckout.open(options)
+ RazorpayCheckout.open(options).then(data =>
+   { alert("Success: " + data.payment_id) }
+ ).catch(data =>
+   { alert("Error: " + data.code + " | " + data.description) }
+ );
 }}>
 ```
-5. Stop listening for payment events, preferably in `componentWillMount`:
-```js
-razorpayEvents.remove();
-```
-
+A descriptive [list of valid options for checkout][options] is available (under
+Manual Checkout column).
 
 ## Contributing
 
@@ -143,3 +139,4 @@ or [contact us][contact] to help you with integrations.
 [integrations]: https://razorpay.com/integrations "List of our integrations"
 [ios-docs]: https://docs.razorpay.com/v1/page/ios-integration "Documentation for the iOS Integration"
 [LICENSE]: /LICENSE "MIT License"
+[options]: https://docs.razorpay.com/docs/checkout-form#checkout-fields "Checkout Options"

RazorpayCheckout.js

@@ -2,7 +2,30 @@
 
 import { NativeModules, NativeEventEmitter } from 'react-native';
 
-export const Razorpay = {
-  RazorpayCheckout: NativeModules.RazorpayCheckout,
-  RazorpayEventEmitter: NativeModules.RazorpayEventEmitter
-};
+const razorpayEvents = new NativeEventEmitter(NativeModules.RazorpayEventEmitter);
+
+class RazorpayCheckout {
+
+  static open(options, successCallback, errorCallback) {
+    return new Promise(function(resolve, reject) {
+      let removeSubscriptions = () => {
+        razorpayEvents.removeAllListeners('Razorpay::onPaymentSuccess');
+        razorpayEvents.removeAllListeners('Razorpay::onPaymentError');
+      };
+      razorpayEvents.addListener('Razorpay::onPaymentSuccess', (data) => {
+        let resolveFn = successCallback || resolve;
+        resolveFn(data);
+        removeSubscriptions();
+      });
+      razorpayEvents.addListener('Razorpay::onPaymentError', (data) => {
+        let rejectFn = errorCallback || reject;
+        rejectFn(data);
+        removeSubscriptions();
+      });
+      NativeModules.RazorpayCheckout.open(options);
+    });
+  }
+
+}
+
+export {RazorpayCheckout};

android/src/main/java/com/razorpay/rn/RazorpayModule.java

@@ -115,15 +115,15 @@ public void onActivityResult(int requestCode, int resultCode, Intent data){
     if (data != null) {
       Bundle extras = data.getExtras();
       if (extras != null) {
-        result = extras.getString("RESULT"); 
-      } 
+        result = extras.getString("RESULT");
+      }
     }
     if (resultCode == 1) {
       try {
         JSONObject resultJson = new JSONObject(result);
         WritableMap successParams = Arguments.createMap();
         successParams.putString(MAP_KEY_PAYMENT_ID, resultJson.getString(MAP_KEY_RZP_PAYMENT_ID));
-        sendEvent("onPaymentSuccess", successParams);  
+        sendEvent("Razorpay::onPaymentSuccess", successParams);
       } catch(Exception e){}
     }
     else {
@@ -133,8 +133,8 @@ public void onActivityResult(int requestCode, int resultCode, Intent data){
       WritableMap errorParams = Arguments.createMap();
       errorParams.putInt(MAP_KEY_ERROR_CODE, resultCode);
       errorParams.putString(MAP_KEY_ERROR_DESC, result);
-      sendEvent("onPaymentError", errorParams);
-    }   
+      sendEvent("Razorpay::onPaymentError", errorParams);
+    }
   }
 
   private void sendEvent(String eventName, @Nullable WritableMap params) {

example/index.js

@@ -15,47 +15,40 @@ import {
   NativeEventEmitter
 } from 'react-native';
 
-import { Razorpay } from 'react-native-razorpay';
-const { RazorpayCheckout, RazorpayEventEmitter } = Razorpay;
-
-const razorpayEvents = new NativeEventEmitter(RazorpayEventEmitter);
+import { RazorpayCheckout } from 'react-native-razorpay';
 
 class example extends Component {
-  componentWillMount() {
-    razorpayEvents.addListener('onPaymentError', (data) => {
-      alert("Error: " + data.code + " | " + data.description)
-    });
-    razorpayEvents.addListener('onPaymentSuccess', (data) => {
-      alert("Success: " + data.payment_id)
-    });
-  }
 
   render() {
     return (
       <View style={styles.container}>
        <TouchableHighlight onPress={() => {
         var options = {
-          description: 'Credits towards consultation',
-          image: 'https://i.imgur.com/3g7nmJC.png',
-          currency: 'INR',
-          key: 'rzp_test_1DP5mmOlF5G5ag',
-          amount: '5000',
-          name: 'foo',
-          prefill: {email: '[email protected]', contact: '8879524924', name: 'Pranav Gupta'},
-          theme: {color: '#F37254'}
+         description: 'Credits towards consultation',
+         image: 'https://i.imgur.com/3g7nmJC.png',
+         currency: 'INR',
+         key: 'rzp_test_1DP5mmOlF5G5ag',
+         amount: '5000',
+         name: 'foo',
+         prefill: {
+           email: '[email protected]',
+           contact: '8955806560',
+           name: 'Akshay Bhalotia'
+         },
+         theme: {color: '#F37254'}
         }
-        RazorpayCheckout.open(options)
+        RazorpayCheckout.open(options).then(data =>
+          { alert("Success: " + data.payment_id) }
+        ).catch(data =>
+          { alert("Error: " + data.code + " | " + data.description) }
+        );
        }}>
       <Text style = {styles.text}>Pay</Text>
     </TouchableHighlight>
     </View>
     );
   }
 
-  componentWillUnmount () {
-    razorpayEvents.remove();
-  }
-
 }
 
 const styles = StyleSheet.create({

example/package.json

@@ -8,6 +8,6 @@
   "dependencies": {
     "react": ">=15.0.0",
     "react-native": ">=0.30.0",
-    "react-native-razorpay": ">=1.0.0"
+    "react-native-razorpay": "./../"
   }
 }

ios/RazorpayEventEmitter.m

@@ -19,7 +19,7 @@ @implementation RazorpayEventEmitter
 RCT_EXPORT_MODULE();
 
 - (NSArray<NSString *> *)supportedEvents {
-  return @[ @"onPaymentSuccess", @"onPaymentError" ];
+  return @[ @"Razorpay::onPaymentSuccess", @"Razorpay::onPaymentError" ];
 }
 
 - (void)startObserving {
@@ -38,11 +38,13 @@ - (void)stopObserving {
 }
 
 - (void)paymentSuccess:(NSNotification *)notification {
-  [self sendEventWithName:@"onPaymentSuccess" body:notification.userInfo];
+  [self sendEventWithName:@"Razorpay::onPaymentSuccess"
+                     body:notification.userInfo];
 }
 
 - (void)paymentError:(NSNotification *)notification {
-  [self sendEventWithName:@"onPaymentError" body:notification.userInfo];
+  [self sendEventWithName:@"Razorpay::onPaymentError"
+                     body:notification.userInfo];
 }
 
 + (void)onPaymentSuccess:(NSString *)payment_id {