Correct me if I'm wrong

... cause I like to learn

Getting Started with the Shopify Buy Button

Posted on | ~3 mins
shopify e-commerce buy-button

This blog post shows how to create a checkout URL with Shopify and pass custom variables for the entire order.

I want to create a static website that can sell one product (and later maybe more). However, implementing your own online shop system seems to be quite a “let’s reinvent the wheel” task (and far from a static website) - there must be a better solution.

The Buy Button from Shopify’s Light plan for 9$ per month seems fitting, so I give it a try. Shopify offers many more features but I don’t need them right now.

Requirements (that were fulfilled):

  1. Sell one product, later maybe more
  2. Pass custom variables for personalization into the checkout
  3. Integrate Paypal, Amazon Pay and credit cards
  4. No server side processing required from my side (a simple JavaScript library would be perfect)
  5. A redirect to the payment processor who handles the whole payment process

Generating a Checkout URL

I used the JS Buy SDK as it seemed leaner than the buy button generator. One can easily add the JS file to the website (or via npm):

 <script src="http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>

The next step is to actually create the checkout URL (as is explained in the first example here).

You just need your token and the id of the product. The product id can be found in the URL when you browse your product in Shopify and the token can be found at https://{yourshop}.myshopify.com/admin/settings/storefront_access_tokens.

const shopClient = ShopifyBuy.buildClient({
      accessToken: '********************',
      appId: 6,
      domain: '{yourshop}.myshopify.com'
    });

    let checkoutUrl = "";
    shopClient.fetchProduct('{yourproductid}')
    .then(function(product){
      checkoutUrl = product.selectedVariant.checkoutUrl(1);
      console.log(checkoutUrl);
    });

First, you instantiate a client and then you get the product you want to checkout and generate a checkout URL with the quantity of 1. This checkout URL can be bound to a button or link anywhere on the page and leads to the checkout process.

Adding Custom Variables to Checkout

It is possible to pass custom variables to Shopify on checkout and they appear in the UI on the order page. The simple way is to pass a variable to the entire cart (which is good enough for me for now). To pass variables per line item you need to use the new alpha library and do more work (see this issue).

You add data by appending to the checkout URL. You can have multiple &attributes[...] and you are free how to name them how you want (I used Name here):

function generateLink() {
        return checkoutUrl + `&attributes[Name]=${personalizedName}`;
      }

Complete Code

To test this, I created a simple website with one form field that fills the personalizedName variable and then generates a checkout URL. It is just to give you an idea, please write better & nonblocking JavaScript than this. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Shopify Checkout Demo</title>
  <script src="http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>
</head>

<body>
  <h1>Hello, Shopper!</h1>
  <script>
  let personalizedName="TestName";

    const shopClient = ShopifyBuy.buildClient({
      accessToken: "asdlfjadsljfeljaf93472jlasf3943852"
      appId: 6,
      domain: 'alexshop.myshopify.com'
    });

    let checkoutUrl = ""
    shopClient.fetchProduct('12334565678')
    .then(function(product){ // because future
      checkoutUrl = product.selectedVariant.checkoutUrl(1);
      console.log(checkoutUrl);
    });
    function generateLink() {
        return checkoutUrl + `&attributes[Name]=${personalizedName}`;
      }

  </script>

  <form>
    <label for="vname">Personalisation Test:
        <input id="vname" placeholder="TestName" name="vname" onChange="personalizedName = this.value;">
    </label>
   
    <button onclick="location.href=generateLink()" type="button">
        Buy now
    </button>
  </form>
</body>
</html>