Hello everyone
Today we are going to learn, How to Integrate PayPal Payment Gateway Without hosting any file on the server. We are just going to use Web API and Web Viewer component and the Paypal Payment link API method where we make three API requests to process our payment. Don’t worry the method is super simple and you can easily understand.
Why should I use this method?
Here are few important points which help you in finding the answer
- No need for a hosting server to host any file and make requests on.
- Simple and easy to integrate and use
- Option to set the desired amount
- Safe & Secure
- Can also use an external browser instead of Webview.
- It’s 100% Free to use
Please note that we are going to perform the testing in Sandbox mode. Also, I’m assuming that you already have a sandbox account for testing.
let’s get started…
Get PayPal Credentials
Visit the Paypal developer dashboard and login/register to your account. Hereunder REST API apps Create a new app or you can use the older one too. Now choose the app and get the Client ID and Secret. You can use the Authorization Tool to get the Basic Authorization token or can create it on your own as it is just a Base64 Encoded string composed of Client ID:Secret.
Designer Part
Here we are going to use,
- A button to start the payment process
- A Label
label1to log steps [Not required] - Three Web components. 1st to generate an access token. 2nd generate payment links & 3rd to process the payment and verify it.
- A Web Viewer to load payment approval URL, So users can log in to their PayPal and approve the payment.
- And a clock component to track the change of web viewer URL so we can detect if the payment was canceled or approved by the user.
Blocks Part
In the blocks section/part. first, we have to create four initialize variables
-
API_URL - Its value will be
https://api-m.sandbox.paypal.comin sandbox mode andhttps://api-m.paypal.com. Visit PayPal docs for more info on this - access_token - To store access token when we exchange the API credentials.
- payment_id - To Store the Payment ID generated by PayPal for the payment request.
- execute_url - To store execute URL so we can make a request on it after the user approval to complete the payment process.
Now here the payment will be done in three easy steps
Exchange your API credentials for an access token
For this, we’ll make a request on {API_URL}/v1/oauth2/token and get the access token.
Now here on response, We’ll store the access_token in our initialize variable.
Create PayPal payment
For that under the response of Web_GetToken, we’ll make a request on {API_URL}/v1/payments/payment to get Payment_ID and Payment Links.
Please note that you are free to change the total (is the amount), currency, and invoice_number. Also, these three are the required fields we have to provide in the API requests.
Click here to check all parameters that you can provide with the API request.
Now we’ll make a POST request with the above details.
In response, note that the status code will be 201 instead of 200. View JSON response example on PayPal docs. But here we’ll use Object blocks to parse and get Payment ID, Approval URL, and the execute URL. Also, we’ll store the ID and execute the URL in initialize variables.
Now we’ll hide the Button ( done additionally ) and load approval_url on the Web Viewer and make it visible. Along with this, we’ll start the clock in the loop to keep checking the current URL of the Web Viewer.
Get payment approval
Now when the clock fires, we’ll keep on checking if the Web Viewer URL.
If the URL contains cancelled-example it means the user has canceled the payment. Else if the URL contains redirect-example We’ll extract the PayerID from the URL. [ Paypal include this in the parameter of the return URL ]
Now we’ll make our 3rd and a final POST request on execut_url and provide the PayerID in the body of the request.
In response, we just have to check if the value of state is approved or not. If it’s approved then the payment is done successfully else it’s failed.
All DONE 
Congratulations… We have successfully integrated the PayPal payment gateway into our app. If you like this guide then do hit 
button and if you have any queries or suggestions feel free to comment below. you can also visit my website cttricks.com for more amazing guides.
Also, I would like to thank @domhnallohanlon and #Staffs for the awesome guides on thunkable docs. I was stuck while using the Objects blocks and the Web Viewer, as it was not loading the URL when I set Screen>Scrollable = true. 
