How to integrate PayPal with Bubble

Integration Mar 30, 2020

If you want to charge your Bubble app users, you can either use Stripe or PayPal. These are the two most popular and easy options available to you.

I'll write another tutorial on how to integrate Stripe, but today we'll focus on working with PayPal.

What do you need?

  • PayPal Checkout plugin by Copilot
  • PayPal developer account
  • Data structure to store the payment details
  • Workflow to trigger the checkout process
  • Payment successful and error popups/pages

Setting up the PayPal button

Install the PayPal Checkout plugin by Copilot. Next, go the editor and add the PayPal button wherever you want the user to click to start the payment. The PayPal button will be under visual elements tab on the left. If you have two different plans, you would need two buttons.

You’ll set up the buttons like this.

  1. Tick the production mode only when you are ready to make the changes public and have tested everything in sandbox (more on this below).
  2. Enter the amount you want to be charged. If it is dynamic you can enter the dynamic data here.
  3. Currency codes can be found on the PayPal website. USD — US Dollar
  4. You can decide the shape, color according to your preferences.
  5. If you need multiple currencies, it is detailed in the next section.

Multi -currency payments

If you wish to accept multiple currencies, you’ll have to make a few changes.

You don’t need to add multiple buttons corresponding to the currencies, but a few conditional statements.

First of all, you want to give the user an option to decide which currency they want to opt for. For this, I added a dropdown with the various currencies as payment options.

In the conditional section of the PayPal button that you just added, make a few changes.

When the dropdown’s option is USD, the conditional statements will tell the button to change the Currency to USD and the Amount is as per choice.

When the dropdown’s option is INR, the conditional statements will tell the button to change the Currency to INR and the Amount will be multiplied by 75. I have set the default amount in USD and to convert USD to INR, we need to multiply by 75.

Repeat this for all the currencies that you want to support.

You’ll need a PayPal Developers account as well, I’ll get to that later.

Workflows

Before we begin with the workflows, we need to get the ‘Access Token’ from PayPal. The simplest way to execute this workflow is to trigger it at Page Load.

Go the Workflow editor, right click to add an event and then select when Page is Loaded. Then add an action and select ‘PayPal API — Get Access Token’ in the Plugin actions. You’ll need to enter your Client id:Secret key in the Authorization input area.

Now, whenever the user will click on the PayPal button, a popup will appear. And depending upon that transaction status, you can decide the workflow for successful, failed and cancelled transactions.

Successful transactions

For my app, I have configured it to redirect the user to a new page and make changes to the user details in the database.

Click on the Workflow tab on the left and add a new event “When a PayPal payment has been collected”. Choose the button and then begin the workflow. My workflow is like this.

I have a data type called Payments with these fields. I update these fields with the following data. You can structure your app as per your requirements.

I then also update a few fields in User data type.

The Expiration date field is useful if I want to block the user from accessing certain pages or actions if the Expiration date < current date/time. After this, the user is navigated to the Payment Successful page. You can navigate them to the homepage, send an email or whatever you like.

Failed/Cancelled transactions

Similar to successful transactions, you can also set up workflows for failed/cancelled transactions.

Add another event “When PayPal payment has been cancelled/failed” and set up the workflow accordingly. I chose to show a popup asking the user to try again.

Setting up PayPal developers account

First, we need to have a developer’s account to get our API key and connect the plugin with our PayPal account.

Creating a developer account

Head over here to register and setup your account.

Once you’ve set it up and given all the information that they ask, you’ll need to create an app to get sandbox and live keys.

Create a new app here and then click on “My Apps and Credentials” section on the right.

Sandbox and Live Client IDs

Select the app that you just created and find the Sandbox Client ID. Copy this Client ID and go back to the Plugins section in the Bubble editor and paste it under Sandbox Client ID.

Do the same for the Live version and copy paste the Live Client ID.

Most of the heavy lifting is now done. You now need to test these transactions and you’re ready to go. Initiate a couple of transactions using the test card details and see if they reflect in your PayPal dashboard. Once you've tested and everything is working, you can push the changes live. Remember to uncheck the Production mode.

I hope you understood and found it easy to replicate. I’ll soon add a tutorial on how to use Stripe for the same purpose.


If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter

Tags