Configuring Buy Button / product info for products that have several price options

Hello fellow gliders!

I am trying to set up my Buy Button and am struggling with configuring product info.

The aim of my app is to help parents book activities for their children; each activity has several pricing options.

When setting up my Buy button, how do I configure product info to reflect the pricing option that has been selected by my user?

Currently, I am only able to connect product info fields to columns from my GS master sheet; however, the various payment options are listed on a separate GS sheet (that is linked to master sheet via relation).

Here is the user flow:

(1) user browses activities listing page where price is advertised as a range ie. yoga 12-15€ on each activities card
(2) once user selects an activity, they land on the activity details screen where they are presented with the various payment options (15€/class, 60€/5 classes, 100€/unlimited etc.) through an in-line list
(3) if user taps “BOOK NOW” button, they land on a booking screen where they fill out personal info and select payment option through drop down list / choice component
(4) once they tap BUY button, they are directed to the checkout screen with final price to be paid.

The final price to be paid in (4) should reflect the payment option selected in (3), but currently I am only able to connect page (4) product info to my GS master sheet which does not contain the pricing options for each activity, but only the price ranges used to feed activities cards in (1) listing page. Pricing options are on a separate sheet.

Hope this is clear!

Thanks so much in advance for your help!!

I would be helpful to see the spreadsheet and/or some screenshots of the relations you currently have. It seems to me that the Buy button would need to be on the details of whatever has the information that was selected in step 3 so there is visibility of the options selected. Since the final price is dependent on the options selected they would need to be available to populate the price on the Buy Button.

1 Like

Attached are screenshots of:
(1) the app: listings screen > details screen > booking screen (with the buy button called “checkout”)
(2) the GS master sheet: with “price” column used to populate details screen (and “payment” column which is currently - but incorrectly - used to populate buy button product info)
(3) the GS price sheet (linked to master via relation): “price options” is used to populate details screen in-line list and booking screen choice component
(4) the GS schedule sheet (linked to master via relation): “day & time options” is used to populate details screen in-line list and booking screen choice component

I see you are using a form button to show the booking form, but then you have checkout and add to cart buttons along with the submit button at the top right? This leads me to be a little confused on how your purchase process is supposed to flow. Are you using the Stripe integration for purchase, or are you using your own homemade cart? The problem with using a form is that nothing is saved to the sheet for the buy buttons to obtain values to pass along to stripe…unless I’m mistaken.

Based on what I think you currently have for your flow, is it safe to say that someone could submit a booking without paying or submit payment without filling out the booking information?

2 Likes

Hi Jeff! Thanks for your reply!

Yes, I was trying to use a form for the booking process (via Stripe - I was just ignoring the submit button) but I understand now how that might not work.

And no, user should definitely fill out a booking form with personal details to complete booking.

So what about if I move my choice components from the booking screen to the details screen (ie. replace the booking screen in-line list with a choice component instead), might that work?

I had actually tried that previously but had an issue when setting up choice component: “source” can be linked up to PriceRelation column on Master GS, but “data” can only linked up to Master, and not the registration sheet as I would like it to be. No sure what I am doing wrong here…

Thanks so much in advance!

I’ve been thinking about this one and it’s a little tricky because it sounds like you want to accomplish 2 things here. One, to submit the form data to acquire all of the information you need for the booking, and two, to submit payment for the booking. Using only the buy button only gives you only a handful of options like name, address, phone, product id, and description. Based on your screenshots, you will need more information for the booking.

My initial thought was to first create a booking button with the link to screen action redirecting to ‘This Item’. This would give you a fresh page that is still on the current detail row. Here you would present all of your entry fields along with a choice component which would be filled with the relation you are using for the payment options. The the entry components and the selected value from the choice component would then be written to user specific columns that you create in the detail sheet. My thought was to then create a template joining all of that information together and submit it through the Product Name or Product ID. The problem is that Glide doesn’t allow for glide create columns, such as templates, to be used for those parts of the buy button.

