/** * @name: montonio-sdk.js * @environment PRODUCTION * @description Used for integrations with Montonio Payment Gateway * @tutorial: Montonio API Docs can be found at https://api.montonio.com/docs * @copyright: Montonio Finance, 2018 - , all rights reserved * * @author Montonio Finance */ function MontonioClass() { /** * This is the URL of the Montonio Application. */ this.iframeSrc; /** * Montonio Gateway Iframe Object */ this.modal = null; /** * Montonio Gateway backdrop */ this.backdrop = null; /** * This holds the message handler for communication between custom * application and Montonio iframe using window.postMessage */ this.handler = null; /** * This calls functions for passing/getting data from Montonio iframe */ this.loadListener = null; /** * The button that controls the opening of Montonio iframe */ this.openButton = null; /** * Function that gets called when Montonio iframe returns a value. * Null if not provided. */ this.completedFunction = null; /** * Script on the current page */ this.thisScript = document.currentScript; /** * This is the accesstoken which can be fetched by using the endpoint * {MONTONIO_API_URL}/authentication * @type { String } */ this.draftToken = null; /** * The boolean that makes sure only one iframe can be opened at a time */ this.isOpened = false; } MontonioClass.prototype.setEnvironment = function (environment) { if (environment == 'production') { this.iframeSrc = 'https://application.montonio.com'; } else { this.iframeSrc = 'https://sandbox-application.montonio.com/'; } } /** * Entry point for setuping Montonio Payment Gateway. Should be called when * document loads. * @param params { Object } */ MontonioClass.prototype.init = function () { var self = this; self.handler = function (e) { self.messageHandler(e); } self.loadListener = function () { self.storeAccessToken(); } // enable listening to events coming from iframe window.addEventListener('message', self.handler, false); } /** * Function that stores Montonio accessKey to localStorage */ MontonioClass.prototype.storeAccessToken = function () { // check if Accesskey has been prepared if (this.draftToken && typeof this.draftToken === 'string') { var self = this; var contents = self.modal.contentWindow; contents.postMessage('Montonio source', '*'); var data = { action: 'storeAccessToken', accessToken: self.draftToken } contents.postMessage(data, '*'); } else { throw new Error('Error when storing accessToken. The key has not been passed to the gateway or is not of type String. See MontonioClass.prototype.prepareDraftToken for instructions.'); } } /** * Function for creating and opening Montonio Payment Gateway iframe */ MontonioClass.prototype.openModal = function () { // return if iframe already opened if (this.isOpened) return; var self = this; // Create iframe var modal = document.createElement('iframe'); modal.setAttribute('seamless', 'true'); modal.setAttribute('src', self.iframeSrc); modal.setAttribute('id', 'montonio-modal'); modal.setAttribute('allowTransparency', 'true'); // required for dependencies modal.setAttribute('allow', 'camera *; microphone *') // Modal style that should not be altered modal.style.setProperty('top', '0px'); modal.style.setProperty('left', '0px'); modal.style.setProperty('right', '0px'); modal.style.setProperty('bottom', '0px'); modal.style.setProperty('border', 'none'); modal.style.setProperty('display', 'block'); modal.style.setProperty('position', 'fixed'); modal.style.setProperty('overflowY', 'auto'); modal.style.setProperty('overflowX', 'hidden'); modal.style.zIndex = '2147483647'; // max z-index modal.style.setProperty('width', '100vw', 'important'); modal.style.setProperty('height', '100%', 'important'); // Add iframe to end of contents in
document.body.appendChild(modal); // set modal to be accessible outside this function self.modal = modal; self.modal.addEventListener('load', self.loadListener); // set modal state to opened self.isOpened = true; // lock page scroll document.body.classList.toggle('montonio-scroll-lock', self.isOpened); } /** * Function for closing and removing Montonio Payment Gateway iframe */ MontonioClass.prototype.closeModal = function () { var self = this; var body = document.querySelector('body'); self.modal.removeEventListener('load', self.loadListener); body.removeChild(self.modal); self.isOpened = false; // lock page scroll document.body.classList.toggle('montonio-scroll-lock', self.isOpened); } /** * Messagehandler function that gets responses from Montonio iframe * @param message { Object } */ MontonioClass.prototype.messageHandler = function (message) { var self = this; if (!window.montonioMessages) { window.montonioMessages = []; } switch (message.data) { case 'APPLICATION_VERDICT_UPDATE_MERCHANT_SYSTEM': window['updateMerchantSystem'](); // log message into flow window.montonioMessages.push(message.data); break; case 'CLOSE_APP': // if a verdict for application has been received and the order in // merchant system has been updated/created and user should navigate // to success/failure page if (window.montonioMessages.indexOf('APPLICATION_VERDICT_UPDATE_MERCHANT_SYSTEM') > -1) { window['completedFunction'](); break; } else { if (window['userClosedGateway'] && typeof window['userClosedGateway'] == 'function') window['userClosedGateway'](); } window.montonioMessages.push(message.data); this.closeModal(); } }; MontonioClass.prototype.prepareDraftToken = function (dt) { if (dt && typeof dt === 'string') { this.draftToken = dt // VERSION 2.0 - Add draft token this.iframeSrc = this.iframeSrc + '?access_token=' + this.draftToken; } else { throw new Error('Accesskey provided is null or is not of type String.') } } MontonioClass.prototype.addBackdrop = function(bgColor) { // return if iframe already opened if (this.isOpened) return; var self = this; var backdrop = document.createElement('div'); backdrop.setAttribute('id', 'montonio-backdrop'); backdrop.style.setProperty('top', '0px'); backdrop.style.setProperty('left', '0px'); backdrop.style.setProperty('right', '0px'); backdrop.style.setProperty('bottom', '0px'); backdrop.style.setProperty('position', 'fixed'); backdrop.style.zIndex = '2147483646'; // max z-index -1 backdrop.style.setProperty('width', '100vw', 'important'); backdrop.style.setProperty('height', '100vh', 'important'); backdrop.style.backgroundColor = (bgColor) ? bgColor : 'rgba(0,0,0,0.5)'; backdrop.innerHTML = '