PAYPAL INTEGRATION IN REACT-NATIVE

https://medium.com/@rocksinghajay

In this article, I will tell you how we can integrate PayPal payment method with Rest API calls. I am gonna tell you very simple steps. And first, we need to set up a PayPal account.

Steps to set up PayPal Account

1. Create a PayPal account( business ), if you don't have then go to official site of Paypal. After proceeding all of the steps of sign up. Then you will have all access to Paypal developer account.
2. Now then log in with Paypal credentials to Paypal developer account and configure the sandbox account.

Steps to configure the sandbox account.

1. Click on log into dashboard, enter Paypal credentials for Paypal developer account.
2. From the left side sandbox menu selects the accounts and create sandbox accounts as given below you can either use the existing accounts or create a new account.

If you want to create an account follow the below steps:

1. Click on create account.

2. Account type Personal (Buyer Account).

3. Enter any valid email and password.

4. Give a PayPal Balance.

5. Then click on create account.

6. Now the created accounts will be listed in the accounts section of the sandbox.

Generate access token for the business account

1. Select My Apps and Credentials
2. Click Generate Sandbox Access Token from Express Checkout via Braintree SDK — Sandbox Accounts heading.

Create an app

1. You can find create app option under REST API apps in My Apps and Credentials.
2. And then click on create app then fill the Application Details.
3. Give an App Name and select Sandbox developer account.
4. Then click to create App button, then you have your app under REST API apps.
5. Then click on your app you created before, your app will give you client id and client secret.

Once we have client id and client secret then we can hit rest API calls to generate an access token.

Rest API calls in react native

1. Initially, the below API will be called using basic authentication.

https://api.sandbox.paypal.com/v1/oauth2/token

2. Open postman application for hitting the API, and get the Authorization value in base64(clientid:clientsecret))

3. Set the Authorization type as Basic Auth, Username as clientid and Password as clientsecret.

Authorization

4. Set the Headers key Content-Type and its value application/x-www-form-urlencoded.

5. Set the Body key grant_type and its value client_credentials.

6. After doing all of these steps click the Send button to hit the API, then you will get Authorization value in the Headers tab. Now, we just need the api hit in the react native code to get the refresh token.

React Native Code

1. Hitting API with axios module in react native.

The response will give access_token use this access token in the next API hit.

2. Use the access_token to get id and approvalUrl.

3. After getting access_token to get id and approvalUrl, use this to navigate to approvalUrl for a client to check out.

Then you just need to create the function see the above _onNavigationStateChange function for navigating to WebView and the all payment with PayPal. See the above code then you will understand the whole process of doing Paypal integration.

I hope you enjoyed this article on PAYPAL INTEGRATION IN REACT-NATIVE

Clap 👏 for this article if you find it useful 😃

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.

Want to learn more about JavaScript, Reactjs and Life? Check out my other articles:

How to add a splash screen to react native(IOS)

A discrete way to write reactjs components

How to handle multiple form inputs in reactjs

Closures in JavaScript

Understanding Hoisting in JavaScript

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.