Streaming live at 10am (PST)

Buy Now Button – Take the user direct to checkout


#1

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: https://wishlist.webflow.com/ideas/WEBFLOW-I-1619

Live preview is here: https://www.naturalbarbergrooming.com/product/hades-matte-paste

https://preview.webflow.com/preview/naturalbarber-wf?utm_source=naturalbarber-wf&preview=0878de91fbf8ab64e54da142d5e40659


#2

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?


#3

Hey @anonymon,

Thank you! Yes what you’ve detailed is correct, the button on the current site is just placeholder.


#4

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:

  • listen to a click event on the Buy Now button
  • fakes a click on the Add To Cart button
  • redirects to the /checkout page

This 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!


#6

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


#7

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


#8

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: https://www.naturalbarber.co/product/hades-matte-paste

Best,

Joe


#9

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


#10

Thank you again @federico! You’re a js ninja. :pray:


#11

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: https://www.naturalbarber.co/product/zeus-pomade

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);

#12

Cool I’m glad you got it working! :grinning: