← Kairos MBA MasterclassAll programsHomeSearch
Kairos MBA Masterclass·46:38

Building Properties Details, Part 2: Floating CTA, Popup Form, Sign-up-or-Update, Booking, Stripe Charge and Transaction, Thank-you Page

Mayank Build trainer - co-founder of Epic, a Delhi no-code/low-code product studio (80+ products); builds the real-estate marketplace in Bubble on camera
▶LMS lesson
← PreviousBuilding Properties Details, Part 1: Binding Page Data, the Price Box, and the Map Element
Lesson 13 of 48 in Kairos MBA Masterclass
Next →How to Set Up Google API Keys for Bubble (Bubble Academy tutorial)

The short version

  1. Floating group fixed to the bottom with 'Pay $[price] and visit' (max width 30%, min height 50). A Popup (type Listing, 40% width, 90% green blurred background) with name, email, phone, a Date/Time picker (today to +30 days), message and a pay button; shown by Element actions > Show, reset each time (0:00-0:19).
  2. Pay workflow: Sign the user up (email as password placeholder) only when no user has that email; else Make changes to the existing user - so one email can book repeatedly. Create Booking (agent, date, guest, message, price, status incomplete); guest = current user or the step's user, in logged-in and logged-out copies (0:20-0:31).
  3. Stripe Charge the current user (listing price, name, statement descriptor = app name), then Create Transaction (booking, price, charge ID, status by 'captured'); update the booking and go to a thank-you page only when captured = yes. Test card 4242 4242 4242 4242, country USA for an India account (0:29-0:48).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01The floating CTA and the popup booking formFloating bottom CTA;›

Floating bottom CTA; popup of type Listing with reset.

Floating group (0:00-0:06)

Popup fields (0:05-0:19)

↓ Full write-up of this concept

02Sign up or update: one email, many bookingsSign up only-when-new;›

Sign up only-when-new; else update.

Two conditional steps (0:20-0:28)

↓ Full write-up of this concept

03Booking, Stripe charge, Transaction, and the thank-you pageBooking -> charge -> transaction -> update -> thank-you if captured.›

Booking -> charge -> transaction -> update -> thank-you if captured.

Booking record (0:29-0:31)

Charge + Transaction (0:32-0:36)

Test and close the loop (0:39-0:48)

↓ Full write-up of this concept

The concepts in full

01

The floating CTA and the popup booking form

The pay button never scrolls away, and the form it opens is reset every time so the last guest's details are gone.

Floating group, float Bottom, no fixed width or background; inside, button 'Pay $[Current page Listing's price] and visit' (max width 30%, min height 50). Remove debug_mode=true from the URL to see it clean. Popup 'popup information': type Listing, max width 40%, background primary green at 90% opacity, blur 5; H4 heading; inputs full name, email (format Email), phone (Integer), a Date/Time picker (initial and min = now, max ~30 days), multiline message, pay button with dynamic price; 'This input should not be empty' on required fields; 1 px green borders. Workflow on the price button: Element actions > Show popup, then Reset inputs.

Why it matters

The booking entry point on every device.

02

Sign up or update: one email, many bookings

Create the user only when the email is new; otherwise update the one that exists. That single 'only when' stops duplicate accounts.

Step 1: Account > Sign the user up - email = input email, password = the email (placeholder; no password collected yet), name and phone fields - Only when 'Search for Users (email = input):first item is empty'. Step 2: Data > Make changes to a thing: Do a search for Users:first item, set name and phone - Only when the search is not empty and the current user is logged out. Result: the same email can book again without a duplicate user.

Why it matters

The de-duplication idiom Bubble beginners miss.

03

Booking, Stripe charge, Transaction, and the thank-you page

Four conditions - logged in or out, captured yes or no - and the booking only flips to complete when Stripe says captured.

Create a new Booking: agent (listing's agent), booking date (picker), guest (Current user when logged in, else the sign-up step's user - two copies with opposite conditions), message, price, status 'incomplete', transaction blank. Then Stripe 'Charge the current user': email, amount = listing price, description = listing name, statement descriptor = app name, image. Then Create Transaction: booking, final price, charge ID (result of the charge step), status 'complete' when captured = yes else 'incomplete' - four condition combinations. Then Make changes to the booking: set transaction and status complete under the same conditions; Navigation > Go to page 'thank you' only when captured = yes. Test with card 4242 4242 4242 4242, any name/expiry/CVC, country USA (an India account complicates non-INR). Verify rows in Data. Ideas: hide the button if a booking exists within 10 days, or cancel the previous one.

Why it matters

The complete money path, with the one gate that matters.

This idea elsewherebuilds onThe plugin installed earlierparallelBasecamp 2 on who may read which rows

Tools referenced

ToolCoverageMomentContext
Bubbledemonstrated
StripedemonstratedCharge the current user; test card

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    pop up popPopup element
    at the rate epic buttonan @epic email address
    real start date / real aesthetics / real staticreal estate
    Type / Cypress / Skype / SykesStripe
    Mando / Mandrope / MangroveManrope (font)
    repeating loop / repeating rowrepeating group
    paid listings nameCurrent page Listing's name

    True on recording day — verify before relying

    ← PreviousBuilding Properties Details, Part 1: Binding Page Data, the Price Box, and the Map ElementNext →How to Set Up Google API Keys for Bubble (Bubble Academy tutorial)