Bubble is an amazing application for quickly building MVPs and getting feedback on them. Bubble is the perfect tool to use for a MVP.
However, if you want to be able to generate revenue from your app, then you'll need to use Stripe or PayPal in your app. Both are easy to set up and handle recurring payments by default.
In this tutorial, we'll cover how to integrate PayPal with your Bubble application.
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
Add the PayPal Checkout plugin by Copilot. Next, go to 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 different buttons.
The buttons will be set up like this.
- Tick the production mode only when you are ready to make the changes public and have tested everything in sandbox (more on this below).
- Enter the amount you want to be charged. If it is dynamic you can enter the dynamic data here.
- Currency codes can be found on the PayPal website. USD — US Dollar
- You can decide the shape, color according to your preferences.
- If you need multiple currencies, it is detailed in the next section.
Multi -currency payments
If you want to accept multiple currencies, you’ll have to make some changes.
You could add a few conditional statements to accept multiple currencies.
First of all, you want to give the user the option to choose the currency they wish to use. I added a dropdown with the various currencies as payment options.
Make a few changes in the conditional section of the PayPal button that you just added.
When the dropdown's option is USD, the button will change the Currency to USD, and the Amount will be based on your choice.
When the dropdown's option is INR, the button will change the Currency to INR, and the Amount will be multiplied by 75. The default amount is in USD, and we need to multiply it by 75 to get the INR equivalent.
Copy and paste this code to support all the currencies that you want.
You'll need a PayPal Developers account as well. I'll get to that later.
In order to get started with the workflows, we need to first obtain the ‘Access Token’ from PayPal. The easiest way to execute this workflow is to run it when the page loads.
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.
Whenever the user clicks on the PayPal button, a popup will appear.
Depending on the transaction status, you can decide the workflow for successful, failed and cancelled transactions.
My app will automatically redirect the user to a new page and update their details in the database.
Click on the Workflow tab on the left and add a new event, “When a PayPal payment has been collected”.
Select the button and then start the process.
The Payments data type has the following fields. I update these fields with the following information.
You can customize your app as per your preferences.
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.
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.
The difficult part is now finished. You are now ready to test these transactions.
Try processing a couple of transactions using the test card details and see if they show up in your PayPal dashboard. After you have tested everything and it is working, you can push the changes live. Make sure to uncheck the Production mode.