$ npm install react-native-plugpag --save
$ react-native link react-native-plugpag
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-plugpag
and addRNPlugpag.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNPlugpag.a
to 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.nextar.rn.plugpag.RNPlugpagPackage;
to the imports at the top of the file - Add
new RNPlugpagPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-plugpag' project(':react-native-plugpag').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plugpag/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-plugpag')
import { RNPlugPag } from 'react-native-plugpag';
RNPlugPag.PAYMENT_CREDIT - Set the payment as CREDIT. RNPlugPag.PAYMENT_DEBIT - Set the payment as DEBIT. RNPlugPag.PAYMENT_VOUCHER - Set the payment as VOUCHER.
RNPlugPag.INSTALLMENT_TYPE_A_VISTA - Set the installment type as AT SIGHT (or A VISTA if you are brazilian) :) RNPlugPag.INSTALLMENT_TYPE_PARC_VENDEDOR - Set the installment type as PARCELADO (please, help me to translate this).
RNPlugPag.setAppInfo(appName, appVersion) - Will set the app informations. (required) RNPlugPag.setDeviceInfo(deviceName | deviceMac) - Will set PagSeguro device name or mac address. RNPlugPag.isAuthenticated - Will return a promise indicating if the reader is authenticated or not. RNPlugPag.requestAuthentication - Will open PagSeguro authentication login. RNPlugPag.checkout(request) - Will start the checkout process and returns a promise. The parameter request expects these format:
{
paymentType: RNPlugPag.PAYMENT_DEBIT,
installments: 1,
code: 'SELL_CODE',
amount: '10000',
}
#1 - Checkout R$ 100,00 using DEBIT CARD:
import { RNPlugPag } from 'react-native-plugpag';
class MyPaymentClass {
myPaymentMethod() {
RNPlugPag.setAppInfo('MyApp', '1.0.0');
RNPlugPag.setDeviceInfo('W-999999');
RNPlugPag.isAuthenticated().then((result) => {
if (result.isAuthenticated) {
const request = {
paymentType: RNPlugPag.PAYMENT_DEBIT,
installments: 1,
code: 'RNPlugPag',
amount: '100,00',
};
RNPlugPag.checkout(request).then(checkoutResult => {
console.log('result', checkoutResult);
}).catch(error => {
console.log('error', error);
});
}
});
}
}
#2 - Invoking authentication window:
import { RNPlugPag } from 'react-native-plugpag';
class MyPaymentClass {
myPaymentMethod() {
RNPlugPag.setAppInfo('MyApp', '1.0.0');
RNPlugPag.requestAuthentication();
}
}
#3 - Checkout R$ 123,45 using CREDIT CARD with 5 installments:
import { RNPlugPag } from 'react-native-plugpag';
class MyPaymentClass {
myPaymentMethod() {
RNPlugPag.setAppInfo('MyApp', '1.0.0');
RNPlugPag.setDeviceInfo('W-999999');
RNPlugPag.isAuthenticated().then((result) => {
if (result.isAuthenticated) {
const request = {
paymentType: RNPlugPag.PAYMENT_CREDIT,
installments: 5,
code: 'RNPlugPag',
amount: '123,45',
};
RNPlugPag.checkout(request).then(checkoutResult => {
console.log('result', checkoutResult);
}).catch(error => {
console.log('error', error);
});
}
});
}
}
Feel free to contribute :)