Insurance Recommendation

Passing cart items

When a customer is finished with selecting tickets, pass the content of the cart in the following structure. Make sure to repeat this step every time when the cart gets updated (e.g. a ticket is deleted).

vern.tickets([{
    start: '2019-09-01T17:00:00.000Z',
    end: '2019-09-01T19:00:00.000Z',
    eventName: 'Pink Floyd',
    eventId: 'CON_12',
    price: 250000,
    currency: 'HUF'
}]);

Where:

  • eventId: this should be a unique identifier of the event
  • eventName: the name of the event to be displayed for the customer
  • price: price of the ticket
  • currency: currency code (currently only HUF is allowed)
  • start: start date of the event as UTC ISO8601 string (eg: 2019-04-11T13:03:54.002Z)
  • end: end date of the event as UTC ISO8601 string (eg: 2019-04-11T15:03:54.002Z)

Note: don't forget to wait until the SDK is ready.

Loading a recommendation

The Vern backend will attempt to find a recommended configuration for the given contents of the cart. At the start of this process, the SDK fires the quote.requested event, in order to make the display of a loading state available.

Although this step improves the user experience, it is only optional.

vern.on('quote.requested', function() {
    console.log('Display loading bar');
});

Display available recommendation

This event fill be fired when there is an available insurance for the current cart:

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

In the callback you'll receive an object with the following structure:

{
    "price": 1340, // price of the insurance
    "currency": "HUF" // currency of the insurance
}

Once you receive an available insurance you can either automatically choose it or let the user decide whether they want activate it.

vern.on('quote.create.succeeded', function(insurance) {
    vern.open();
});

or

vern.on('quote.create.succeeded', function(insurance) {
    var activateButton = document.createElement('button');
    activateButton.addEventListener('click', () => vern.open(), false);
});

If you are a Vern partner, we will also provide you a ready-made example component to display and select the insurance.

Store the recommendation

After the insurance modal was activated and the customer filled out all the required information, the SDK will fire the quote.configured event and you can add the insurance to the cart.

Please note that the vern.tickets() event shouldn't be called this time!

vern.on('quote.configured', function(insurance) {
    storeOnBackend(insurance.quoteId)
});

The quote is an identifier of the created recommendation which you should store on your backend and let us know once the order on your side has been fulfilled.

Delete recommendation from the cart (optional)

If the user decides to remove the insurance from the cart, you have to call vern.remove(), so we can invalidate the created recommendation.

Control the modal (optional)

In any case if you have to control the display of the insurance modal from the content, you can call vern.open() to open, and vern.close() to close the modal. Be aware that force closing the modal might result in loss of entered input.

← ConfigurationFinalise Purchase →