Credit Card Payments
Allowing your users to make and receive payments is one of the most common features.
Because payments involves handling extremely sensitive info, like credit card or bank details, regulatory compliance is intensive. Thankfully, in all but the most demanding use cases, you don't need to worry about any of this. Payment services like Stripe are plug-and-play; you provide them some basic information on your users, and they handle the collection and processing of payments and payouts.
The big decision point is which payments processer you are going to integrate with.
- How are users going to pay? For most use cases, credit card payments will suffice, and Stripe, being the service with the closest integration with Bubble, with reasonable fees that scale with usage, is going to be your best bet
- Will users need to get paid out? If your app is a two-sided marketplace (buyers and sellers) then the answer is likely yes. Stripe Connect is usually your best bet (see below).
- Are users paying for goods in store? Square is optimized for these, but it also can handle online payments too
- Does your client already have an account with a payments service (i.e. Paypal)? Work out if they need to stick with them, or if they're open to switching to a service that may work better (or that we're more familiar with)
This is the simplest and most well supported payments integration for Bubble. Bubble have a native Stripe plugin that makes setup easy and reliable.
All you have to do is pass some basic information to Stripe via the plugin (user's email, amount to charge them, currency, etc). This will trigger a Stripe-hosted form where the user will enter their credit card details (or confirm the charge to a saved credit card).
You have two basic payment flows:
Uses v2 of the Stripe plugin.
Uses v3 of the Stripe plugin.
This works exactly the same as above, except that app first requests the users credit card, and charges it in a separate step.
v2
This is the approach that works best with Canvas
v3 works the same as above, but with a different form UI:
With Stripe connect, whenever a user's credit card is charged, the developer can set up the payment to be routed to another user in the app.
Those users who can receive payments (i.e. sellers) need to be registered with Stripe, so they can set up which bank account their payouts should go to.
This, Register with Stripe action should be tied to button click. Often times this lives on the account page:
Clicking this button will then launch a Stripe hosted form where the user can enter their details, including the bank account where their payouts will land. See GIF below (note this shows the test version, which allows you to skip the form. In the live version the user will be required to fill out a multistep form):
When building marketplaces (one using paying another user), one of the decisions that we need to make is whether to use Stripe Connect Standard or Stripe Connect Express. You can see the full comparison here but here are a few considerations:
- Standard is a bit easier for us to set up than Express, since we can use the Bubble Plugin most of the time.
- Express has a simpler onboarding experience than Standard
- Express allows for modifying the payout schedule for the user receiving funds while Standard does not.
Last modified 1yr ago