Display payment's modal from URL

Related components: O21Pay-dialog

Methods

init(url, width, height, mode)

• url: [mandatory] url payment

• width: [Optional] width of window

• height: [Optional] height of window

• mode: [Optional] mode display (dialog, drawer-left, drawer-right, fullscreen)

Properties

Name	Description
events	events callback

Attributes

Name	Description	Mandatory
url	url payment	Y
width	width of window)	N
height	height of window	N
mode	Display mode (dialog, drawer-left, drawer-right, fullscreen)	N

Events

List of messages that you can receive:

Name	Description
o21pay_mounted	Window Payment is mounted
o21pay_ready	Window Payment is ready)
o21pay_closed	Window Payment is closed
o21pay_payment_success	Successful payment
o21pay_payment_cancelled	Payment cancel
o21pay_payment_error	Payment in error

Example

<o21pay-dialog url="" width="420px" height="560px" mode="dialog"></o21pay-dialog>
<o21pay-dialog url="" width="420px" mode="drawer-left"></o21pay-dialog>
<o21pay-dialog url="" width="420px" mode="drawer-right"></o21pay-dialog>
<o21pay-dialog url="" mode="fullscreen"></o21pay-dialog>

const modal = document.querySelector('o21pay-dialog')
if (modal) {
    let width = '420px'
    let height = '560px'
    let mode = 'dialog'
    modal.init(url, width, height, mode)
    modal.events = (payload) => {
        let message = payload.message
        if (message === 'o21pay_mounted') {
        } else if (message === 'o21pay_ready') {
            modal.hideSpinner = true
        } else if (message === 'o21pay_closed') {
            modal.open = false
        } else if (message === 'o21pay_payment_success') {
        } else if (message === 'o21pay_payment_error') {
        } else if (message === 'o21pay_payment_cancelled') {
        }
    }
    modal.open = true
}