Example · Docs

Basic checkout example

You can try out the live version here.
<html>
<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <h4 class="d-flex justify-content-between align-items-center mb-3">Your cart</h4>
        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6>Pink Floyd</h6>
              <small class="text-muted">
                Pink Floyd were an English rock band formed in London in 1965.
              </small>
            </div>
            <span class="text-muted">HUF 110 000</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-condensed insurance-offer-list-item">
            <div></div>
            <div class="spinner-grow" role="status">
              <span class="sr-only">Loading insurance offer...</span>
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between checkout-total-list-item">
            <span>Total (HUF)</span>
            <strong>HUF 110 000</strong>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://kit.fontawesome.com/070250984f.js"></script>
  <script src="https://sandbox.sdk.vernsurance.com/latest/sdk.js"></script>
  <script>
    function generateDate(hour) {
      const date = new Date();
      date.setDate(date.getDate() + 1);
      date.setHours(hour);
      return date.toJSON();
    }
  </script>
  <script>
    var vern = Vern.configure('<replace with your public key>', {
      language: 'hu',
      debug: true
    });
    
    const tickets = [{
      start: generateDate(17),
      end: generateDate(17),,
      eventName: 'Pink Floyd',
      eventId: 'CON_12',
      price: 110000,
      currency: 'HUF'
    }];

    vern.tickets(tickets);

    vern.on('ready', () => {
      console.log('Vern SDK is loaded');
    });

    vern.on('quote.create.succeeded', function (insurance) {
      renderQuote(insurance.currency, insurance.price, false);
    });

    vern.on('quote.configured', function (insurance) {
      storeInsuranceLineItemOnBackend(insurance);
      renderQuote(insurance.currency, insurance.price, true);
    });

    vern.on('quote.removed', (insurance) => {
      renderQuote(insurance.currency, insurance.price, false);
    });

    function updateTotalPrice(price) {
      const listItem = document.querySelector('.checkout-total-list-item');
      
      const ticketsPrice = tickets.reduce((sum, ticket) => {
        return sum + ticket.price;
      }, 0);
      const fullPrice = price + ticketsPrice;

      const formattedPrice = formatPrice(fullPrice);

      listItem.querySelector('strong').innerHTML = `HUF ${formattedPrice}`;
    }

    function open() {
      vern.open();
    }
    function remove() {
      vern.remove();
    }

    function formatPrice(price) {
      return String(price)
        .toString()
        .split('')
        .reverse()
        .reduce((output, num, index) => {
          return num + (index % 3 === 0 ? ' ' : '') + output;
        }, '')
        .trim();
    }

    function storeInsuranceLineItemOnBackend(insurance) {
      /*
      This is where you should store the `insurance.quoteId`, `insurance.price`, `insurance.currency` on your backend

      eg:
      fetch('/cart.json', {
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify({
          quoteId: insurance.quoteId,
          currency: insurance.currency,
          price: insurance.price
        })
      });
      */
    }

    function renderQuote(currency, price, added) {
      const listItem = document.querySelector('.insurance-offer-list-item');
      listItem.innerHTML = '';
      
      listItem.removeEventListener('click', open, false);
      listItem.removeEventListener('click', remove, false);
      
      const descriptionEl = document.createElement('div');
      descriptionEl.classList.add('insurance-offer-description');
      
      const priceEl = document.createElement('span');
      priceEl.classList.add('text-muted');
      const formattedPrice = formatPrice(price);

      if (added === false) {
        listItem.addEventListener('click', open, false);

        descriptionEl.innerHTML = `
          <h6>
            <button type="button" class="btn btn-primary btn-sm">Add</button>
            Ticket Cancellation Insurance
          </h6>
          <small class="text-muted">Our ticket cancellation offers coverage of the price of your tickets in case of unforeseen events.</small>
        `;

        priceEl.innerHTML = `${currency} ${formattedPrice}`;

        updateTotalPrice(0);

      } else {

        listItem.addEventListener('click', remove, false);

        descriptionEl.innerHTML = `
          <h6>
            Ticket Cancellation Insurance
            <span class="badge badge-success">Your tickets are secured!</span>
          </h6>
          <small class="text-muted">Our ticket cancellation offers coverage of the price of your tickets in case of unforeseen events.</small>
        `;
        
        priceEl.innerHTML = `
          <i class="fas fa-times-circle"></i>
          ${currency} ${formattedPrice}
        `;

        updateTotalPrice(price);
      }

      listItem.appendChild(descriptionEl);
      listItem.appendChild(priceEl);
    }
  </script>
</body>
</html>