Stripe Embedded Checkout

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

---

Vitals

Description

The "Stripe Embedded Checkout" plugin by Brandarrow is a powerful tool designed for Bubble.io developers and entrepreneurs looking to seamlessly integrate Stripe's advanced payment processing capabilities into their applications. This plugin simplifies the process of embedding Stripe's Payment Elements directly within your Bubble.io projects, allowing you to handle transactions, set up payment methods, and manage customer checkout experiences with ease. By utilizing this plugin, users can effortlessly incorporate Stripe’s secure payment processing features without needing extensive coding knowledge, ensuring a smooth integration and enhanced user experience.

Price

$50/once | OR | $15/month

Installation

Stripe Embedded Checkout Plugin for BubbleBubble

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

Demo & Editor

Demo Editor

---

How to Use

1

Add the Visual Element

Drag SPE‑EmbeddedCheckout onto the page where you want the checkout to render.

Set its width and height to 1 (px) so it occupies no visible space.

Important: Don’t hide the element entirely; doing so will cause initialization to fail.

2

Initialize in a Workflow

Go to Workflow → Plugins.

Add the action Initialize Embedded Element - Stripe Checkout.

In the action fields:

• Publishable key payload: Enter your Stripe publishable key.

• Client secret: Use dynamic data → “Get data from API → Stripe Embedded Checkout by Brandarrow ”.

• Flow type: Select the flow you need (all flows render identically)

3

Expose & Assign an Element ID

In Settings → General, enable “Expose the option to add an ID attribute to HTML elements.”

Add an empty Group on the page:

• Set an ID attribute (e.g., checkout-container).

In your workflow action, set the Container ID to match the group’s ID.

The embedded checkout form will now appear inside that group.

4

Destroy the Element (Optional)

When you need to remove the embedded checkout, trigger Destroy Embedded Element - Stripe Embedded Checkout in a workflow.

That's it you are ready to use the plugin

---

Components

Element

• SPE‑EmbeddedCheckout A

Action

• Initialize Embedded Element – Stripe Embedded Checkout

• Destroy Embedded Element – Stripe Embedded Checkout

Event

None

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	Likely Cause	Fix
Element fails to load	The visual element is hidden or has no size.	Keep the element visible (or 1 × 1 px) and ensure it’s on the page when the workflow runs.
“Invalid client secret” error	Wrong client secret or the secret has expired.	Regenerate the client secret from your server/API call and pass it again.
Checkout not shown in group	ID mismatch.	Confirm the group’s ID matches the Container ID in the workflow action.

---

Changelog

Version	Status	Date	Notes
1.0.0	Shipped	2024-08	Initial release.

---

Need Help?

Help & Support

---