Trying to setup a simple website for a gaming service. We want the user to be able to see the 5 pricing options, and then click on the one they want. There are 5 tiers (free, £5, £10, £15, £20).
When the user clicks on what price they want to pay, we want this to take them to a checkout form where they fill in personal info and pay.
The way we ideate it is we either;
showcase these 5 options as buttons, and the user clicks which one they want (which then takes them to checkout)
They’re able to choose from a drop-down list, and then click a button to go to checkout.
Struggling to work out how we can do this on a Webflow site.
To further clarify, why couldn’t you make 5 SKUs with different prices for the same product or 5 different products with different prices? I’m guessing you already though of that, but am not sure why that won’t work?
Additionally if you want to have the prices go directly to checkout you could just have some custom code that “clicks” the buy now button when you click the associated price. Here’s some pseudo-code to explain what I mean:
const costButton = document.getElementById('[the id you chose for the button]')
const buyNowButton = document.(insert correct method) '[ grab the correct buy now button, which will depend on how you set up your 5 different costs]')
costButton.addEventListener('click', ()=> { '[when you click cost button, click the buy now button]'} )
If I’m understanding you, it really just depends how you set up your 5 different costs. Once you have that you can find the cost buttons (the ones in red on the mock up) and set up event listeners to click the appropriate buyNowButton when the costButton is clicked. Let me know if that helped or if I jumped to wrong conclusions!
