| 1 |
var IntegratedPayment = { |
| 2 |
props: { |
| 3 |
cartId: null, |
| 4 |
paymentId: null, |
| 5 |
paymentOptionId: null, |
| 6 |
form: {}, |
| 7 |
checkoutForm: null, |
| 8 |
api: null, |
| 9 |
integratedPayment: null, |
| 10 |
token: null, |
| 11 |
notValid: true, |
| 12 |
fieldsValid: { |
| 13 |
cardHolder: false, |
| 14 |
pan: false, |
| 15 |
cvv: false, |
| 16 |
exp: false, |
| 17 |
}, |
| 18 |
fieldsEmpty: { |
| 19 |
cardHolder: true, |
| 20 |
pan: true, |
| 21 |
cvv: true, |
| 22 |
exp: true, |
| 23 |
}, |
| 24 |
inputStyle:{ |
| 25 |
default: { |
| 26 |
color: '#2B343D', |
| 27 |
fontFamily: 'Poppins, sans-serif', |
| 28 |
fontSize: '14px', |
| 29 |
textAlign: 'left', |
| 30 |
'::placeholder': { |
| 31 |
color: '#969a9f', |
| 32 |
}, |
| 33 |
':focus': { |
| 34 |
color: '#2B343D', |
| 35 |
} |
| 36 |
}, |
| 37 |
invalid: { |
| 38 |
color: '#E91932' |
| 39 |
} |
| 40 |
}, |
| 41 |
save_card: false, |
| 42 |
scheme: null, |
| 43 |
query: null, |
| 44 |
submit: null, |
| 45 |
order_review: false, |
| 46 |
return_url: null |
| 47 |
}, |
| 48 |
form: function(){ |
| 49 |
if(jQuery('form.woocommerce-checkout').length){ |
| 50 |
return jQuery('form.woocommerce-checkout'); |
| 51 |
} |
| 52 |
|
| 53 |
if(jQuery('form#order_review').length){ |
| 54 |
IntegratedPayment.props.order_review = true; |
| 55 |
return jQuery('form#order_review'); |
| 56 |
} |
| 57 |
|
| 58 |
}, |
| 59 |
init: function(){ |
| 60 |
this.manageSaveCard(IntegratedPayment.props); |
| 61 |
|
| 62 |
if( !IntegratedPayment.checkLoaded() ){ |
| 63 |
|
| 64 |
if(typeof jQuery("[name=wc-payplug-payment-token]").val() !== "undefined" && |
| 65 |
jQuery("[name=wc-payplug-payment-token]").val() !== "new" ){ |
| 66 |
jQuery(".payplug.IntegratedPayment_container").hide() |
| 67 |
} |
| 68 |
|
| 69 |
// Create an instance of Integrated Payments |
| 70 |
IntegratedPayment.props.api = new Payplug.IntegratedPayment(payplug_integrated_payment_params.mode == 1 ? false : true); |
| 71 |
IntegratedPayment.props.api.setDisplayMode3ds(Payplug.DisplayMode3ds.LIGHTBOX) |
| 72 |
|
| 73 |
// Add each payments fields |
| 74 |
IntegratedPayment.props.form.cardHolder = IntegratedPayment.props.api.cardHolder(document.querySelector('.cardHolder-input-container'), {default: IntegratedPayment.props.inputStyle.default, placeholder:payplug_integrated_payment_params.cardholder } ); |
| 75 |
IntegratedPayment.props.form.pan = IntegratedPayment.props.api.cardNumber(document.querySelector('.pan-input-container'), {default: IntegratedPayment.props.inputStyle.default, placeholder:payplug_integrated_payment_params.card_number } ); |
| 76 |
IntegratedPayment.props.form.cvv = IntegratedPayment.props.api.cvv(document.querySelector('.cvv-input-container'), {default: IntegratedPayment.props.inputStyle.default, placeholder:payplug_integrated_payment_params.cvv } ); |
| 77 |
// With one field for expiration date |
| 78 |
IntegratedPayment.props.form.exp = IntegratedPayment.props.api.expiration(document.querySelector('.exp-input-container'), {default: IntegratedPayment.props.inputStyle.default, placeholder:payplug_integrated_payment_params.expiration_date } ); |
| 79 |
|
| 80 |
IntegratedPayment.props.scheme = IntegratedPayment.props.api.getSupportedSchemes(); |
| 81 |
|
| 82 |
//EVENTS TO VALIDATE |
| 83 |
IntegratedPayment.props.api.onValidateForm(({isFormValid}) => { |
| 84 |
|
| 85 |
if(IntegratedPayment.oneClickSelected()){ |
| 86 |
IntegratedPayment.resetIntegratedForm(); |
| 87 |
IntegratedPayment.getPayment(); |
| 88 |
|
| 89 |
}else if (isFormValid) { |
| 90 |
IntegratedPayment.getPayment(); |
| 91 |
|
| 92 |
} else { |
| 93 |
IntegratedPayment.form().unblock(); |
| 94 |
return false |
| 95 |
} |
| 96 |
|
| 97 |
}); |
| 98 |
|
| 99 |
|
| 100 |
|
| 101 |
//event to hide show form if token is already done |
| 102 |
jQuery("[name=wc-payplug-payment-token]").on('change', function(event){ |
| 103 |
if( jQuery(this).val() === "new" ){ |
| 104 |
jQuery(".payplug.IntegratedPayment").show() |
| 105 |
jQuery(".payplug.IntegratedPayment_container").show() |
| 106 |
}else{ |
| 107 |
jQuery(".payplug.IntegratedPayment").hide() |
| 108 |
jQuery(".payplug.IntegratedPayment_container").hide() |
| 109 |
} |
| 110 |
}); |
| 111 |
|
| 112 |
IntegratedPayment.props.api.onCompleted(function (event) { |
| 113 |
jQuery.post({ |
| 114 |
async: false, |
| 115 |
url: payplug_integrated_payment_params.check_payment_url, //NEED TO HAVE AN ENDPOINT FOR THIS, |
| 116 |
data: {'payment_id' : event.token}, |
| 117 |
error: function (jqXHR, textStatus, errorThrown) { |
| 118 |
console.log(jqXHR); |
| 119 |
console.log(textStatus); |
| 120 |
console.log(errorThrown); |
| 121 |
}, |
| 122 |
success: function (response) { |
| 123 |
|
| 124 |
//Exception made for SMP-1755 |
| 125 |
if (response.success === false && response.data.code !== "3ds_declined" ) { |
| 126 |
IntegratedPayment.form().unblock(); |
| 127 |
var error_messages = response.data.message || ''; |
| 128 |
IntegratedPayment.submit_error(error_messages); |
| 129 |
jQuery(".payplug.IntegratedPayment_error.-payment").show(); |
| 130 |
IntegratedPayment.resetIntegratedForm(); |
| 131 |
return; |
| 132 |
|
| 133 |
} else { |
| 134 |
jQuery(".payplug.IntegratedPayment_error.-payment").hide(); |
| 135 |
window.location.href = IntegratedPayment.props.return_url; |
| 136 |
} |
| 137 |
|
| 138 |
} |
| 139 |
}); |
| 140 |
|
| 141 |
}); |
| 142 |
|
| 143 |
} |
| 144 |
}, |
| 145 |
checkLoaded: function(){ |
| 146 |
return jQuery("iframe#cardholder").length ? true : false; |
| 147 |
}, |
| 148 |
manageSaveCard: function(Integrated){ |
| 149 |
saveCard = jQuery('.payplug.IntegratedPayment_container.-saveCard'); |
| 150 |
|
| 151 |
saveCard.find('input').on('change', function () { |
| 152 |
if (jQuery(this).prop('checked')) { |
| 153 |
Integrated.save_card = true; |
| 154 |
saveCard.addClass('-checked'); |
| 155 |
} else { |
| 156 |
Integrated.save_card = false; |
| 157 |
saveCard.removeClass('-checked'); |
| 158 |
} |
| 159 |
}); |
| 160 |
}, |
| 161 |
onSubmit: function(e){ |
| 162 |
if ( jQuery('#payment_method_payplug').is(':checked') ) { |
| 163 |
e.stopImmediatePropagation(); |
| 164 |
e.preventDefault(); |
| 165 |
//validate the form before create payment/submit payment |
| 166 |
if(!IntegratedPayment.props.api.validateForm()){ |
| 167 |
return false; |
| 168 |
} |
| 169 |
|
| 170 |
} |
| 171 |
|
| 172 |
}, |
| 173 |
getPayment: function(){ |
| 174 |
|
| 175 |
request_url = payplug_integrated_payment_params.ajax_url; |
| 176 |
if(IntegratedPayment.props.order_review) { |
| 177 |
request_url = payplug_integrated_payment_params.order_review_url; |
| 178 |
} |
| 179 |
|
| 180 |
jQuery.ajax({ |
| 181 |
type: 'POST', |
| 182 |
url: request_url, //NEED TO HAVE AN ENDPOINT FOR THIS, |
| 183 |
dataType: 'json', |
| 184 |
data: IntegratedPayment.form().serialize(), |
| 185 |
error: function (jqXHR, textStatus, errorThrown) { |
| 186 |
//integrated.form.clearIntPayment(); |
| 187 |
console.log(jqXHR); |
| 188 |
console.log(textStatus); |
| 189 |
console.log(errorThrown); |
| 190 |
}, |
| 191 |
success: function (response) { |
| 192 |
if (response.result === "failure") { |
| 193 |
IntegratedPayment.form().unblock(); |
| 194 |
var error_messages = response.messages || ''; |
| 195 |
IntegratedPayment.submit_error(error_messages); |
| 196 |
return; |
| 197 |
} |
| 198 |
|
| 199 |
if(response.is_paid || IntegratedPayment.oneClickSelected()) { |
| 200 |
document.location.href = response.redirect; |
| 201 |
return; |
| 202 |
} |
| 203 |
|
| 204 |
IntegratedPayment.props.paymentId = response.payment_id; |
| 205 |
IntegratedPayment.props.return_url = response.redirect; |
| 206 |
}, |
| 207 |
complete: function(response) { |
| 208 |
if (response.responseJSON != null) { |
| 209 |
if (response.responseJSON.result != "failure") { |
| 210 |
if (IntegratedPayment.oneClickSelected()) { |
| 211 |
return; |
| 212 |
|
| 213 |
} else { |
| 214 |
IntegratedPayment.SubmitPayment(); |
| 215 |
|
| 216 |
} |
| 217 |
} |
| 218 |
} |
| 219 |
|
| 220 |
} |
| 221 |
}); |
| 222 |
}, |
| 223 |
submit_error: function (error_message) { |
| 224 |
var parsedHtml = jQuery.parseHTML(error_message, document, false); |
| 225 |
jQuery('#woocommerce-NoticeGroup').remove(); |
| 226 |
jQuery('<div></div>') |
| 227 |
.attr('id', 'woocommerce-NoticeGroup') |
| 228 |
.html(parsedHtml) |
| 229 |
.prependTo(IntegratedPayment.form()); |
| 230 |
IntegratedPayment.form().unblock(); |
| 231 |
IntegratedPayment.scroll_to_notices(); |
| 232 |
}, |
| 233 |
scroll_to_notices: function () { |
| 234 |
var scrollElement = jQuery('#woocommerce-NoticeGroup'); |
| 235 |
jQuery('html, body').animate({ |
| 236 |
scrollTop: (scrollElement.offset().top - 100) |
| 237 |
}, 500); |
| 238 |
}, |
| 239 |
oneClickSelected: function () { |
| 240 |
var token = jQuery('input[name=wc-payplug-payment-token]:checked'); |
| 241 |
return token.length > 0 && 'new' !== token.val(); |
| 242 |
}, |
| 243 |
SubmitPayment: function(){ |
| 244 |
try { |
| 245 |
IntegratedPayment.props.api.pay(IntegratedPayment.props.paymentId, Payplug.Scheme.AUTO, {save_card: IntegratedPayment.props.save_card}); |
| 246 |
} catch(error) { |
| 247 |
IntegratedPayment.submit_error(error.message); |
| 248 |
jQuery(".payplug.IntegratedPayment_error.-payment").show(); |
| 249 |
} |
| 250 |
}, |
| 251 |
resetIntegratedForm: function(){ |
| 252 |
IntegratedPayment.props.form.cardHolder.clear(); |
| 253 |
IntegratedPayment.props.form.pan.clear(); |
| 254 |
IntegratedPayment.props.form.cvv.clear(); |
| 255 |
IntegratedPayment.props.form.exp.clear(); |
| 256 |
|
| 257 |
if(IntegratedPayment.props.save_card){ |
| 258 |
jQuery('.payplug.IntegratedPayment .-saveCard').find('input').click(); |
| 259 |
} |
| 260 |
|
| 261 |
}, |
| 262 |
showValidationErrorMessages: function(){ |
| 263 |
jQuery.each(IntegratedPayment.props.form, function (key, field) { |
| 264 |
field.onChange(function(err) { |
| 265 |
if (err.error) { |
| 266 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).classList.remove("-hide"); |
| 267 |
document.querySelector('.'+key+'-input-container').classList.add("-invalid"); |
| 268 |
|
| 269 |
if (err.error.name === "FIELD_EMPTY") { |
| 270 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".emptyField").classList.remove("-hide"); |
| 271 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".invalidField").classList.add("-hide"); |
| 272 |
} else { |
| 273 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".invalidField").classList.remove("-hide"); |
| 274 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".emptyField").classList.add("-hide"); |
| 275 |
} |
| 276 |
} else { |
| 277 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).classList.add("-hide"); |
| 278 |
document.querySelector('.'+key+'-input-container').classList.remove("-invalid"); |
| 279 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".invalidField").classList.add("-hide"); |
| 280 |
document.querySelector(".payplug.IntegratedPayment_error.-"+key).querySelector(".emptyField").classList.add("-hide"); |
| 281 |
IntegratedPayment.props.fieldsValid[key] = true; |
| 282 |
IntegratedPayment.props.fieldsEmpty[key] = false; |
| 283 |
} |
| 284 |
}); |
| 285 |
}); |
| 286 |
}, |
| 287 |
//on submit event |
| 288 |
submitEvent: function(){ |
| 289 |
|
| 290 |
jQuery('form.woocommerce-checkout, form#order_review').bindFirst('submit', function(event){ |
| 291 |
IntegratedPayment.form().block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } }); |
| 292 |
IntegratedPayment.onSubmit(event); |
| 293 |
}); |
| 294 |
|
| 295 |
} |
| 296 |
}; |
| 297 |
|
| 298 |
jQuery( 'body' ).on( 'updated_checkout', function() { |
| 299 |
if(!jQuery('.cardHolder-input-container').length){ |
| 300 |
return; |
| 301 |
} |
| 302 |
|
| 303 |
IntegratedPayment.init(); |
| 304 |
//on submit event |
| 305 |
IntegratedPayment.submitEvent(); |
| 306 |
IntegratedPayment.showValidationErrorMessages(); |
| 307 |
}); |
| 308 |
|
| 309 |
(function ($) { |
| 310 |
$("body").attr("payplug-domain", payplug_integrated_payment_params.secureDomain); |
| 311 |
|
| 312 |
if(!jQuery('.cardHolder-input-container').length){ |
| 313 |
return; |
| 314 |
} |
| 315 |
|
| 316 |
IntegratedPayment.init(); |
| 317 |
//on submit event |
| 318 |
IntegratedPayment.submitEvent(); |
| 319 |
IntegratedPayment.showValidationErrorMessages(); |
| 320 |
|
| 321 |
})(jQuery); |
| 322 |
|
