📣 This library is not actively maintained anymore. Feel free to create PRs with fixes I'll merge and update npm version
npm install react-native-liqpay --savecd ios && pod installThat's all! Ready for use on iOS and Android.
$ react-native link react-native-liqpay
Manual installation
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-liqpayand addRNLiqpay.xcodeproj - In XCode, in the project navigator, select your project. From
RNLiqpay.xcodeproj/Producs/, addlibRNLiqpay.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)
- Open up
android/app/src/main/java/[...]/MainActivity.java- Add
import com.reactlibrary.RNReactNativeLiqpayPackage;to the imports at the top of the file - Add
new RNReactNativeLiqpayPackage()to the list returned by thegetPackages()method
- Add
- Append the following lines to
android/settings.gradle:
include ':react-native-liqpay'
project(':react-native-liqpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-liqpay/android')- Insert the following lines inside the dependencies block in
android/app/build.gradle:
compile project(':react-native-liqpay')- Insert the following lines inside the dependencies block in
android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<activity android:name="ua.privatbank.paylibliqpay.CheckoutActivity"/>- Insert the following lines inside the dependencies block in
android/app/src/main/java/com/[yourappname]/MainApplication.java:
return Arrays.<ReactPackage>asList(
new RNLiqpayPackage()
);- To avoid problems with compile SDK version insert following inside
android/buid.gradle
subprojects {
afterEvaluate {
project -> if (project.hasProperty("android")) {
android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
}
}
}
}
- Request permissions
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
// open liqpay
}
} catch (e) {
console.log(e);
}
} else {
// open liqpay
}Note Please don't forget that we work in a client environment. So it's very very bad pratice to store and use private key in app. You must make data and signature on your backend env. Then you can use LiqpayCheckoutBase64 to make request.
Get the API keys here: https://www.liqpay.ua/ru/admin/business
More info on the params: https://www.liqpay.ua/documentation/data_signature
Info on LiPay Checkout: https://www.liqpay.ua/documentation/api/aquiring/checkout/doc
Example checkout:
import { LiqpayCheckout } from 'react-native-liqpay';
import { Button, View } from 'react-native';
class Checkout extends React.Component {
state = {
showCheckout: false,
}
renderCheckout() {
return(
<LiqpayCheckout
signature="..."
privateKey="..."
params={{
public_key: '...',
action: 'pay', // Possible values: 'pay' - payment, 'hold' - blocking funds on the sender's account, 'subscribe' - regular payment, 'paydonate' - donation, auth - preauthorization of the card
version: '3', // API version
amount: '10',
currency: 'UAH',
description: 'description text',
order_id: 'order_id_X', // The maximum length is 255 characters
product_description: 'product_description',
sandbox: '1', // for testing
}}
onLiqpaySuccess={res => {
console.log(res);
}}
onLiqpayError={error => {
console.error(error);
}}
/>
);
}
render() {
return (
<View>
<Button title="Pay" onPress={() => this.showCheckout()} />
{this.state.showCheckout && this.renderCheckout()}
</View>
);
}
}import { LiqpayCheckoutBase64 } from 'react-native-liqpay';
// About data and signature https://www.liqpay.ua/documentation/data_signature
// Signature calculator https://www.liqpay.ua/documentation/forming_test_data/
... <render>
<LiqpayCheckoutBase64
signature="sig"
paramsBase64="base64encodedJSONobject"
onLiqpaySuccess={res => {
console.log(res);
}}
onLiqpayError={error => {
console.log(error);
}}
/>
...todo
todo
