Services Plugins FAQs

Add Wallet/Credit System on Bubble App Using PayPal

Hi everyone,

I’m looking to implement a wallet system in my Bubble app using PayPal as the payment gateway. Here’s the workflow I have in mind:

  1. Dropdown Menu for Funding Options
  • Create a dropdown menu with three options for users to fund their wallet: $20, $50 and $100.

  • This dropdown will allow users to select the amount they want to add to their wallet.

  1. Custom “Fund Wallet” Button
  • Instead of using the default PayPal buttons, I want to create a custom button with the text “Fund Wallet.”

  • This button should trigger the PayPal payment process based on the amount selected in the dropdown menu.

  1. Charge User Based on Selected Amount
  • When the user clicks the “Fund Wallet” button, the app should charge the user the amount they selected in the dropdown menu via PayPal.
  1. Redirect to Dashboard and Update Wallet Balance
  • After a successful payment, the user should be redirected back to their dashboard.

  • The user’s in-app wallet balance should be incremented by the amount they paid.

  • The updated balance should be displayed clearly on the dashboard.

Has anyone implemented a similar wallet system in Bubble using PayPal? Any tips or plugins you recommend?

Hey @commentify.org ,

Thanks for sharing your plan to implement a wallet system in your Bubble app using PayPal—I love the workflow you’ve outlined! It’s a great way to give users a seamless funding experience, and I’m happy to help with some general advice and plugin recommendations from Zeroqode to make this happen.

Your setup—using a dropdown for funding options, a custom “Fund Wallet” button, charging via PayPal, and updating the wallet balance on the dashboard—is totally doable in Bubble. Here’s how you can approach it:

  • Dropdown for Funding Options: You’re spot on with creating a dropdown menu for the $20, $50, and $100 options. In Bubble, you can set this up by adding a Dropdown element and manually defining these choices. Store the selected value in a custom state (e.g., selected_amount) so you can reference it later in your workflow.
  • Custom “Fund Wallet” Button: Using a custom button labeled “Fund Wallet” is a great idea for a better user experience. Add a Button element in Bubble, set the text to “Fund Wallet,” and use it to trigger the PayPal payment workflow based on the dropdown’s selected amount.
  • Charge User via PayPal: To handle the PayPal payment, you’ll need a plugin to integrate PayPal’s payment gateway. I recommend checking out Zeroqode’s PayPal Checkout Plugin. This plugin lets you set up a secure checkout flow, charge users dynamically based on the amount (like the one from your dropdown), and handle the payment process. In your workflow, when the “Fund Wallet” button is clicked, use the plugin’s “Checkout” action and pass the selected_amount as the payment amount.
  • Redirect and Update Wallet Balance: After a successful payment, the PayPal Checkout Plugin can trigger an event (like “Payment Success”) that you can use in your workflow. On this event, redirect the user to their dashboard page using Bubble’s “Go to page” action. To update the wallet balance, you’ll need to store the user’s balance in your Bubble database (e.g., in a “Wallet” data type with a “Balance” field). In the same workflow, add an action to “Make changes to a thing” to increment the user’s balance by the selected_amount. Then, on the dashboard, display the updated balance using a Text element bound to the user’s Wallet Balance field.

For a smoother experience, you might also find Zeroqode’s Bubble Page to PDF Converter Plugin helpful if you want to generate receipts for wallet funding transactions. It’s not directly related to the payment process, but it can add a nice touch for users who want a record of their transactions.

A few additional tips:

  • Make sure your PayPal business account is set up and you’ve added your API credentials (Client ID and Secret) to the plugin settings. You can get these from the PayPal Developer Dashboard.
  • Test the payment flow in PayPal’s sandbox mode first to ensure everything works before going live.
  • If the balance isn’t updating on the dashboard right away, add a slight delay (e.g., 1 second) before redirecting to give the database time to update, or use Bubble’s “Refresh page” action after redirecting.

I hope this helps get your wallet system up and running! If you run into any snags or have more questions, feel free to reply.

Best regards,
Support Team

Browse all Zeroqode Plugins for bubble

Banner_Last3