Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Readme for Expo Users #420

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -198,9 +198,66 @@ If you are using proguard for your builds, you need to add following lines to pr
}
```

## For Expo user
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For UPI Intent?

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": ["tez", "phonepe", "paytmmp"] 
      }
    }
  }
}


- By following these procedures, the integration with Expo project (only supported in <a href="https://docs.expo.dev/workflow/prebuild/" target="_blank">Prebuild Application</a>.) is quite easy.

### Steps


1. Run the installation command

```js
yarn add react-native-razorpay or npm install --save react-native-razorpay
```

2. Run the eas build command based on your build enviremont

- choose the profile from <a href="https://docs.expo.dev/workflow/prebuild/" target="_blank">eas.json</a> as per the build enviroment

```js
eas build --profile='select profile from eas.json'
```

3. Import RazorpayCheckout module to your component:

```js
import RazorpayCheckout from 'react-native-razorpay';
```

4. Since now you have prebuild application
Call `RazorpayCheckout.open` method with the payment `options`. The method
returns a **JS Promise** where `then` part corresponds to a successful payment
and the `catch` part corresponds to payment failure.
```js
<TouchableHighlight onPress={() => {
var options = {
description: 'Credits towards consultation',
image: 'https://i.imgur.com/3g7nmJC.png',
currency: 'INR',
key: '', // Your api key
amount: '5000',
name: 'foo',
prefill: {
email: 'void@razorpay.com',
contact: '9191919191',
name: 'Razorpay Software'
},
theme: {color: '#F37254'}
}
RazorpayCheckout.open(options).then((data) => {
// handle success
alert(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
// handle failure
alert(`Error: ${error.code} | ${error.description}`);
});
}}>
```

## Things to be taken care

- 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.
- While the orderId key is required in live mode, it should not be passed in test mode.

## FAQ's

Expand Down