100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
/* global wp, wc, window */
|
|
(function() {
|
|
// Ensure Blocks registry and settings are available
|
|
var registry = (wc && wc.blocksRegistry) ? wc.blocksRegistry : null;
|
|
var settingsAPI = (window.wcSettings && window.wcSettings.getSetting) ? window.wcSettings : null;
|
|
var i18n = (wp && wp.i18n) ? wp.i18n : null;
|
|
var element = (wp && wp.element) ? wp.element : null;
|
|
|
|
if (!registry || !settingsAPI || !element) {
|
|
return;
|
|
}
|
|
|
|
var __ = i18n ? i18n.__ : function(s){ return s; };
|
|
var React = element;
|
|
|
|
var pmData = settingsAPI.getSetting('yooneMonerisData', {});
|
|
var label = pmData.title || __('Credit Card (Moneris)', 'yoone-moneris');
|
|
|
|
var Content = function(props) {
|
|
var el = React.createElement;
|
|
var useState = React.useState, useEffect = React.useEffect;
|
|
|
|
var _a = useState(''), number = _a[0], setNumber = _a[1];
|
|
var _b = useState(''), expiry = _b[0], setExpiry = _b[1];
|
|
var _c = useState(''), cvc = _c[0], setCvc = _c[1];
|
|
|
|
useEffect(function() {
|
|
var unsubscribe = props.eventRegistration.onPaymentProcessing(function() {
|
|
var parts = (expiry || '').split('/');
|
|
var m = parts[0] ? parts[0].trim() : '';
|
|
var y = parts[1] ? parts[1].trim() : '';
|
|
if (y && y.length === 2) { y = '20' + y; }
|
|
return {
|
|
type: 'success',
|
|
meta: {
|
|
paymentMethodData: {
|
|
yoone_moneris: {
|
|
number: String(number || ''),
|
|
exp_month: String(m || ''),
|
|
exp_year: String(y || ''),
|
|
cvc: String(cvc || ''),
|
|
}
|
|
}
|
|
}
|
|
};
|
|
});
|
|
return function() { unsubscribe(); };
|
|
}, [number, expiry, cvc]);
|
|
|
|
return el('div', { className: 'yoone-moneris-blocks-fields' }, [
|
|
el('div', { className: 'yoone-moneris-field' }, [
|
|
el('label', {}, __('Card Number', 'yoone-moneris')),
|
|
el('input', {
|
|
type: 'text',
|
|
inputMode: 'numeric',
|
|
autoComplete: 'cc-number',
|
|
value: number,
|
|
onChange: function(e){ setNumber(e.target.value); },
|
|
placeholder: '4111111111111111'
|
|
})
|
|
]),
|
|
el('div', { className: 'yoone-moneris-field' }, [
|
|
el('label', {}, __('Expiry (MM/YY)', 'yoone-moneris')),
|
|
el('input', {
|
|
type: 'text',
|
|
inputMode: 'numeric',
|
|
autoComplete: 'cc-exp',
|
|
value: expiry,
|
|
onChange: function(e){ setExpiry(e.target.value); },
|
|
placeholder: 'MM/YY'
|
|
})
|
|
]),
|
|
el('div', { className: 'yoone-moneris-field' }, [
|
|
el('label', {}, __('CVC', 'yoone-moneris')),
|
|
el('input', {
|
|
type: 'text',
|
|
inputMode: 'numeric',
|
|
autoComplete: 'cc-csc',
|
|
value: cvc,
|
|
onChange: function(e){ setCvc(e.target.value); },
|
|
placeholder: '123'
|
|
})
|
|
])
|
|
]);
|
|
};
|
|
|
|
registry.registerPaymentMethod({
|
|
name: 'yoone_moneris',
|
|
label: label,
|
|
ariaLabel: label,
|
|
content: Content,
|
|
edit: Content,
|
|
canMakePayment: function() {
|
|
return !! pmData.enabled;
|
|
},
|
|
supports: {
|
|
features: ['products']
|
|
}
|
|
});
|
|
})(); |