Stripe Connect Embedded Components

Brandarrow's official documentation for Stripe Connect Embedded Components – Bubble.io Plugin.

---

Vitals

Description

The Stripe Connect Embedded Components plugin by Brandarrow enables Bubble.io developers to seamlessly integrate Stripe Connect’s advanced payment and financial services into their applications. By using drag-and-drop elements and simple workflow actions, developers can incorporate functionalities like payments, payout management, onboarding, and document handling. The plugin offers extensive customization, responsive design, and secure session management, making it ideal for platforms requiring streamlined financial operations and compliance.

Key Features

• Seamless Integration: Embeds Stripe Connect components (Payments, Payment Details, Payouts, Onboarding, Documents, Account Management, Balances, Notification Banner) without complex coding.

• Customizable Appearance: Supports styling options for component look and feel, including Popup or Sidebar modes, per Stripe’s documentation.

• Responsive Design: Ensures components adapt across web and mobile devices for consistent usability.

• Event-Driven Workflows: Triggers workflows on onboarding completion or exit with URL parameter support.

• Secure API Key Handling: Configures Stripe API keys via Bubble’s API connector for enhanced security.

• Efficient Development: Reduces setup time by leveraging Stripe’s robust tools within Bubble’s intuitive platform.

Price

$80/once | OR | $15/month

Installation

Stripe Connect Embedded Components Plugin for BubbleBubble

Add the plugin to your Bubble app via the official plugin marketplace.

Demo & Editor

Demo Editor

---

Instructions

1

Enable ID Attributes

In the Bubble editor, go to Settings > General and enable Expose the option to add an ID attribute to HTML elements.

Add a Group or container element on the page and assign a unique ID attribute (e.g., stripe-container).

2

Add the Plugin Element

Drag the Stripe Connect Embedded Components element onto the desired page.

This element is typically non-visible but required to render Stripe components.

3

Initialize the Component

In a workflow (e.g., on page load), add the Initialize Embedded Element - Stripe Connect Embedded Components action.

Configure the action with:

• Publishable key: Your Stripe publishable key (e.g., pk_test_...).

• Client secret: Obtained via the plugin’s API call (e.g., Get Data from External API > SCEC API).

• Connect account ID: The Stripe Connect account ID for the user or platform.

• Container ID: The ID of the Bubble Group (e.g., stripe-container).

• Component type: Choose from Payments, Payment Details, Payouts, Onboarding, Documents, Account Management, Balances, or Notification Banner.

• Customization options: Set Popup or Sidebar mode and other styling per Stripe’s documentation.

4

Confirm Intents

Use the Confirm workflow action when a user submits a setup or payment intent to send the data securely to Stripe, and return to your provided return URL with the parameters automatically provided by Stripe.

5

Manage Account Sessions

Use the Logout Account Session action when users log out or navigate away to securely end the session.

6

Multiple Components

To display multiple components, add additional Stripe Connect Embedded Components elements to the page, each with a unique Container ID, and repeat the initialization process.

Example Workflow

• To display a Payouts List:

  • Add a Group with ID payouts-container.

  • On page load, trigger Initialize Embedded Element - Stripe Connect Embedded Components with:

    • Publishable key, Client secret, Connect account ID, Container ID: payouts-container, and Component type: Payouts.

  • On onboarding completion, use the URL parameter to trigger a workflow (e.g., update user status).

  • Manage Account Sessions: Use the Destroy Element workflow action when a user logs out or navigates away from the page to securely destroy the element.

That's it you are ready to use the plugin

---

Components

Element

• Stripe Connect Embedded Components: A non-visible element that renders Stripe Connect components (Payments, Payment Details, Payouts, Onboarding, Documents, Account Management, Balances, Notification Banner) within a specified group.

Actions

• Initialize Embedded Element A Stripe Embedded Checkout

• Destroy Embedded Element A Stripe Embedded Checkout

Events

• None: Events are handled via URL parameters appended on onboarding completion or exit, which trigger Bubble workflows.

Data calls

• Stripe Embedded Checkout by Brandarrow-Embedded-Process single payment

• Stripe Embedded Checkout by Brandarrow -Embedded-Process subscription payment

• Stripe Embedded Checkout by Brandarrow -Embedded - Setup future payment

---

Common Issues & Troubleshooting

Issue	Cause	Solution
Component Not Displaying	Element hidden or incorrect container ID	Verify the Stripe Connect Embedded Components element is on the page and not hidden. Ensure the Container ID matches the group’s ID attribute exactly. Check Bubble’s debugger for workflow or initialization errors.
“Invalid Key” or “Invalid Client Secret” Error	Incorrect key format, expired client secret, or wrong mode	Confirm the secret key in plugin settings is prefixed with Bearer (e.g., Bearer sk_test_...). Regenerate the Client secret via the SCEC API call and ensure it’s valid and not expired. Use test keys for sandbox mode and live keys for production.
Onboarding URL Parameter Not Triggering Workflow	Missing workflow or incorrect parameter detection	Ensure a workflow is set to detect the appended URL parameter on onboarding completion or exit. Test with Bubble’s preview mode to confirm the parameter is appended correctly.
Component Not Responsive on Mobile	Non-responsive settings or layout obstruction	Test the component in Stripe’s test mode to ensure responsiveness. Adjust the container group’s layout in Bubble’s responsive editor to prevent obstruction.
Multiple Components Overlapping	Duplicate or incorrect container IDs	Assign unique Container IDs to each Stripe Connect Embedded Components element. Ensure each component’s initialization action references the correct Container ID.
API or Session Errors	API issues or invalid Connect account ID	Check the Stripe Dashboard for API error logs or rate limit issues. Verify the Connect account ID is valid and associated with the correct Stripe account.

---

Changelog

Version	Release Date	Changes
v2.0.0	2024-05-19	Added Account Management, Balances, Notification Banner, and Payouts List components. Updated to use Stripe API key in plugin editor via Bubble’s API connector. Added URL parameter support for onboarding completion/exit.

---

Need Help?

Help & Support

---