# Widget JS Events

### Event Payload Structure

We use messages to trigger events. \
The following JSON payload describes the sample of message:

```json
{
  "data": {
    "type": "CUSTOM_EVENT_TYPE"
  }
}
```

### Possible Event Types

<table><thead><tr><th width="344">Event Type</th><th>Trigger Description</th></tr></thead><tbody><tr><td>TRANSACTION.NOT_ALLOWED</td><td>Triggered when transaction registration agent replied with <code>not allowed</code> status.</td></tr><tr><td>PAYOUT_REQUEST.CREATED</td><td>Triggered when payout request has been successfully created for submission.</td></tr><tr><td>paytiko.status-raise</td><td><p>This event is triggered whenever an order status changes. It contains three properties:</p><ul><li><code>status</code> – the new status of the order (e.g., "created", "pending", "declined", etc.)</li><li><code>orderId</code> – the unique identifier of the order</li><li><code>timestamp</code> – the time the status was updated, in milliseconds since epoch</li></ul><p><strong>Important:</strong> the event will be triggered only if the flag <code>useEventBasedRedirects</code> was set in <a href="https://paytiko.gitbook.io/docs/solutions/web-sdk#initial-checkout-request"><strong>Initial checkout request</strong></a></p></td></tr><tr><td>paytiko.copy-to-clipboard</td><td>This event could be triggered for those payment providers that are based on manual payment by bank details<br>If the cashier works in an iframe, this event should be <a href="#copy-to-clipboard-event">handled</a> on the client side</td></tr></tbody></table>

### Event Subscription & Handling

```javascript
window.addEventListener('message', event => {
  if (event.data && event.data.type === 'CUSTOM_EVENT_TYPE') {
      console.log('Event handled.');
  }
});
```

### Copy to Clipboard Event

```javascript
window.addEventListener('message', event => {
  if (event.data && event.data.type === 'paytiko.copy-to-clipboard') {
      navigator.clipboard.writeText(event.data.value)
  }
});
```
