Hi all,
Really enjoying the beta so far!
I want to create a Buy Now button that bypasses the cart and takes the user straight to the checkout. This is a valuable UX pattern for merchants with small inventories, and or (likely) binary choices for products.
Any ideas on where to start with this?
I’ve added a Wishlist item here: Buy Now Button – Take the user direct to checkout | Webflow Wishlist
Live preview is here: https://www.naturalbarbergrooming.com/product/hades-matte-paste
Hi @JoeDigital - It’s great to hear you’re testing out the Beta and building cool stores (like the one you posted) already!
Perfect start - getting this feature on the Wishlist is the best way to help us know what we should be releasing next! Plus important considerations can be captured in the discussions there. Thanks for taking this step, now others can join in and request this functionality!
I see in your site the Buy Now button opens the Checkout Page without any products added - so a user cannot continue with their order.
It would be ideal for this new button to open the Checkout Page with the selected product and any previously added products in the Order items list.
Did I capture this correctly?
Hey @anonymon,
Thank you! Yes what you’ve detailed is correct, the button on the current site is just placeholder.
Hi @JoeDigital!
Unfortunately the Buy Now button has not been implemented yet by the team. But as a workaround you could add some custom code that:
/checkout pageThis is not the best UX because it still opens up the cart for like half a second before redirecting to the checkout page, but if you don’t mind that it should work fine!
An example of custom code would be:
<script>
function addToCartAndCheckout() {
document.getElementById('add-to-cart').click();
window.location = '/checkout';
}
var buyNow = document.getElementById('buy-now');
buyNow.addEventListener("click", addToCartAndCheckout);
</script>
For it to work you’d need to add add-to-cart and buy-now ids to the buttons in the element settings tab.
Let us know if this workaround works for you for the time being or if we can help in any other way!
Hey @federico,
Thanks for that! Yeah I spoke to Stripe and they said it would take some backend dev on your side to implement properly.
This is a really cool workaround though, I’ll try it out today!
Best,
Joe
Hey @federico,
That isn’t working for me for some reason… It’s redirecting to the checkout page but not adding anything.
https://www.naturalbarbergrooming.com/product/hades-matte-paste
Hey Federico,
I’ve included the stock add to cart form and included the extra Buy Now Button to try and remove variables for error, but still no luck.
Page is here if you want to try: Hades Matte Paste | Award Winning Natural Matte Clay for Men
Best,
Joe
Hi @JoeDigital!
Sorry for the late reply. I just tried the Buy Now button and it seems to work fine for me!
However, a problem that might occur is that sometimes it might redirect to the checkout page too quickly and it doesn’t finish to process the Add To Cart click. So one thing you could do to avoid this problem is to add a small delay between the fake Add To Cart click and the redirect. You can change the code I gave you replacing
window.location='/checkout';
with
setTimeout(function() {window.location = '/checkout';}, 500);
to add half a second delay.
Let me know if you still see issues after changing the code!
Best,
Federico
Thank you again @federico! You’re a js ninja. 
I’ve improved it by adding a class to the Cart Wrapper element and hiding it on click using:
$('.cart-wrapper').css('visibility', 'hidden');
Works perfectly now: Zeus Pomade| Award Winning Natural Hair Wax for Men
Full code:
function addToCartAndCheckout() {
$('.cart-wrapper').css('visibility', 'hidden');
document.getElementById('add-to-cart').click();
setTimeout(function() {window.location = '/checkout';}, 500);
}
var buyNow = document.getElementById('buy-now');
buyNow.addEventListener("click", addToCartAndCheckout);
Cool I’m glad you got it working! 
They have added a Toggle Option for items that do not need shipping.
Hey Federico,
I was having trouble getting this to work for my site.
I had a few questions I was hoping you could answer.
For the script, am i adding it on that specific page or for the site as a whole?
And does it go in the head area or the body?
As for the tags, do I add the add-to-cart and buy-now tags as selectors on the add to cart button? or as custom variables for in-page linking?
Currently, when I press the add to cart button the live site, it just goes to the “waiting” state and nothing happens after that.
Take a look here: https://gettruman-b5f0b4-7555308b10d3ab632edd39.webflow.io/schedule
let me know what i’m doing wrong, if you can!
Hey, @JoeDigital! I am trying to do the exact same thing. I have a couple of questions, I hope you can help me out!
Is the script added in the “Footer code ” section? Custom code in head and body tags | Webflow University
@federico, says the IDs need to be added to the “buttons”. Which buttons is he refering to? I only have the buy now button. Are both IDs going in that button? If so, should it look something like the image I’m attaching?
Thanks a lot for your help!
My original answer and example of custom code was based on @JoeDigital’s use case with two buttons: “add to cart” (native Webflow element) and “buy now” (custom button). The code provided would reproduce a “buy now” functionality (skipping the cart step) by faking a click on “add to cart” and then redirect to the checkout page. So you’ll need the add to cart button to do so and add the right ID to the corresponding button. Hope this makes sense!
@Rehman_Ata sorry for the late reply I’m seeing this only now. I hope you solved your issues already, but answering your questions anyway.
For the script, am i adding it on that specific page or for the site as a whole?
Better on the specific page where the buttons are.
And does it go in the head area or the body?
In the body.
As for the tags, do I add the add-to-cart and buy-now tags as selectors on the add to cart button? or as custom variables for in-page linking?
you should add them as IDs in the button settings section
Yes, thanks @federico! Follow-up question: can use some variation of the same script for just ONE button, the “buy now” one? I really don’t need the cart. If not, should I just place the “add to cart” button somewhere and hide it?
Thanks for your help!
@Sebastian_Murillo I think the easiest way will be to add the add to cart button and hide it, as you suggested.
Perfect, I’ll try that. Thanks!
@federico, I am having a hard time even with the button shown. Could you take a lookt at it? I’m attaching a GIF.
Ideally I’d like it to happen with the same form submit button.
Hey @Sebastian_Murillo and @Rehman_Ata,
To be honest, I got this working but it was still a bit buggy which can be risky when trying to sell online!
What I’ve done instead is make use of the Web Payments Element (Apple Pay etc) and the Paypal Element, that Webflow have now integrated. These work great to reduce steps in a users journey as an alternative to a “Buy Now” button. Is this in the backlog @federico?
Right now you can only include these elements in the cart and checkout page so not a perfect solution but still helpful for improving a users experience.
You can see how I’ve designed this here: Hades Matte Paste - Sustainable Natural Hair Wax That Works – Natural Barber Co.
