Integrating PayHere with your React Native App is super easy with our PayHere React Native SDK. You just have to include the package in your project dependencies, call its methods to initiate a payment and fetch the payment status just after the payment. The beauty is, this SDK allows you to accept a payment within your app, without redirecting your app user to the web browser.
Open your React Native project's package.json
file and add the PayHere React Native SDK dependency.
{
"dependencies": {
"@payhere/payhere-mobilesdk-reactnative": "1.0.5"
}
}
Then run the following commands in your React Native project directory.
npm install
react-native link @payhere/payhere-mobilesdk-reactnative
Open up the (outermost) build.gradle
file in your Android project and add the repository.
allprojects {
repositories {
mavenLocal()
maven {
url "https://dl.bintray.com/payhere/payhere-android-payment"
}
}
}
Open up the AndroidManifest.xml
file in your Anrdoid project and make the following changes.
i. Declare the Android tools
namespace in the <manifest>
element.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.domain.name"
xmlns:tools="http://schemas.android.com/tools">
ii. Add the replace
merge rule for the android:allowBackup
attribute in the <application>
element.
<application tools:replace="android:allowBackup">
Open up the Podfile
file in your iOS project and make the following changes.
- Increase the platform version to iOS 11.
platform :ios, '11.0'
- Add the PayHere React Native SDK podspec.
use_react_native!(:path => config["reactNativePath"])
# Add this line just below 'use_react_native!'
pod 'payhere-mobilesdk-reactnative', :path => '../node_modules/@payhere/payhere-mobilesdk-reactnative'
a. Login to your PayHere Merchant Account and navigate to Settings > Domains and Credentials.
b. Click the 'Add Domain/App' button.
c. Select 'App' from the first dropdown.
d. Add your React Native App package name (e.g. lk.bhasha.helakuru).
e. Take note of the hash value in the last field. This is your Merchant Secret for this specific mobile App. You will need this in Step 5.
f. Click 'Request to Approve'.
If you are using a PayHere Live Merchant Account, your App Package Name must be manually reviewed by our operations team. Please allow upto a day for this review process to complete.
For more information, please contact techsupport@payhere.lk
Creates a one-time payment request charged only once. To capture the payment details from your server, read our docs.
import { Alert } from 'react-native';
import PayHere from '@payhere/payhere-mobilesdk-reactnative';
const paymentObject = {
"sandbox": true, // true if using Sandbox Merchant ID
"merchant_id": "1211149", // Replace your Merchant ID
"merchant_secret": "xyz", // See step 4e
"notify_url": "http://sample.com/notify",
"order_id": "ItemNo12345",
"items": "Hello from React Native!",
"amount": "50.00",
"currency": "LKR",
"first_name": "Saman",
"last_name": "Perera",
"email": "samanp@gmail.com",
"phone": "0771234567",
"address": "No.1, Galle Road",
"city": "Colombo",
"country": "Sri Lanka",
"delivery_address": "No. 46, Galle road, Kalutara South",
"delivery_city": "Kalutara",
"delivery_country": "Sri Lanka",
"custom_1": "",
"custom_2": ""
};
PayHere.startPayment(
paymentObject,
(paymentId) => {
console.log("Payment Completed", paymentId);
},
(errorData) => {
Alert.alert("PayHere Error", errorData);
},
() => {
console.log("Payment Dismissed");
}
);
Creates a subscription payment that is charged at a fixed frequency. To capture the payment details from your server, read our docs.
Read more about Recurring Payments in our docs.
import { Alert } from 'react-native';
import PayHere from '@payhere/payhere-mobilesdk-reactnative';
const paymentObject = {
"sandbox": true, // true if using Sandbox Merchant ID
"merchant_id": "1211149", // Replace your Merchant ID
"merchant_secret": "xyz", // See step 4e
"notify_url": "http://sample.com/notify",
"order_id": "ItemNo12345",
"items": "Hello from React Native!",
"amount": "50.00", // Recurring amount
"recurrence": "1 Month", // Recurring payment frequency
"duration": "1 Year", // Recurring payment duration
"startup_fee": "10.00", // Extra amount for first payment
"currency": "LKR",
"first_name": "Saman",
"last_name": "Perera",
"email": "samanp@gmail.com",
"phone": "0771234567",
"address": "No.1, Galle Road",
"city": "Colombo",
"country": "Sri Lanka",
"delivery_address": "No. 46, Galle road, Kalutara South",
"delivery_city": "Kalutara",
"delivery_country": "Sri Lanka",
"custom_1": "",
"custom_2": ""
};
PayHere.startPayment(
paymentObject,
(paymentId) => {
console.log("Payment Completed", paymentId);
},
(errorData) => {
Alert.alert("PayHere Error", errorData);
},
() => {
console.log("Payment Dismissed");
}
);
Tokenize customer card details for later usage with the PayHere Charging API. To capture the payment details from your server, read our docs.
Read more about Automated Charging in our docs.
import { Alert } from 'react-native';
import PayHere from '@payhere/payhere-mobilesdk-reactnative';
const paymentObject = {
"sandbox": true, // true if using Sandbox Merchant ID
"preapprove": true, // Required
"merchant_id": "1211149", // Replace your Merchant ID
"merchant_secret": "xyz", // See step 4e
"notify_url": "http://sample.com/notify",
"order_id": "ItemNo12345",
"items": "Hello from React Native!",
"currency": "LKR",
"first_name": "Saman",
"last_name": "Perera",
"email": "samanp@gmail.com",
"phone": "0771234567",
"address": "No.1, Galle Road",
"city": "Colombo",
"country": "Sri Lanka",
};
PayHere.startPayment(
paymentObject,
(paymentId) => {
console.log("Payment Completed", paymentId);
},
(errorData) => {
Alert.alert("PayHere Error", errorData);
},
() => {
console.log("Payment Dismissed");
}
);
React Native versions above 0.60.0
are supported.
The iOS component for this SDK supports iOS Versions above 11.0.
The Android component for this SDK supports Android Versions above API Level 17.
PayHere.startPayment(
paymentObject,
onCompletedHandler,
onErrorHandler,
onDismissedHandler
);
-
paymentObject
- Object The payment parameters as a Javascript Object. -
onCompletedHandler
- Function Called with the PayHere Payment ID (String) as a parameter, for succesful payments. -
onErrorHandler
- Function Called with the Error (String) as a parameter, when an error occurs. -
onDismissedHandler
- Function Called with no parameters, when the payment popup is closed before payments are processed.
You must setup a Server Endpoint that accepts the asynchronous PayHere Payment Notification POST
request, and pass its URL to the notify_url
parameter of the paymentObject
.
Each payment request type (one-time/recurring/pre-approval) sends a different payment notification. Study the following sections for more information.
- One-time Payment Details: read docs
- Recurring Payment Details: read docs
- Preapproval Details: read docs
- You can raise issues directly at the Issues section for the SDK's GitHub page.
- You can contact a PayHere Developer for technical support by mailing your issue and relevant code/screenshots to techsupport@payhere.lk