New Plugin - Stripe Checkout for Connected Accounts

[jakesing]

I see that 7 apps are now using my new plugin, so I figured I should create a forum post so people can ask any questions.

I wanted to pass customer to Stripe Checkout on behalf of a connected account, and assumed I was not the only one for whom this was relevant, so I made a plug in. Link is below.

Bubble - Plugin Editor

The instructions are pretty simple.

1. You must create a Checkout Session first, before redirecting to checkout. See Stripe Docs (here).
2. In your workflow, select ‘redirect to checkout’
3. Insert (1) your Stripe Account Publishable Key. Make this is either test or development. (2) Connected Account ID for the relevant connected seller [please note, I actually made this field optional, so you can use this plugin for regular checkout redirects as well]. (3) the Checkout Session ID mentioned #1.
   
   

Enjoy!

[chris.anderson]

Hey there,

Please could you provide an example of how to set up and use this please, including the checkout session creation? Does this need to be used alongside the standard Stripe plugin by Bubble or is this instead of?

My use case is using the Stripe Connect Standard and I’d like to also pass in the amount.

Many thanks in advance!

[chris.anderson]

@jakesing bump - would really appreciate your help on this if you get chance

[jakesing]

Hi @chris.anderson - sorry for the slow response. I built this specifically to be able to redirect to Stripe Checkout WITH STRIPE CONNECT. This is the critical piece - I believe there are other options if all you want to do is redirect to Stripe. I did not see any options that allowed me to use Connect and Checkout together. If this is not your use case, you probably can still use the plugin, as I made the ‘connected account ID’ optional.

I’m not sure exactly where you’re hitting a snag, but I’ll try to explain how I used it in my app:

1. You need a Stripe Checkout session first, before redirecting. I did this using my own API (in Bubble’s API connector)
   

   
   
   In this call, you define all the parameters you can see above - you can feel free to copy this if you would like!

2. In the workflow where you want to redirect to checkout, first you use this API to create the Checkout Session. Then in the next step in the workflow you can use the plugin to redirect.
   

   
   
   Make sure you use the Checkout Session ID that was the result of the previous step.

That’s pretty much it! Let me know how that goes–

Jake

[chris.anderson]

Thanks @jakesing, really appreciate you coming back to me.

Yep, you’re correct, I want to use this with Stripe Connect. My use case is as follows:

