Browser hooks

Every time a sale is modified and saved locally the top level window object will emit an event via the postMessage API.

Data structure

The data attribute of that event will have the following structure:

{
	"event_name": "sale:update",
	"data": {
		"sale": {
			"id": "a604d16b-a999-8748-11e6-9a4e7ba6e8d3",
			"client_id": "web_register",
			"client_sale_id": "a604d16b-a999-8748-11e6-9a4e7ba6e8d3",
			"totals": {
				"total_tax": "0.39131",
				"total_price": "2.60870",
				"total_paid": "0.00",
				"total_to_pay": "3.00"
			},
			"line_items": [{
				"product_id": "b1db66d5-f019-11e3-a0f5-b8ca3a64f8f4",
				"quantity": "1",
				"unit_price": "2.60870",
				"unit_tax": "0.39131",
				"tax_id": "b1d192bc-f019-11e3-a0f5-b8ca3a64f8f4"
			}],
			"customer_id": "dc85058a-a683-11e4-ef46-e256d3551c9d"
		}
	},
	"source": "Vend Client API"
}

NOTE: Currently the id and the client_sale_id will be identical but generally, it should not be assumed that this is always going to be the case. The id is the final id that the sale will have on the server and the client_sale_id is an id generated on the client side for the purpose of tracking the sale’s state locally.

Event handling

Here’s an example of how a browser extension can subscribe to those events and perform actions based on them:

window.addEventListener('message', event => {
  let eventData
  try {
    eventData = JSON.parse(event.data)
  } catch (e) {
    // @todo handle/log error
    return 
  }

  if (eventData.event_name === 'sale:update') {
    const saleData = eventData.data.sale
    // @todo do stuff with saleData
  }
})