How to Intrgarted PayPal Payment Gateway | Step By Step

:wave: 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 :grinning_face_with_smiling_eyes:

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 label1 to 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 in sandbox mode and 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

:one: 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.

:two: 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 :partying_face:

Congratulations… We have successfully integrated the PayPal payment gateway into our app. If you like this guide then do hit :heart: button and if you have any queries or suggestions feel free to comment below. you can also visit my website 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. :sweat_smile:


This looks really thorough and quite useful. Thank you for sharing it!


Looks very good, i guess i don’t understand it all. i know a bit about programming, and the Thunkable app does make things easier, but i couldn’t get it to work for me. i wish i could, because i think it would be perfect for what i am trying to do. i have gone over the step by step many times, but am still apparently confused. but thanks for sharing this, its the only tutorial i can find for integrating PayPal with thunkable. I have my PayPal business account, and i got the credentials, and did everything i thought to do but not successful.

I followed your instruction but the app says: Payment url = null, error code: -6, connection refused.

Can someone help?

What is the value of your access_token variable? Specifically, it’s helpful to join it with “bookend” symbols like this:

join “*” + app variable access_token + “*”

Assign that to a text input’s text and then copy and paste the result here. The spacing of that value has to be very precise. The bookends will help determine if you have something like “*Bearer*” or something like “*Bearer *” (with a trailing space).

Is the error you’re getting inside of the call Web_GetLinks' Post block or the call Web_Execute's Post block?

1 Like

Thank you.
Maybe I’ll pass directly to an ecommerce.

It looks really complete but it is definitely missing 2 fundamental elements:
1 - NOT updated to the new Blocks that have changed today in October 2022. So I expect the review.
2 - You should see all the blocks together as a complete IMG and then the individual images with comments for each block

I would need it so much to be able to use this procedure in my APP.

Thank you.

Si sembra davvero completo ma sicuramente mancano 2 elementi fondamentali:
1 - NON aggiornato ai nuovi Blocchi che oggi ad ottobre 2022 sono cambiati. Quindi mi aspetto la revisione.
2 - Si dovrebbero vedere tutti i blocchi insieme come IMG completa e poi le Immagine singole con i commenti per ogni Blocco

Ne avrei tanto bisogno per poter utilizzare detta procedura nella mia APP.


I have not used PayPal in any projects so I don’t think I can help you, sorry.

Hi, do you have link for this project?