@playmoweb/vue-payline-wrapper
Version:
VueJS Payline Widget Wrapper.
284 lines (244 loc) • 7.63 kB
JavaScript
/*!
* @playmoweb/vue-payline-wrapper v1.1.2
* (c) Playmoweb SAS
* Released under the MIT License.
*/
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var __vue_normalize__ = _interopDefault(require('vue-runtime-helpers/dist/normalize-component.mjs'));
var __vue_create_injector__ = _interopDefault(require('vue-runtime-helpers/dist/inject-style/browser.mjs'));
function loadScript(url) {
return new Promise(function (resolve, reject) {
var head = document.head || document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.async = true;
script.src = url;
head.appendChild(script);
script.onload = resolve;
script.onerror = reject;
});
}
function loadStyle(url) {
return new Promise(function (resolve, reject) {
var head = document.head || document.getElementsByTagName('head')[0];
var script = document.createElement('link');
script.href = url;
script.rel = "stylesheet";
head.appendChild(script);
script.onload = resolve;
script.onerror = reject;
});
}
var loadPayline = function loadPayline() {
var isHomologation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (isHomologation) {
return Promise.all([loadScript("https://homologation-payment.cdn.payline.com/scripts/widget-min.js"), loadStyle("https://homologation-payment.cdn.payline.com/styles/widget-min.css")]);
} else {
return Promise.all([loadScript("https://payment.payline.com/scripts/widget-min.js"), loadStyle("https://payment.payline.com/styles/widget-min.css")]);
}
};
//
/**
* This component can $emit
* - @success
* - @error
* - @readyToPay
* - @didshowstate
* - @handleFinalStateReached
*/
var script = {
name: "VuePaylineWrapper",
props: {
widgetType: {
type: String,
"default": "lightbox"
},
noClose: {
type: Boolean,
"default": false
},
token: {
type: String,
"default": undefined
},
isHomologation: {
type: Boolean,
"default": false
},
autoCloseOnSuccess: {
type: Boolean,
"default": true
},
actionButtonText: {
type: String,
"default": undefined
},
choosePMLabel: {
type: String,
"default": undefined
}
},
data: function data() {
return {
payline: window.Payline
};
},
watch: {
token: {
immediate: true,
handler: function handler() {
if (this.token) {
this.initPayline(this.token);
}
}
}
},
computed: {
isLightbox: function isLightbox() {
return this.widgetType === "lightbox";
}
},
beforeMount: function beforeMount() {
var _this = this;
if (!this.payline) {
loadPayline(this.isHomologation).then(function () {
_this.payline = window.Payline;
});
}
},
mounted: function mounted() {
// Globally expose internal function, required since the Payline Widget hook the method via the internal jQuery.
window.handleFinalStateReached = this.handleFinalStateReached;
window.didshowstate = this.didshowstate; // Temporary disable the « escape key »
if (this.noClose && this.isLightbox) {
document.addEventListener("keydown", this.noCloseHandler);
}
},
beforeDestroy: function beforeDestroy() {
// Remove the globally expose method.
window.handleFinalStateReached = undefined;
window.didshowstate = undefined; // Re-enable the escape key
if (this.noClose && this.isLightbox) {
document.removeEventListener("keydown", this.noCloseHandler);
}
},
methods: {
/**
* Prevent the usage of the escape key
*/
noCloseHandler: function noCloseHandler(e) {
if (this.isLightbox) {
var key = e.key || e.keyCode;
if (key === "Escape" || key === "Esc" || key === 27) {
e.preventDefault();
e.cancelBubble = true;
}
}
},
/**
* Init the payline « Widget »
*/
initPayline: function initPayline(token) {
this.$emit("readyToPay", false);
if (this.payline) {
this.payline.Api.reset(token, this.widgetType);
}
},
/**
* Emit the current Payline state.
* If the current state is « PAYMENT_METHODS_LIST » consider the Componant as « Ready To Pay ».
* * when its ready $emmit readyToPay.
* * In every case forward via $emit the Payline state.
* @param param
*/
didshowstate: function didshowstate(param) {
this.$emit("didshowstate", param);
if (param.state === "PAYMENT_METHODS_LIST") {
// The lightbox is _not_ in the middle of the screen so…
if (this.isLightbox) {
window.scrollTo(0, 0);
}
if (this.actionButtonText) {
Payline.jQuery(".PaylineWidget .pl-pay-btn, .PaylineWidget .pl-btn").text(this.actionButtonText);
}
if (this.choosePMLabel) {
Payline.jQuery("#pl-pmLayout-column-choosePMLabel").text(this.actionButtonText);
}
this.$emit("readyToPay", true);
}
},
/**
* Handle the Final state of the component.
* * Emit success when final state is => PAYMENT_SUCCESS, PAYMENT_SUCCESS_FORCE_TICKET_DISPLAY, PAYMENT_ONHOLD_PARTNER.
* * Emit error when final state is something else.
* @param param
* @returns {boolean}
*/
handleFinalStateReached: function handleFinalStateReached(param) {
var _this2 = this;
this.$emit("handleFinalStateReached", param);
if (this.autoCloseOnSuccess) {
this.$nextTick().then(function () {
_this2.payline.Api.hide();
});
}
switch (param.state) {
case "PAYMENT_SUCCESS":
case "PAYMENT_SUCCESS_FORCE_TICKET_DISPLAY":
case "PAYMENT_ONHOLD_PARTNER":
this.$emit("success", param);
return false;
default:
this.$emit("error", param);
return false;
}
}
}
};
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
"class": "" + (_vm.noClose ? 'noClose' : '')
}, [_c('div', {
attrs: {
"id": "PaylineWidget",
"data-auto-init": "false",
"data-event-didshowstate": "didshowstate",
"data-embeddedredirectionallowed": "false",
"data-event-finalstatehasbeenreached": "handleFinalStateReached"
}
})]);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-9258e3d2_0", {
source: ".noClose /deep/ #pl-container-lightbox-header-bar{display:none!important}",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/__vue_normalize__({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, __vue_create_injector__, undefined, undefined);
var index = {
install: function install(Vue, options) {
Vue.component('VuePaylineWrapper', __vue_component__);
}
};
module.exports = index;