Implement Paypal in React Native without back-end

This is my first article. I am going to show you a simple way to add the Paypal checkout feature in your React Native application using Axios ( it works with fetch too obviously).

Firstly, log in Paypal developer website, on the sidebar click SANDBOX -> Account, you will see there are 2 accounts, one is BUSINESS, one is PERSONAL

If you haven’t created a sandbox account follow this to create those 2 accounts:

1. Business Account is to receive money.
2. The personal Account is to test buying product

How to create accounts and get client_Id and secret_ID follow this

When you come to this step I assume you already have client_id and secret_key. Now jump to React Native part.

Let’s Break it out

Set up a function which is triggered when users click “BY NOW” button

• For all APIs we use https://api.sandbox.paypal.com for development mode, we will change to https://api.paypal.com for live mode.
• Set up “dataDetyails” which is the detail of the order with auth information.

const auth = {
username: //client_Id you have in previous step
password: secret_Id you have in previous step
};

• The PayPal API to authenticate your app (seller details)

const url = `https://api.sandbox.paypal.com/v1/oauth2/token`;

• The PayPal API set up and authorize order detail (dataDetails)

axios.post(`https://api.sandbox.paypal.com/v1/payments/payment`, dataDetail,
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${response.data.access_token}`
}

It returns 3 links. I’ll pick the link with data.rel == “approval_url” to redirect the app to the payment detail

Then user click Continue, it’ll redirect to one of those URLs, we set up in dataDetails, with some extra information such as paymentId payerId which are required for executing payment in the next step.

"redirect_urls": {
"return_url": "https://example.com/",
"cancel_url": "https://example.com/"
}

• “_onNavigationStateChange” function is trigger whenever our webview is redirected. We will check if the redirected URL includes “https://example.com/" which means user confirmed checkout and we will execute the payment bu using this API.

axios.post(`https://api.sandbox.paypal.com/v1/payments/payment/${paymentId}/execute`, { payer_id: payerId },
{
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`
}})

This API will return information of the order and transaction if it succeeds. if it’s failed the error will be cached. You can you that return value to custom your own transaction completion screen.

We are done implementing Paypal in React Native app with zero back-end work.

Note

• Obviously, you should keep client_Id and secret_key in a safe place not in the component as I did.
• Make sure your Business Paypal account currency is the same as currently set up in “dataDetails”
• Make sure you use qs.stringtify for data in https://api.sandbox.paypal.com/v1/oauth2/token call.

Check out my repo for more detail.

This is my first time and English is not my mother tongue, so I apologize if I’m wrong somewhere.

Please give comments and responses, any of them will be welcome.

Happy Coding.

Thanks!