note_attributes

[Jon]

Our end goal is a flow like this:
On a web page where the user has to be logged in we will have a "Buy now" button. This button will take the user directly to checkout. When a user makes the buy, we will subscribe to the web hook and mark that the user bought something.

For this flow we need the userID to pass through, and notes_attributes in the webhook seems to be the field to use. When looking at the buy-button I can't find where I'd put the attribute_notes though. Can someone please point me in the right direction?

I had a look at #436 but I'm not sure that really helps.

The button code I have is the one generated from the store page, looking like:

<div id='product-component-1674125826303'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'mystore.myshopify.com',
      storefrontAccessToken: 'mytoken',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '8075468865802',
        node: document.getElementById('product-component-1674125826303'),
        moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
          "product": {
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "calc(25% - 20px)",
                  "margin-left": "20px",
                  "margin-bottom": "50px"
                }
              }
            },
            "buttonDestination": "checkout",
            "contents": {
              "img": false,
              "title": false,
              "price": false
            },
            "text": {
              "button": "Buy now"
            }
          },
          "productSet": {
            "styles": {
              "products": {
                "@media (min-width: 601px)": {
                  "margin-left": "-20px"
                }
              }
            }
          },
          "modalProduct": {
            "contents": {
              "img": false,
              "imgWithCarousel": true,
              "button": false,
              "buttonWithQuantity": true
            },
            "styles": {
              "product": {
                "@media (min-width: 601px)": {
                  "max-width": "100%",
                  "margin-left": "0px",
                  "margin-bottom": "0px"
                }
              }
            },
            "text": {
              "button": "Add to cart"
            }
          },
          "option": {},
          "cart": {
            "text": {
      "total": "Subtotal",
              "button": "Checkout"
            }
          },
          "toggle": {}
        },
      });
    });
  }
  })();
  /*]]>*/
</script>

[Jon]

What seems to work is creating a plain old href link and have it point to checkout like this

https://your-shop.myshopify.com/cart/your-product-id:amount?channel=buy_button&attributes[userID]=the-user-id

I must say, I don't really get the point of the buy-button when you just want a button on another site and it's just to use a direct URL instead. But it seems like the problem is solved anyway.