I recently undertook the task of integrating PayPal into a React Native project. My initial approach followed the guides of codecentric and Logrocket, which relied on utilizing PayPal's Smart Payment Buttons within a React (web) application. However, I found this method to be somewhat suboptimal for two reasons.
Firstly, it needs an additional dependency - the React (web) application hosting PayPal's Smart Payment Buttons. This, coupled with the bridging setup required to facilitate communication between React Native Webview and the React Web deployment, adds unnecessary complexity.
Secondly, you start the payment Process with PayPal's Smart Payment Buttons, which directly communicate with the paypal api and in the end return you an order id, which you then need to report to your own API again. But what about cases, where users should not be able to start a new payment process, because they have already paid the product or because they already have a PayPal subscription (and need to upgrade). You have to handle these things in the frontend and ask your API before you show PayPal's Smart Payment Buttons to your users. Another unnecessary step that adds to application complexity.
Alternatively, we can streamline the process by leveraging PayPal's HATEOAS links. When creating a PayPal order via the PayPal REST API, PayPal returns a payer_action link.
Similarly, when creating a PayPal subscription, an approve link is provided.
By utilizing these links generated via our API and transmitting them to the React Native app, we can stick them into e.g. React Native Webview and the user can start the payment approval process.
Top comments (0)