Snipcart error: 'Received invalid payload from server'

Question

Hi I have a nuxt + strapi project and I am using Snipcart for payments.

Current strapi call:

async asyncData({ $strapi, route, i18n }) {
  const response = await $strapi.find('products', {
    _locale: i18n.locale,
    slug: route.params.slug,
  })
  const product = response[0]
  return { product }
},

This is the button I'm currently using:

<button
  v-if="product.suscription === true"
  class="
    snipcart-add-item
    mt-4
    bg-white
    border border-gray-200
    d
    hover:shadow-lg
    text-gray-700
    font-semibold
    py-2
    px-4
    rounded
    shadow
  "
  :data-item-id="product.id"
  :data-item-price="product.price"
  :data-item-url="`${storeUrl}${this.$route.path}`"
  data-item-payment-interval="Month"
  data-item-payment-interval-count="2"
  data-item-payment-trial="10"
  :data-item-description="product.description"
  :data-item-image="product.image.formats.small.url"
  :data-item-name="product.name"
  v-bind="customFields"
>
  {{ $t('cart.suscription') }}
</button>

And this is the error message after pressing add to cart:

VM1788 snipcart.js:1 A 'system' error occured in Snipcart.Received invalid payload from server 
{data: undefined, kind: 'system', code: 'snipcart_error_operation_failed', message: 'snipcart_error_operation_failed', technicalReason: 'Received invalid payload from server'}
code: "snipcart_error_operation_failed"
data: undefined
kind: "system"
message: "snipcart_error_operation_failed"
technicalReason: "Received invalid payload from server"

This ultimately ends up in a 'product-crawling-failed' error after checkout. I am failing to understand what's keeping Snipcart to get all the information from Strapi.