Stripe Payment Elements

Brandarrow’s official documentation for Stripe Payment Element – Bubble.io plugin.

---

Vitals

Description

Stripe Payment Element by Brandarrow lets you integrate Stripe’s Payment Elements into your Bubble.io app without heavy lifting.

Key Features

1. Customizable Payment Flows – One‑time, subscriptions, or save‑for‑later.

2. Visual Customization – Style colors, fonts, borders, spacing via Stripe Appearance API.

3. User‑Friendly Workflows – Initialize and confirm intents with minimal setup.

4. Responsive Design – Components look great across mobile, tablet, and desktop.

5. Secure & Compliant – Built on Stripe’s PCI‑compliant infrastructure.

• One‑time payments

• Subscriptions

• Saving cards for future use

Drag‑and‑drop visual elements, customize their appearance through Stripe’s Appearance API, and initialize or confirm intents with simple workflow actions. Your customers enjoy a fast, secure checkout on any device—boosting conversion and user satisfaction.

Price

$40/once | OR | $15/month

Installation

Stripe Payment Elements Plugin for BubbleBubble

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

Demo & Editor

Demo Editor

---

Instructions

1

Enter Stripe API Keys

In Plugins → Stripe Payment Element, paste your Secret key (prefix with Bearer ).

2

Enable HTML ID Attributes

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

3

Create a Display Container

Assign a unique ID (e.g., paymentDisplay) to the group that will host the Stripe element.

4

Drag & Drop the Visual Element

Add SPE – Payment Element or SPE – Setup Element to the page.

5

Initialize the Element (Workflow)

Use Initialize Payment Element A or Initialize Setup Element A.

Provide:

Publishable key

Client secret (use Get data from external API → SPE API)

Container ID (paymentDisplay)

6

Confirm Intents

When the user submits, trigger Confirm Payment Element or Confirm Setup Element.

7

Destroy When Needed

On logout or page change, run Destroy Payment/Setup Element to cleanly remove the component.

---

Components

Element

• SPE – Payment Element

• SPE – Setup Element

Action

• Initialize Payment Element A – SPE

• Confirm Payment Element A – SPE

• Destroy Payment Element A – SPE

• Initialize Setup Element A – SPE

• Confirm Setup Element A – SPE

• Destroy Setup Element A – SPE

• GET Setup Intent (Action)

• GET Payment Intent (Action)

Event

None

Data calls

• Stripe Payment Elements by Brandarrow – Setup Intent

• Stripe Payment Elements by Brandarrow – GET Setup Intent (data)

• Stripe Payment Elements by Brandarrow – Payment Intent

• Stripe Payment Elements by Brandarrow – GET Payment Intent (data)

That's it you are ready to use the plugin

---

Benefits

1. Easy Integration – Embed Stripe elements in minutes.

2. Brand Consistency – Tailor the UI to match your app’s look and feel.

3. Optimized UX – Fast, friction‑less checkout boosts conversion.

4. Scalable – Supports diverse business models and future growth.

5. Security – Stripe handles sensitive card data; you stay compliant.

---

Common Issues & Troubleshooting

Issue	Cause	Solution
Element does not render	• Wrong Container ID • Element initialized before group is visible	Verify the group’s ID matches the workflow’s Container ID. Ensure the group is visible before calling the initialize action (use “Do when” or a small delay).
“Invalid API key” error	Missing Bearer prefix or wrong key type	Add Bearer before the key. Use your Secret key in plugin settings and Publishable key in workflow.
Confirm action fails with “intent not found”	Using a stale or incorrect client secret	Retrieve a fresh client secret via Setup/Payment Intent API call just before initializing.
Element stuck in loading state	Missing Stripe.js or multiple Stripe instances	Ensure only one instance of Stripe.js runs on the page; avoid loading other Stripe plugins simultaneously.
Destroy action does not remove element	Wrong Container ID or no active element	Use the exact Container ID supplied during initialization. Confirm an element is active before running destroy.

---

Version	Status	Date	Changes
v1.0.0	Shipped	1/6/25	Initial release

---

Need Help?

Help & Support

---