Product meta data not working

Here’s my product definition

<button class="snipcart-add-item"
  data-item-id="test-4"
  data-item-price="5.00"
  data-item-url="/snipcart1/"
  data-item-metadata='{"key": "value"}'
  data-item-description="test-4"
  data-item-image="/content/images/size/w960/2024/07/SEI_200167610.webp"
  data-item-name="test-4">
  Add to cart 4
  </button>

when I click the button i get this error in the browser:

Impossible to parse attribute 'item-metadata' for product 'test-4', please make sure that the value is a valid JSON object.
t.jsonValueSelector @ snipcart.js:1
(anonymous) @ snipcart.js:1
Lo @ snipcart.js:1
t @ snipcart.js:1
snipcart-add-item @ snipcart.js:1
e.onDocumentClick @ snipcart.js:1
snipcart.js:1 Uncaught Error: Data attribute "itemMetadata" is not valid: SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
    at Lo (snipcart.js:1:456823)
    at new t (snipcart.js:1:473088)
    at snipcart-add-item (snipcart.js:1:479216)
    at e.onDocumentClick (snipcart.js:1:483191)