---
url: https://docs.youcan.shop/youcan-pay/yp-js/events.md
---
# yp.js: Events & Errors

## Events

Subscribe with `element.on(event, listener)`. It returns a function that removes the listener.

| Event | Payload | Fires when |
| --- | --- | --- |
| `ready` | none | The form is rendered and ready for input. |
| `change` | gateway ID, or `null` | The customer picks a payment method. `null` means they return to the method selector. |
| `error` | `PaymentError` | Mounting or confirming fails. |

```js
const payment = yp('pub_xxx').elements({ token: 'token_xxx', container: '#payment' });

const off = payment.on('ready', () => console.log('ready'));
payment.on('change', gateway => console.log('method:', gateway));
payment.on('error', error => console.log(error.code, error.message));

payment.mount();

// later, stop listening
off();
```

## Errors

An error has a `code` and a `message`.

```ts
interface PaymentError {
  code: string;
  message: string;
}
```

Errors reach you in two places:

* `mount()` rejects, and the `error` event fires, when the form cannot render.
* `confirm()` resolves with `status: 'failed'` and an `error` field when the payment cannot complete.

| Code | Meaning |
| --- | --- |
| `invalid_container` | The container selector matched no element. |
| `host_not_allowed` | The current domain is not in the account allowed hosts. Add it in your dashboard. |
| `unavailable` | The account is inactive, or no payment method is available. |
| `not_mounted` | `confirm()` was called before `mount()`. |
| `request_failed` | A network or server request failed. |
| `payment_failed` | The payment was declined or could not process. |

## Handling Results

```js
const result = await payment.confirm();

if (result.status === 'succeeded') {
  // send result.transaction to your server for verification
} else {
  showMessage(result.error.message);
}
```

Always verify the transaction on your server before you fulfill the order. Use [Webhooks](/youcan-pay/webhooks) or the [Transactions API](/youcan-pay/transactions/list).