React native is one of the most popular and widely used Javascript cross platform mobile development framework. It is based on ReactJS thus making it easy for developers who are already good with ReactJS to delve into it. For more on React Native check here.

The Process
I was working on a project that needed Paypal integration recently and couldn’t find a stable open source React Native module for it so I came up with an implementation based on WebView.

Steps to complete before implementation

Create a Paypal account if you don’t have one already
Login to developer and create a sandbox account
Create an app with an already existing sandbox account and get a Client ID

Set up the React Native part

At this point it is assumed that most part of you app is working and perhaps you need the payment part to complete the flow process.
Since we are using WebView there will be a HTML file which we will design to suit our app user interface and a component to communicate with the WebView back and forth.

PayPal.js

Brief explanation of some functions and variables

const patchPostMessageFunction fixes the issue described here.

handleMessage function receives the data emitted from Javascript within paypal.html.

passValues function sends data from react native to paypal.html.

sent key in the state is used to mark when data has been passed from react native to WebView.

paypal.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Paypal</title>
    <script src="https://www.paypal.com/sdk/js?client-id={clientID}"></script>

    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(180deg, #3D40AD 0%, #6B6ED7 100%);
        }
        .container{
            height: 100%;
            display: flex;
            margin-left: 20px;
            margin-right: 20px;
            overflow-y: scroll;
            justify-content: center;
            align-items: center;
        }
        p{
            color: white;
            font-size: 16px;
            text-align: justify;
            margin-bottom: 50px;
        }
        #preloaderSpinner{
          display: none;
        }
    </style>
  </head>
  <body>
      <div class="container">
            <div style="justify-content: center; text-align: center">
                <img width="80px" height="80px" src="logo.png"/>
                <p>
                </p>
                <div id="paypal-button-container"></div>
            </div>
      </div>


    <script>
      function payWithPayPal(amount, orderID) {
        paypal
          .Buttons({

            createOrder: function(data, actions) {
                return new Promise(function(resolve, reject){
                  resolve(orderID);
              });
            },
            onApprove: function(data, actions) {
              window.postMessage(JSON.stringify({
                    reference: data.orderID, 
                    message: 'Transaction Successful',
                    status: 'success'
                }));
            }
          })
          .render("#paypal-button-container");
      }
      document.addEventListener("message", function(data) {
        var details = JSON.parse(data.data);
        document.querySelector('p').innerText = "You are about to fund your wallet with USD "+details.amount+" on XYZ. Click on any of the payment options to proceed. Your account will be credited instantly after payment."
        payWithPayPal(details.amount, details.orderID);
      })

    </script>
  </body>
</html>

document.addEventListener("message", function(data)) part listens for message emitted from react native and receives the data sent. This data is then parsed back to JSON, used to prepare a display message and setup PayPal SDK as well.

Transactions are initiated from the server end via an API call and a payload containing the orderID from PayPal is returned.

To initiate a transaction from the backend, PayPal SDKs are very helpful and they can be found here for different languages.

Conclusion

React Native WebView Comes in handy for situations like this as well as plotting some complex animated graphs. I would like to hear from you and learn more too.

Paypal in React Native WebView

Conclusion