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.

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.

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

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 or the Transactions API.