[Paid] PayPal Extension to add payment system in you app

Extension Overview:

The "PayPal Extension By @Black_Knight " is your entry point for incorporating PayPal's strength into your App Inventor applications. With the help of this dynamic plugin, the PayPal API may be easily accessed by your apps. Its clever construction makes it simple to retrieve access tokens using client credentials, bringing up a plethora of options for creating payment features.

Blocks :point_down:

Explanation :



Step 1: Set Up Your Project

  1. Open MIT App Inventor and create a new project or open an existing one.

Step 2: Add Components

  1. Drag and drop a "WebViewer" component from the "User Interface" section onto your screen.
  2. Drag and drop the "Paypal" extension component onto the screen.

Step 3: Design Your User Interface

  1. Arrange your components on the screen as you wish. You might want to add buttons or labels for user interaction.

Step 4: Blocks Setup

  1. In the Blocks section, set up the logic to interact with the PayPal API using the extension and Web Viewer.
  2. Set the ClientId and ClientSecret properties of the PayPal extension.
  3. When the user performs an action (e.g., clicking a button), call the GetAccessToken function of the PayPal extension to obtain an access token.
  4. In the AccessTokenObtained event, call the MakePayPalPayment function to initiate a payment and obtain the payment link (href).
  5. In the PaymentInfoObtained event, parse the response and use the ExtractHrefFromLinks function to get the payment link.
  6. Load the extracted payment link into the Web Viewer using the Go to URL block.

Step 5: Handle Web Viewer Page Loaded and Redirect URLs

  1. Use the Web Viewer's PageLoaded event to detect when the PayPal payment page has loaded.
  2. In the PageLoaded event, check the URL of the Web Viewer. If the URL matches the "cancel_url," it indicates a cancelled payment.
  3. If the URL matches the "return_url," it indicates a successful payment. You can show a success message to the user in this case.
  4. after successful payment you have to use the capture_amount block to capture your price

steps in one image :

##Tutorial video:

preview video:

Testers

Thanks to @Ruben_Pietrobelli who tested this Extension and confirm that is working fine with him
Preview image
successful payment in live mode

Extension:

You can buy it via PayPal it costs 12$ after your payment you will directed to the download URL of the Extension.

© 2023 MrKoder. All rights reserved.

For inquiries, please contact: Mr koder

Visit our YouTube channel: Mr Koder's YouTube Channel

5 Likes

Also see here:

1 Like

Extension updated to include Test with sandbox in addition to Livemode

Topic updated with new functions now extension working fine

Hey @Black_Knight, I had a question:

Can the user change the amount after the payment flow has been initiated?
If no then what is the purpose of the AmountCaptured block? If the amount is fixed already then why would we want to capture it again?

Lets say that I want to sell a service to a user for a specific fixed price, I will not want the user to edit it. Which is what led me to asking this question.

Thanks!

No he cant but he has the option to pay them part by part .

the purpose of this block is just an authentication step that you run to send for PayPal to authenticate that you are the seller.
And this is their system I am not the creator of this system.

1 Like

Oh okay I asked it since I did not see you use this block in your YouTube video. Thanks though!

1 Like