Embed: event mode for developers

In event mode the designer does not show a form. It stores the order on our server and tells your page about it, so your own code can do the rest.

Listen for the event

Switch the shop to event mode in the dashboard. After the customer presses the order button, the page fires a CustomEvent named vst:checkout on window.

window.addEventListener('vst:checkout', function (e) {
  var order = e.detail;
  // put the item in your own cart, send it to your backend, ...
  console.log(order.order_id, order.price.total, order.files.svg);
});

The payload

Field	Meaning
`order_id`	The order id on our server.
`design`	The design as data: layers, texts, fonts, colours and sizes.
`quantity`	The number of pieces.
`price`	`{unit, total, currency}`. The amounts are strings, calculated on the server.
`files`	Signed links: `svg` (one layer per foil colour) and `pdf`.

File links

The links in files are signed and work for 7 days. After that they return an expired message. If you need the files longer, download them to your own server when you receive the order. The files themselves are kept for 180 days.

Do not publish the links: anyone who has a link can download that file until it expires.

Connect your own cart

window.addEventListener('vst:checkout', function (e) {
  var o = e.detail;
  myCart.add({
    sku: 'custom-lettering',
    quantity: o.quantity,
    price: o.price.unit,
    properties: { vst_order: o.order_id, svg: o.files.svg, pdf: o.files.pdf }
  });
});

Use the price from the payload as given: it is the price the server calculated. Keep the order id with your own order so you can match the two.

Good to know

In event mode the shop owner gets an e-mail for each order; the customer gets none.
Only the first designer on a page is started.
The page needs a registered domain, exactly as in request mode.