To send and receive events add a script into your web page as in the example:

<script >
  // receive events
  window.addEventListener("message", receiveMessage, false);
  function receiveMessage(event) {
    if (event.origin === 'https://trade-ui.coinify.com' ||
        event.origin === 'https://trade-ui.sandbox.coinify.com'
    ) {
      const widgetMessage = event.data;

      // your message handler code goes here ...
      // e.g.
      if (widgetMessage.event === 'trade.trade-prepared') {
        // here you could validate the used crypto address 
      } 
  }
  
  // send events
  const iframe = document.getElementById('your-widget-iframe-id');
  iframe.contentWindow.postMessage({
    type: 'event',
    event: 'trade.confirm-trade-prepared',
    context: {
      confirmed: true
    }
  }, '*');
</script>

The window.postMessage() method is used to send cross-origin messages from the widget to the hosting window.
Similarly, window.addEventListener() is used to receive cross-origin messages from the hosting window.

Address confirmation

A common use case for messages is to allow the hosting window to validate the cryptocurrency address used for a trade.

For this use case, the widget is loaded using the confirmMessages=true in the query parameters. The hosting
window listens for trade.trade-prepared and trade.trade-created events and once received, it validates if the cryptocurrency address used in the trade is as expected, and then responds by posting trade.confirm-trade-prepared and trade.confirm-trade-created respectively with context telling widget whether trade is accepted or declined.

Message format

All messages objects have a type property. Currently, only a single type event is available:

Message types

`type`	Description
`event`	An event related to the widget occurred. The message will have an `event` property and optionally a `context` property. See widget events section below.

Message events

The following message events may be sent from the widget:

The following message events may be sent to the widget:

Message events description

`trade.trade-prepared`

A trade has been prepared for review. Sent when the trader has reviewed the transaction, but before actually creating a
trade in the backend. The message context contains a partial trade object excluding some
properties which are not available until the trade is created in the backend.

{
  "type": "event",
  "event": "trade.trade-prepared",
  "context": {
    "baseAmount": 50,
    "baseCurrency": "EUR",
    "quoteAmount": 0.00187817,
    "quoteCurrency": "BTC",
    "transferIn": {
      "medium": "card"
    },
    "transferOut": {
      "details": {
        "account": "ms357UPjpLkQjKifoRKjfsk5Zxedd14uZm"
      },
      "medium": "blockchain"
    }
  }
}

`trade.trade-created`

A trade has been created in the backend. Sent when the trader has reviewed the transaction
(and for bank trades has completed KYC) and continues to complete payment.
The message context contains a trade object.

{
  "type": "event",
  "event": "trade.trade-created",
  "context": {
    "createTime": "2021-01-21T15:12:20.300Z",
    "id": 151551,
    "inAmount": 50,
    "inCurrency": "EUR",
    "isPriceQuoteApproximate": false,
    "outAmountExpected": 0.00187817,
    "outCurrency": "BTC",
    "quoteExpireTime": "2021-01-21T15:26:43.396Z",
    "state": "awaiting_transfer_in",
    "traderEmail": "john@doe.com",
    "traderId": 1234,
    "transferIn": {
      "id": 461378, 
      "sendAmount": 53.25, 
      "receiveAmount": 50, 
      "currency": "EUR", 
      "medium": "card"
     },
     "transferOut": {
      "id": 461379, 
      "sendAmount": 0.00187817, 
      "receiveAmount": 0.00160017, 
      "currency": "BTC", 
      "medium": "blockchain",
      "details": {
        "account": "ms357UPjpLkQjKifoRKjfsk5Zxedd14uZm"
      }
    },
    "updateTime": "2021-01-21T15:12:20.300Z"
  }
}

`trade.trade-placed`

The trader has placed a trade. Sent when a user has completed placing a trade (buy or sell) and clicks to return to the
quote page. The message context object has the following properties:

Property	Description
`tradeId`	id of the trade placed

{
  "type": "event",
  "event": "trade.trade-placed",
  "context": {
    "tradeId": 123456
  }
}

`trade.confirm-trade-prepared`

The trader has accepted or rejected the prepared trade. When using the parameter
confirmMessages this event must be sent after a user has either accepted or rejected the
prepared trade. The message context object has the following properties:

Property	Description
`confirmed`	the confirmation status, true if `accepted` or false if `rejected`

{
  "type": "event",
  "event": "trade.confirm-trade-prepared",
  "context": {
    "confirmed": true
  }
}

`trade.confirm-trade-created`

The trader has accepted or rejected the created trade. When using the parameter
confirmMessages this event must be sent after a user has either accepted or rejected the
created trade. The message context object has the following properties:

Property	Description
`confirmed`	the confirmation status, true if `accepted` or false if `rejected`
`tradeId`	id of the trade placed
`transferInitiated`	sell trades only, optional, true if the hosting page itself has initiated a transfer, and widget should skip the transfer crypto page

{
  "type": "event",
  "event": "trade.confirm-trade-created",
  "context": {
    "confirmed": true,
    "tradeId": ,
    "transferInitiated": true
  }
}

`settings.partner-context-changed`

The partner context has changed. Sent by the hosting window in case partner context has changed.
The provided value will overwrite any current value. Note, a default value may be set
using the partnerContext query parameter.
The message context object has the following properties:

Property	Description
`partnerContext`	Free context object

{
  "type": "event",
  "event": "settings.partner-context-changed",
  "context": {
    "partnerContext": {
      "yourPartnerContext": "here"
    }
  }
}