02 Hooks

All hooks are basically injectable functions. You can have several handlers on the same event by just assigning more then one handler for event. The hooks config can be retrieved from the VXPay object with the getter: vxpay.hooks. It returnes a Promise that will be resolved when the frame is loaded.

See examples below.

onAny

Will be triggered on any postMessage send/received with PaymentFrame.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** @param {VXPayMessage} msg */
	hooks.onAny(function(msg) {/* do something */})
});

onLoad

Will be triggered when DOM triggers the onLoad handler on iframe HTML element.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** @note no parameter injected! */
	hooks.onLoad(function() {/* do something */})
});

onContentLoaded

Will be triggered when PaymentFrame reports DOMContentLoaded.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** 
	 * @param {VXPayContentLoadedMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayContentLoadedMessage.js
	 */
	hooks.onContentLoaded(function(msg) {/* do something */})
});

onViewReady

Will be triggered when PaymentFrame reports the UI to be ready.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** 
	 * @param {VXPayViewReadyMessage} msg 
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayViewReadyMessage.js
	 */
	hooks.onViewReady(function(msg) {/* do something */})
});

onBeforeSend

Will be triggered before the postMessage is being sent to PaymentFrame.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** @param {VXPayMessage} msg */
	hooks.onBeforeSend(function(msg) {/* do something */})
});

onClose

Will be triggered when the PaymentFrame is closed by user.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/** 
	 * @param {VXPayIframeCloseMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayIframeCloseMessage.js
	 */
	hooks.onClose(function(msg) {/* do something */})
});

onSuccess

Will be triggered when user processed the payment successfully.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPaySuccessMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPaySuccessMessage.js
	 */
	hooks.onSuccess(function(msg) {/* do something */})	
});

onLogin

Will be triggered when user loggs in successfully.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayLoggedInMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/Hooks/VXPayLoggedInMessage.js
	 */
	hooks.onLogin(function(msg) {/* do something */})
});

onLogout

Will be triggered when user loggs out successfully.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayLoggedOutMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayLoggedOutMessage.js
	 */
	hooks.onLogout(function(msg) {/* do something */})
});

onFlowChange

Will be triggered when the VXPay UI flow is being changed. Usually happens when some openBlah functions are triggered, e.g. openLogin or openVoiceCall, etc.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayFlowChangedHookMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/Hooks/VXPayFlowChangedMessage.js
	 */
	hooks.onFlowChange(function(msg) {/* do something */})
});

onIsLoggedIn

Will be triggered when the response from isLoggedIn action is received from VXPay UI.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayIsLoggedInResponseMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayIsLoggedInResponseMessage.js
	 */
	hooks.onIsLoggedIn(function(msg) {/* do something */})
});

onTransferToken

Will be triggered when VXPay UI sends a postMessage with transfer token. This hook is used internally for many actions. Basically, when token is transferred, the Payment UI is complete and shown.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayTransferTokenMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/VXPayTransferTokenMessage.js
	 */
	hooks.onTransferToken(function(msg) {/* do something */})
});

onAVSStatus

Will be triggered when VXPay UI sends a postMessage with AVS status in response to a corresponding request postMessage. This hook is triggered as a response to getAVSStatus action.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayAVSStatusMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/Actions/VXPayAVSStatusMessage.js
	 */
	hooks.onAVSStatus(function(msg) {/* do something */})
});

onBalance

Will be triggered when VXPay UI sends a postMessage with current user balance in response to a corresponding request postMessage. This hook is triggered as a response to getBalance action.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayBalanceMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/Actions/VXPayBalanceMessage.js
	 */
	hooks.onBalance(function(msg) {/* do something */})
});

onActiveAbos

Will be triggered when VXPay UI sends a postMessage with current user active abos in response to a corresponding request postMessage. This hook is triggered as a response to getActiveAbos action.

/** @param {VXPayPaymentHooksConfig} hooks */
vxpay.hooks.then(function(hooks) {
	/**
	 * @param {VXPayActiveAbosMessage} msg
	 * @link https://github.com/VISIT-X/vxpay-js/blob/master/src/VXPay/Message/Actions/VXPayActiveAbosMessage.js
	 */
	hooks.onActiveAbos(function(msg) {/* do something */})
});