title: Custom buy now button in shopify
body: <p>How to create a custom buy now button in Shopify without the payment gateway. It should be redirected to the checkout page.</p>
  <p><a href="https://i.stack.imgur.com/Vc9qy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vc9qy.png" alt="enter image description here" /></a></p>
  <pre><code>        {{ form | payment_button }}
  </code></pre>
  <p>above one is a dynamic button. But don't want to redirect to the payment gateway. It should redirect to checkout.</p>
  <p>And I tried the below code. Which is not good. It shows also a popup for add to cart and redirects.</p>
      
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data"&gt;
  &lt;input type="hidden" name="variantId" value="{{ product.variants[0].id }}" /&gt;
  &lt;button class="button buynow-btn" title="Buy" onClick="instantBuy()"&gt;&lt;span&gt;Buy now&lt;/span&gt;&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <pre><code> function instantBuy(){
       var $ = jQuery;
     $(&quot;.engo-popup&quot;).hide();
  
     var formParams = $('form.cart').serialize();
       $.ajax({
        url: &quot;/cart/add&quot;,
        type: &quot;post&quot;,
        data: formParams,
        success: function(){
         window.location.href = &quot;/checkout&quot;;
        },
        error: function(){
        }
       })
      }
  </code></pre>