collect-africa-js
Version:
Collect Africa Checkout library
141 lines (139 loc) • 9.81 kB
JavaScript
class CollectCheckoutService {
constructor(clientConfiguration) {
this.clientConfiguration = clientConfiguration;
this._handleMessageAddEventListener = (e) => this.handleMessageAddEventListener(e);
const clientError = this.validateConfiguration(this.clientConfiguration);
if (clientError !== undefined) {
throw new Error(`Configuration is invalid: ${clientError.toString()}`);
}
if (typeof window === 'undefined') {
throw new Error(`Window object does not exist`);
}
this.hostUrl = `https://${this.clientConfiguration.publicKey.startsWith('pk_live_')
? 'checkout.collect.africa'
: 'staging-checkout.collect.africa'}`;
this.hostKey = 'collect-pv-data';
this.collectAppID = Math.floor(10000 + Math.random() * 9000);
this.collectAppLoader = document.createElement('div');
this.collectAppWidget = document.createElement('iframe');
}
/**
* Setup collect checkout
*/
setup() {
this.collectAppLoader.id = 'collect-pv-build-' + this.collectAppID;
this.collectAppLoader.style.position = 'fixed';
this.collectAppLoader.style.left = '0px';
this.collectAppLoader.style.top = '0px';
this.collectAppLoader.style.height = '100%';
this.collectAppLoader.style.width = '100%';
this.collectAppLoader.style.overflow = 'hidden';
this.collectAppLoader.style.zIndex = '9999999';
this.collectAppLoader.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
this.collectAppLoader.innerHTML =
'<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Collect Africa Payview Spinner</title> <style> .ct-px__app-loader { margin: 200px 0; text-align: center; color: white; } @keyframes ct-px__app-loader__spinner { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes ct-px__app-loader__spinner { 0% { opacity: 1; } 100% { opacity: 0; } } .ct-px__app-loader__spinner { position: relative; display: inline-block; } .ct-px__app-loader__spinner div { left: 95px; top: 35px; position: absolute; -webkit-animation: ct-px__app-loader__spinner linear 1s infinite; animation: ct-px__app-loader__spinner linear 1s infinite; background: white; width: 10px; height: 30px; border-radius: 40%; -webkit-transform-origin: 5px 65px; transform-origin: 5px 65px; } .ct-px__app-loader__spinner div:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-delay: -0.916666666666667s; animation-delay: -0.916666666666667s; } .ct-px__app-loader__spinner div:nth-child(2) { -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: -0.833333333333333s; animation-delay: -0.833333333333333s; } .ct-px__app-loader__spinner div:nth-child(3) { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } .ct-px__app-loader__spinner div:nth-child(4) { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.666666666666667s; animation-delay: -0.666666666666667s; } .ct-px__app-loader__spinner div:nth-child(5) { -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: -0.583333333333333s; animation-delay: -0.583333333333333s; } .ct-px__app-loader__spinner div:nth-child(6) { -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .ct-px__app-loader__spinner div:nth-child(7) { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.416666666666667s; animation-delay: -0.416666666666667s; } .ct-px__app-loader__spinner div:nth-child(8) { -webkit-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: -0.333333333333333s; animation-delay: -0.333333333333333s; } .ct-px__app-loader__spinner div:nth-child(9) { -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .ct-px__app-loader__spinner div:nth-child(10) { -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.166666666666667s; animation-delay: -0.166666666666667s; } .ct-px__app-loader__spinner div:nth-child(11) { -webkit-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: -0.083333333333333s; animation-delay: -0.083333333333333s; } .ct-px__app-loader__spinner div:nth-child(12) { -webkit-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: 0s; animation-delay: 0s; } .ct-px__app-loader__spinner { width: 40px; height: 40px; -webkit-transform: translate(-20px, -20px) scale(0.2) translate(20px, 20px); transform: translate(-20px, -20px) scale(0.2) translate(20px, 20px); } </style> <div id="ct-px__app-loader" class="ct-px__app-loader"> <div id="spinner" class="ct-px__app-loader__spinner"> <div></div><div></div><div></div><div></div><div></div><div></div><div> </div><div></div><div></div><div></div><div></div><div></div> </div> </div>';
this.collectAppWidget.id = 'collect-pv-widget-' + this.collectAppID;
this.collectAppWidget.name =
'checkout-collect-pv-widget-' + this.collectAppID;
this.collectAppWidget.src = this.hostUrl;
this.collectAppWidget.allowPaymentRequest = true;
this.collectAppWidget.allowtransparency = true;
this.collectAppWidget.style.position = 'fixed';
this.collectAppWidget.style.left = '0px';
this.collectAppWidget.style.top = '0px';
this.collectAppWidget.style.margin = '0px';
this.collectAppWidget.style.padding = '0px';
this.collectAppWidget.style.height = '100%';
this.collectAppWidget.style.width = '100%';
this.collectAppWidget.style.overflow = 'hidden';
this.collectAppWidget.style.zIndex = '9999999';
this.collectAppWidget.style.visibility = 'visible';
this.collectAppWidget.style.backgroundColor = 'transparent';
this.collectAppWidget.style['-webkit-tap-highlight-color'] =
'transparent';
this.collectAppWidget.style.border = '0px none transparent';
this.collectAppWidget.onload = () => {
var _a;
(_a = this.collectAppWidget.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
key: this.hostKey,
email: this.clientConfiguration.email,
firstName: this.clientConfiguration.firstName,
lastName: this.clientConfiguration.lastName || '',
reference: this.clientConfiguration.reference,
amount: this.clientConfiguration.amount,
currency: this.clientConfiguration.currency || 'NGN',
paymentLinkCode: this.clientConfiguration.paymentLinkCode || '',
invoiceCode: this.clientConfiguration.invoiceCode || '',
planCode: this.clientConfiguration.planCode || '',
itemImage: this.clientConfiguration.itemImage || '/development/shoe.png',
publicKey: this.clientConfiguration.publicKey,
}, this.hostUrl);
window.addEventListener('message', this._handleMessageAddEventListener, false);
};
}
/**
* Open collect checkout
*/
open() {
document.body.appendChild(this.collectAppLoader);
document.body.appendChild(this.collectAppWidget);
}
/**
* Close collect checkout
*/
async close() {
if (typeof this.clientConfiguration.beforeClose === 'function') {
await this.clientConfiguration.beforeClose('Before close checkout');
}
document.body.removeChild(this.collectAppLoader);
document.body.removeChild(this.collectAppWidget);
window.removeEventListener('message', this._handleMessageAddEventListener, false);
if (typeof this.clientConfiguration.onClose === 'function') {
this.clientConfiguration.onClose('closed checkout');
}
}
handleMessageAddEventListener(event) {
if (event.origin !== this.hostUrl)
return;
if (event.data.key !== this.hostKey)
return;
if (event.data.type === 'loading') {
this.collectAppLoader.querySelector('div#ct-px__app-loader').style.display = 'none';
}
if (event.data.type === 'close') {
this.close();
}
if (event.data.type === 'success' &&
typeof this.clientConfiguration.onSuccess === 'function') {
this.clientConfiguration.onSuccess(event.data.data || '');
}
if (event.data.type === 'error' &&
typeof this.clientConfiguration.onError === 'function') {
this.clientConfiguration.onError(event.data.data || '');
}
}
validateConfiguration(clientConfiguration) {
const errors = [];
if (!clientConfiguration.email) {
errors.push('email is required');
}
if (!clientConfiguration.firstName) {
errors.push('first name is required');
}
if (!clientConfiguration.reference) {
errors.push('reference is required');
}
if (!clientConfiguration.amount) {
errors.push('amount is required');
}
if (clientConfiguration.amount < 10000) {
errors.push('amount must be greater than 100 NGN');
}
if (!clientConfiguration.publicKey) {
errors.push('public key is required');
}
return errors.length > 0 ? errors : undefined;
}
}
export { CollectCheckoutService };
//# sourceMappingURL=collect-checkout.js.map