A React Native interface for the PayPal Payment UI
- Add react-navive-paypal to your project
npm install --save react-native-paypal
- Add the following to android/app/build.gradle
dependencies {
// ...
compile project(':react-native-paypal')
}
- Add the following to android/settings.gradle
include ':react-native-paypal'
project(':react-native-paypal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paypal/android')
- Edit android/src/.../MainActivity.java
// ...
import br.com.vizir.rn.paypal.PayPalPackage; // <--
import br.com.vizir.rn.paypal.PayPal; // <--
import android.content.Intent; // <--
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
// ...
private static final int PAY_PAL_REQUEST_ID = 9; // <-- Can be any unique number
private PayPalPackage payPalPackage; // <--
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
payPalPackage = new PayPalPackage(this, PAY_PAL_REQUEST_ID); // <--
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
// ...
.addPackage(payPalPackage) // <--
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// ...
}
// ...
@Override
public void onActivityResult(final int requestCode, final int resultCode, final Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == PAY_PAL_REQUEST_ID) {
payPalPackage.handleActivityResult(requestCode, resultCode, data); // <--
} else {
otherModulesHandlers(requestCode, resultCode, data);
}
}
}
- Usage example:
var {PayPal} = require('React').NativeModules;
PayPalAndroid.paymentRequest({
clientId: 'AbyfNDFV53djg6w4yYgiug_JaDfBSUiYI7o6NM9HE1CQ_qk9XxbUX0nwcPXXQHaNAWYtDfphQtWB3q4R',
environment: PayPalAndroid.SANDBOX,
price: '42.00',
currency: 'USD',
description: 'PayPal Test'
}).then((confirm, payment) => console.log('Paid'); /* MUST verify payment in server*/)
.catch((error_code) => console.error('Failed to pay through PayPal'));
- Callback parameters:
If all goes OK with the payment than the paymentRequest promise is resolved with the following arguments as JSON strings:
- A confirm:
{
"client": {
"environment": "mock",
"paypal_sdk_version": "2.12.4",
"platform": "Android",
"product_name": "PayPal-Android-SDK"
},
"response": {
"create_time": "2014-02-12T22:29:49Z",
"id": "PAY-6RV70583SB702805EKEYSZ6Y",
"intent": "sale",
"state": "approved"
},
"response_type": "payment"
}
- A payment:
{
"amount": "1.00",
"currency_code": "USD",
"short_description": "PayPal Test",
"intent": "sale"
}
Handling callbacks:
PayPal.paymentRequest(...).then(function (payment, confirm) {
sendPaymentToConfirmInServer(payment, confirm);
})
If anything fails the promise will be notify an error with a code which will be one of:
- USER_CANCELLED
- INVALID_CONFIG
Handling failures:
PayPal.paymentRequest(...).catch(function (error_code) {
if (error_code == PayPal.USER_CANCELLED) {
// User didn't complete the payment
} else if (error_code == PayPal.INVALID_CONFIG) {
// Invalid config was sent to PayPal
}
})
- Automated tests
- iOS version
- Future payment (subscriptions)