My only idea at this time would be to present a form where the user can enter all the information for the booking. I would also include the user email and unique id special values. Once they submit the form, then you would display the booking as an inline list in the details screen. From there you would need to require them to open the booking, then select the buy button. You could use the unique ID for the Product ID, and hopefully you have included the price for the booking as part of the form submission. Once they complete the purchase, then you would probably need a sheet formula to mark the booking as paid, or a copy of the App: Sales sheet that’s accessible to Glide where you would create a relation, using unique id, to the copied app sales sheet to check if the booking is paid.

It’s extra steps, but the best way I can think of to have a booking with all of the relevant info in your app, along with the ability to pay for the booking.

Hope that helps. Sorry it took so long to respond. It’s summer outside and I’ve been busy with other things.

2 Likes

Thanks so much for getting back Jeff, this is so helpful!!

So I actually made a bit of progress since our last exchange and ended up moving the choice component out of the form and into the details screen, recording the user choices (payment and day&time) into user-specific columns on master sheet which has enabled me to pass on
(price) to Stripe via buy button.

The issue I have now:

  1. My “Buy” button sits right next to “Register” button on the details screen which makes it confusing for the user: is there any way I can make it appear conditionally, only once the form will have been submitted? (Unable to configure via visibility/features…). If not:
  2. I may need to try implementing what you were suggesting. However, I am thinking maybe cleaner to add a new separate screen with booking recap and buy button (instead of displaying this on details screen) unless there was there a reason behind displaying this way?
  3. When I try making a fake payment I get this error message: “this item is no longer available” + I dont get the new App:Sales in my google sheet, which makes me question whether Stripe integration might not be compatible with user-specific columns.

Thanks so much in advance!!! Much appreciate your help :pray: :pray:

ps: more than happy to share my google sheet if that can help in any way.

Hi Steph, regarding this point, yes, it does not work with user-specific columns.

1 Like

Agh bummer… would be really helpful if this feature could get added.
Thanks for your reply, @ThinhDinh.

1 Like
  1. This would require the user to sign in and the use of user profiles, but you could create a template column in your activities sheet that joins the activity name/id with the signed in user’s email from the user profile. You would also create a template in the Register sheet that joins the activity name/id and the registered user email. Then you could create a relation in the activities sheet that joins the two template columns and you can set visibility on the buy button to only show if the relation is not empty.

  2. That’s all up to you. A separate screen would be fine as well for showing the recap and a buy button within the details of the recap of the booking.

Hi everyone!!

Does anyone know about a way to make the order disappear after the payment is done?

I am using the built-in buy button but I don’t know how to not have the order in the shopping cart after paid.

@Santiago_Perez1 Sorry I can’t help you with your question but how did you get your cart to “do the math” of multiplying price per quantity and adding up the total plus shipping and handling?

Hola @Aragonzalez90,

Lo hice en la hoja de cálculo de google. Multiplico el precio por la cantidad. Luego sumo ese total al total del handling and shipping.

Espero que te sirva de ayuda.

Si! Muchas gracias, @Santiago_Perez1!

1 Like

Hola Santiago! Pues llevo algunas semanas intentandolo pero no lo he logrado. Tampoco logro que se vea la cantidad “elegida” como en el tuyo se ve “1 body and hair wash” y “1 Bracelet”

Podrias ayudarme con como mostrarlo?

Hola @Aragonzalez90! Déjame hacer un vídeo para explicarlo mejor.

Aquí el vídeo.

Por supuesto, eso lo logre gracias a @gvalero que me ayudo a dar con las fórmulas.

Sorry, @Santiago_Perez1 do you still need assistance with this?

Actually yes! I’ve no idea how to make the order disappear.

I tried a relation but it makes everything else not be in the cart.

I don’t know what I’m missing.

I like this idea. Let me check it out. Because I’m trying to solve this problem with this app and a similar one with another app.

Thank you!

1 Like