1. Customer will go to a Seller Profile Page
2. On the Seller Profile Page the Customer will click a dedicated button to set an amount or enter a custom amount in £’s.
3. This will take them to a checkout page to enter card details and pay, with a split of the amount going to the platform and Seller (Similar to the example provided by Stripe: https://checkout.stripe.com/pay/ppage_1GrpfHFKnpzPB0MXIzpdZPpn#fidkdWxOYHwnPyd1blpxYHZxWm9CPHY2XUhhVm9fQzxOYWgwYjA8f2lcYScpJ3dgY2B3d2B3SndsYmxrJz8nbXFxdXY%2FKip2cXdsdWArZmpoJyknaWpmZGlgJz9rcGlpKSdobGF2Jz9%2BJ2JwbGEnPydLRCcpJ2hwbGEnPydjNjFhYTNhYCgzMD0zKDEyPTQoPDxgMihmMzIwNj1jZ2M2ZzMnKSd2bGEnPyc1Zjw8NmA8MygwYGYzKDE8NmcoPDxnMygxZDI1MGA0MDIxNmQneCknZ2BxZHYnP15YeCUl)

So my question is from a Bubble Workflow point of view, where does this all fit in? Are you able to share your workflow or critique the following please? Would I be correct in assuming it’s something like this:

1. Click on dedicated amount button (step 2 in the use case above)
2. Post API call to get Stripe Checkout Session
3. Use your plugin to redirect to Check out page using the connected account from the seller’s profile page, the checkout session from step 2 in this work flow and end up on payment page (ie.e Take the Customer to the page described in step 3 in the use case above)
4. Where do I set the amount? Does your “Redirect to checkout” go straight to the checkout page or us there another step before this, like “Charge Customer” in the Stripe plugin?

As I’m new to Bubble.io and I’m having difficulty setting up the API to get the Check Out Session I’ve not been able to test this for myself. I was hoping I could combine the features of a couple of plugin’s as there are a few on Bubble but I cannot find any which create the Check Out session to then pass to your plugin.

So first things first. Could you please advise if my workflow described above is correct and whether your plugin is the right tool for the job? If so, then great and I’ll get working on the other things. Could you also share the larger screenshot of the API connector including the shared headers if applicable?

Really appreciate your help and time on this!

[jakesing]

Hi Chris,

In my use case, customers are signing up for a subscription, not a one-off transaction. I believe this plugin should still work (because ultimately the logic of the transaction exists in the checkout session, not the redirect operation), but I have not tested it for that use case yet. So maybe you can help me with that

On that point, your workflow looks right to me. You’ll need to change your Checkout API call from my example. Looking at the Stripe docs, the way I am telling Checkout to use a subscription is in ‘mode’. In your case, I think you want to choose ‘payment’.

The other thing you want to do, it seems would be:

1. Price: In the documentation, see ‘line_items’, and underneath there, ‘price’. I think you pass this in to the API with the key line_items[0][price].
2. Splitting payments: See here in the docs. I believe what you’ll want to do here is add a key of payment_intent_data[0].application_fee_amount and set that to the amount of percentage you are charging the seller.

Once you create these keys in the API call in Bubble, you can pass dynamic values to the actual Bubble workflow.

In terms of shared headers, I won’t share a screenshot with you because it has my own Stripe keys. I only used one shared header:
Key: Content-Type, Value: application/x-www-form-urlencoded

Let me know how you get on with this.
Jake

[jakesing]

I see now 45 apps are using this plug-in. If anyone who is using it sees this, could you let me know how it’s going for you?

[jaredg]

Trying to give it a go… my use case is also one time charges. The thing needing the most clarity for me is setting up the API to generate the session id. Getting an error message when I add in: &payment_intent_data[0].application_fee_amount=<platform_fee>

I was able to get it to initialize by changing it to payment_intent_data[application_fee_amount]

[jaredg]

It looks like your latest plugin has successURL and cancel URL fields. Since those are also in the API call, how are you seeing those used?

I’m also receiving an error message, unless I revert to version 1.1.0 of the plugin:

[chris.anderson]

Thanks @jakesing! Again, much appreciated. I’ve made some good progress and ended up getting deep into the Stripe docs, although there is a gap between what Stripe needs to work (based on actual coding languages) and applying this to Bubble logic, I think I’ve straddled this enough to get to the next step. However, it looks like I need to work on my “Payment Intent” logic next - @jaredg looks like you’re getting on well with splitting the payment and we have a similar one-off payment use case… Any advice or JSON body you can share please?

In case anyone else finds the initial setup useful, I’ve screenshotted my API call to create the Checkout Session (I’ve hidden my keys and data - if you spot something I shouldn’t be sharing, please tell me):
Don’t forget to add "Bearer " before your key (No need for quote marks but you do need the space).

In order to initialise the call, you will need to put values in. I’ve put grey blocks over these to hide my data but you can enter your own to initialise and then set these dynamically later in your app.

My code snippet is here for easy copy and pasting which I created based on Stripe documentation, here: Accept a payment | Stripe Documentation. NOTE: I’ve configured this call to create the PRODUCT and the PRICE in-line with the session creation rather than creating them in advance within Stripe. I’ve also not been able to test this fully (see issue at the bottom) but it at least gets your far enough to initilise a call and use in your workflow before continuing to use Jake’s plugin:

success_url=<success_url>&payment_method_types[0]=card&cancel_url=<cancel_url>&mode=&client_reference_id=<client_reference_id>&line_items[0][price_data][currency]=&line_items[0][price_data][product_data][name]=&line_items[0][price_data][unit_amount]=<unit_amount>&line_items[0][quantity]=

However, I’m now having the same issue as @jaredg:

To help debug / check if it’s the plugin or user error, here is my other setup:

In the workflow I’m only passing in the ID of the result from Step 1 as per your screenshot. Step 1 is my own API call to get the Checkout Session.

I also tried to mitigate this further by ignoring everything else in the response apart from the ID, when I initialised the call (I don’t know if was correct or not):

However, I’m now unable to proceed past this point now. Can anyone help or suggest what I’ve done wrong please?

[jakesing]

Hi Jared,

I thought I had reverted back to the version before adding in successURL and cancelURL, since you are right, the redirect call does not need to include it (I think I was tinkering with something at the time, but I don’t remember what specifically).

I will re-revert back to version 1.1.0, I do not think there’s any need for those fields.

[jakesing]

Hey Chris - nice progress. One thing I notice is you don’t have development Stripe keys in your header…that might harm you at some point.

Similar to Jared, I think I mistakenly added those extra fields to the plugin when they shouldn’t be there. I had reverted to the prior version when those fields weren’t in, but for some reason you guys are still seeing the version with those fields. I’m publishing a new version (1.3.0) that should have the correct configuration.

Let me know how that goes

[jakesing]

This is making me think that there might be some value in packaging this together with a ‘create checkout session’ plugin, for both subscriptions and one-offs. If I made this, do you guys think you would be willing to pay for it?

[jaredg]

Depends on price, but probably.

[jaredg]

Thanks for the detail on the code snippet for the API call. There are so many use cases with Stripe, I can see how this list of fields would be hard to keep up with. What I got to work was reverting to 1.1.0 (the new version 1.3.0 seems to be working though now… thanks Jake!) and creating the products/prices in Stripe ahead of time and putting the price ID in my workflow for the API call. But I would much prefer to create the prices and products on the fly and not have to keep a separate product database in Stripe.

Here’s what I was using with predefined products in Stripe (<price_id>):
success_url=<success_url>&payment_method_types[0]=card&cancel_url=<cancel_url>&line_items[0][price]=<price_id>&line_items[0][quantity]=<quantity>&mode=payment&client_reference_id=<client_reference_id>&payment_intent_data[application_fee_amount]=<platform_fee>

And after your helpful info, here’s what I’ll use now:
success_url=<success_url>&payment_method_types[0]=card&cancel_url=<cancel_url>&line_items[0][quantity]=<quantity>&mode=payment&client_reference_id=<client_reference_id>&payment_intent_data[application_fee_amount]=<platform_fee>&line_items[0][price_data][currency]=<currency>&line_items[0][price_data][product_data][name]=<product_name>&line_items[0][price_data][unit_amount]=<unit_amount>&line_items[0][price_data][product_data][description]=<product_description>&line_items[0][price_data][product_data][image][0]=https:<product_image>

The other thing I noticed is that the payment_intent_data.platform_fee amount must be an integer. No decimals. It’s not a percentage. (same thing for the unit_amount). So if you want to charge your stripe connect seller $1.50 USD, you would enter 150 for the value. Here’s how I did that on my API workflow call to calculate a 15% fee for example:

The thing I’d like to figure out next is how to access data from the checkout after success… probably with Stripes polling for events through another API call or a webhook to accessing the Checkout Session object again?
https://stripe.com/docs/payments/checkout/accept-a-payment#payment-success or Retrieve a Session | Stripe API Reference ?

[jakesing]

Yep, I implemented webhooks in my app. It’s not as scary as it sounds, I promise.

[jaredg]

Heh… you’re right on the webhooks. Got one setup for Checkout.success.completed pretty easily.
I needed customer info and added another API call to ask Stripe for the customer ID delivered to the webhook… lot’s of back and forth.

1. Bubble app --> checkout session --> Stripe Checkout page
2. Stripe Webhook --> Bubble Backend API workflow.
3. Backend API Workflow --> Stripe API Customers endpoint
4. Stripe Checkout page --> Success URL page in Bubble.

Am I missing anything?

[chris.anderson]

Thanks @jakesing, I can also confirm mine is working now too!! Thanks very much for your help on this

[chris.anderson]

If the plugin took care of all the different options we’ve found ourselves working through then possibly yes. I’m surprised this logic doesn’t already exist in and amongst the other Stripe plugin’s (e.g. Stripe.js) which are used a lot… are our use cases really that different to what’s on offer already or have we approached this incorrectly? If it’s the former you may have found a gap to be filled.

[chris.anderson]

Amazing, thanks @jaredg I’ll give this a spin today and check out the payment intent. Thanks for the heads up.