react-native-paypal

A React Native interface for the PayPal Payment UI

Setup

1. Add react-navive-paypal to your project

npm install --save react-native-paypal

2. Add the following to android/app/build.gradle

dependencies {
// ...
compile project(':react-native-paypal')
}

3. Add the following to android/settings.gradle

include ':react-native-paypal'
project(':react-native-paypal').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-paypal/android')

4. Edit android/src/.../MainActivity.java

// ...importbr.com.vizir.rn.paypal.PayPalPackage; // <--importbr.com.vizir.rn.paypal.PayPal; // <--importandroid.content.Intent; // <--publicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
// ...privatestaticfinalintPAY_PAL_REQUEST_ID = 9; // <-- Can be any unique numberprivatePayPalPackagepayPalPackage; // <--@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
// ...payPalPackage = newPayPalPackage(this, PAY_PAL_REQUEST_ID); // <--mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
// ...
.addPackage(payPalPackage) // <--
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// ...
}
// ...@OverridepublicvoidonActivityResult(finalintrequestCode, finalintresultCode, finalIntentdata) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == PAY_PAL_REQUEST_ID) {
payPalPackage.handleActivityResult(requestCode, resultCode, data); // <--
} else {
otherModulesHandlers(requestCode, resultCode, data);
}
}
}

5. 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'));

6. 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}elseif(error_code==PayPal.INVALID_CONFIG){// Invalid config was sent to PayPal}})

TODO:

• Automated tests
• iOS version
• Future payment (subscriptions)