Custom buy now button in shopify

Question

How to create a custom buy now button in Shopify without the payment gateway. It should be redirected to the checkout page.

        {{ form | payment_button }}

above one is a dynamic button. But don't want to redirect to the payment gateway. It should redirect to checkout.

And I tried the below code. Which is not good. It shows also a popup for add to cart and redirects.

  <form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>

 function instantBuy(){
     var $ = jQuery;
   $(".engo-popup").hide();

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
    }

Answer 1

It was inside the form. That's why it shows a popup

  
 function instantBuy(){
     var $ = jQuery;

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){ 
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
 }

 {% endform %}
<form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>

Answer 2

This method is to create a url link with variant id & total quantity & redirect to checkout Page onclick. Example:

• https://my-shop-name.myshopify.com/cart/36485954240671:3 -- checkout with one variant

• https://my-shop-name.myshopify.com/cart/36485954240671:3,31384149360662:1 -- Add multiple variant

  //Select form --------------
  let form = document.querySelector('form[action="/cart/add"]');
  
  //Onclick Buynow -----------
  let btnBuy = form.querySelector('#buyNow');
  btnBuy.onclick = e => {
  
   //Get Variand Id -----------
   let variantId = form.querySelector('input[name="id"]').getAttribute('value')
  
   //Get Total Item -----------
   let quantity = form.querySelector('input[name="quantity"]').value; 
  
   //Generate link & redirect -----------
   let host = window.location.hostname;
   let newurl = `//${host}/cart/${variantId}:${quantity}`
   window.location.href = newurl;
  }