I just released my second Bubble plugin called “Stripe Connect Embedded Components” and it functions as the name. It allows you to integrate Stripe Connect’s embedded components library right into your app without any code. I originally created it for my Bubble app but decided it would definitely be useful to any application using Stripe Connect.
What it does:
The plugin allows you to render a Stripe Connect embedded component on any page and pass in the connected account’s seller ID dynamically to show a seller their specific data. You can select between the following components (Payments, Payment Details, Payouts, Documents, Onboarding) to display and interact with all the seller’s data within your site without having them go to their Stripe dashboard nor by making tables/rg with API calls that retrieve that seller’s transactions, payouts, documents, etc.
Features:
Multiple components can be on one page
Natively responsive for all sizes
No code at all
Customizable font/colors/borders
Dynamically Updated (via Stripe Library)
Dynamic Input Fields
Client-side Initialization
How it works:
It injects code onto the page the element is visible on and runs scripts provided by stripe to render the element into a group using its HTML ID.
Just what I’ve been looking for, thank you! Plugin looks great and I was able to get it to work. Three questions/notes:
First, looks like Payment ID is a required field, even when not using the payment element. I was getting an error, but when I added “n/a” to the payment ID field it went away. Not a huge deal, but just to flag for you.
Second, have you played around with Stripe restricted keys? I try to be very careful with putting a single, full access key anywhere on my site. I’m especially concerned with a potential key leak that would allow others to create Connect Custom accounts, which could very quickly lead to a card cashing scheme that would screw my company a lot. I tried to mess with permissions but couldn’t figure out which were needed for the embedded components. Would love your input on this.
Finally, how does sizing work? Is there a way to trigger mobile vs desktop sizing (I saw this on the Stripe docs, not sure if it’s possible with your plugin).
All in all, fantastic plugin. Thank you for your contribution. I think it’s going to be very popular.
Thank you so much, I am glad this will assist you in creating a more streamlined connect experience, I really appreciate the support!
I’d love to answer your questions and comments:
Thanks for pointing that out, must have forgotten to tick that! I just updated it and will be pushed to the next version by tomorrow.
I haven’t played around with restricted keys, but after reading up on them just now, you might be able to create a key with the right permissions and replace it with the API key, however, it may not work due to its general capabilities. I did quite a bit of work to handle it on the server-side but couldn’t get around to it, I am going to try it again to provide an extra layer of protection as that is of course vital!
There isn’t a way to trigger mobile vs desktop as Stripe’s elements already are responsive natively, so if you try to use dev tools or simply resize the window, you will see the elements adapt. However, I do want to append that the parent group that you add the element to controls the width and height of the element, so of course you can always add a conditional to the group with the HTML ID and control the width/height via that!
I also would like to add that I am going to be working on adding a couple more features soon as Stripe just released them in the past two weeks, they added the following components:
Those extra elements would be awesome! I know at least some of them are required if you don’t want to give access to Stripe dashboard, so will me more relevant in the future given Stripe’s Sessions updates.
In terms of server side for the keys, I think that’s essentially - especially considering there isn’t any other authentication to create accounts or start charges / transfers. It would also obviously be nicer to have the keys entered once on the plugin page so you don’t have to manually update each one when rolling keys.
Added new Stripe Connect embedded components:
Account Management
Balances
Notification Banner
Payouts List
Security update:
Now you are able to plug in your Stripe API Key in the plugin editor rather than in the page workflow action, meaning it is called from Bubble’s API connector.
Update to onboarding component:
Now on completion or exit of onboarding, you can assign a parameter to automatically be appended to the URL from which you can trigger any Bubble workflow.
