PayPal payment integration for REACT NATIVE with latest lib android + ios

Question

Can any body provide a swipe solution with latest react-native PayPal library ?

I have spent a week but not getting a proper solution.

There are many old and incomplete solution on net but not a proper and complete solution for new developers.

Resources :

https://www.npmjs.com/package/react-native-paypal

https://github.com/MattFoley/react-native-paypal

https://github.com/sharafat/sample-code-php

Answer 1

Unfortunately, there isn't a single repo that is up to date and maintains by the community as far as I know. That's why your options are limited.

Utilize PayPal APIs

PayPal has various APIs for different use cases that you can pick up without worrying about the SDK itself. They give you lots of those functionalities, sure it might not be smooth as the SDK itself, but it can solve your problem, nicely.

In case you are developing for both mobile and the web, you can use your APIs for both of them. Becuase they do not depend on the specific platform.

Solution

My solution for this is pretty straightforward. Do not use the PayPal SDK if you don't want to mess with Native functionality and not exactly sure why you need it. PayPal has a various set of APIs that you can use on your server side or client side without touching the native code. Here I give you a simple scenario that using ExpressCheckout APIs and handle on the server side.

For all below steps, you can use PHP, Node or any other server-side languages. I only briefly tell you the steps and the rest are on you!

1. Create an access token for your transaction. Follow below link for details.

https://developer.paypal.com/docs/integration/direct/make-your-first-call

2. Create a payment transaction. You need to pass your payment details such as currency and total amount. In this step, you can pass your 'return_url' and cancel_url too. Make sure to attach your order id or order code to both of them, so you can track the orders when either of them triggered and change your order status accordingly.

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-payments-api/create-express-checkout-payments/

3. Send the payment URL to React Native and load it by WebView. In this Step, you can use the WebView component in React Native and load the PayPal URL inside. Later for checking whether the payment is done, you can either use a throttling function or use other alternatives such as WebSocket. The goal here is to know whether the transaction is done or canceled.

When the payment is done. get rid of the WebView and redirect the user to thank you page and any other things you need to do after the user payment is done.

There might be more elegant ways to do this, but I believe for simple scenarios (or even more!) this is sufficient.