checkoutModal.js

async function initializeMulberry() {
  const {
    mulberry: { core, modal },
  } = window
  await core.init({
    publicToken: '3-ZUeig_K1r-6sm-HAO3tJnANgI',
  })
  const { settings } = core
  const products = [
    {
      title: 'Sleeper Couch',
      id: '6639947284654',
      price: '1199.00',
      image: {
        src:
          'https://cdn.shopify.com/s/files/1/0564/4461/6878/products/couch_940x.jpg?v=1620157146',
      },
      quantity: 2,
    },
    {
      title: 'Sneakers',
      id: '6659857875118',
      price: '120.00',
      quantity: 1,
    },
    {
      title: 'tshirt',
      id: '6659855188142',
      price: '25.00',
      image: '',
      quantity: 1,
    },
  ]
  const productsWithOffers = await core.getAllWarrantyOffers(products)

  const productModal = await modal.init({
    settings,
    type: 'products',
    products: productsWithOffers,
    onModifyCart: (products) => {
      console.log(products)
    },
  })

  const addProtectionButton = document.querySelector('.add-protection')

  addProtectionButton.addEventListener('click', () => {
    productModal.open()
  })
}

initializeMulberry()