Fixes for paytrace payment method authorization

This commit is contained in:
David Bomba 2023-06-23 23:53:59 +10:00
parent 43d6a45390
commit 37e1f484ce
2 changed files with 140 additions and 1 deletions

View File

@ -173,6 +173,7 @@ class PayTraceCreditCard {
}
handle() {
Array.from(
document.getElementsByClassName('toggle-payment-with-token')
).forEach((element) =>

View File

@ -37,5 +37,143 @@
@else
<script src='https://protect.paytrace.com/js/protect.min.js'></script>
@endif
<script src="{{ asset('js/clients/payments/paytrace-credit-card.js') }}"></script>
<!-- <script src="{{ asset('js/clients/payments/paytrace-credit-card.js') }}"></script> -->
<script>
// Minimal Protect.js setup call
PTPayment.setup({
styles: {
code: {
'font_color': '#000',
'border_color': '#a1b1c9',
'border_style': 'dotted',
'font_size': '13pt',
'input_border_radius': '2px',
'input_border_width': '1px',
'input_font': 'serif, cursive, fantasy',
'input_font_weight': '700',
'input_margin': '5px 0px 5px 20px',
'input_padding': '0px 5px 0px 5px',
'label_color': '#a0aec0',
'label_size': '16px',
'label_width': '150px',
'label_font': 'sans-serif, arial, serif',
'label_font_weight': 'bold',
'label_margin': '5px 0px 0px 20px',
'label_padding': '2px 5px 2px 5px',
'background_color': 'white',
'height': '30px',
'width': '150px',
'padding_bottom': '2px'
},
cc: {
'font_color': '#000',
'border_color': '#a1b1c9',
'border_style': 'dotted',
'font_size': '13pt',
'input_border_radius': '3px',
'input_border_width': '1px',
'input_font': 'Times New Roman, arial, fantasy',
'input_font_weight': '400',
'input_margin': '5px 0px 5px 0px',
'input_padding': '0px 5px 0px 5px',
'label_color': '#a0aec0',
'label_size': '16px',
'label_width': '150px',
'label_font': 'Times New Roman, sans-serif, serif',
'label_font_weight': 'light',
'label_margin': '5px 0px 0px 0px',
'label_padding': '0px 5px 0px 5px',
'background_color': 'white',
'height': '30px',
'width': '370px',
'padding_bottom': '0px'
},
exp: {
'font_color': '#000',
'border_color': '#a1b1c9',
'border_style': 'dashed',
'font_size': '12pt',
'input_border_radius': '0px',
'input_border_width': '2px',
'input_font': 'arial, cursive, fantasy',
'input_font_weight': '400',
'input_margin': '5px 0px 5px 0px',
'input_padding': '0px 5px 0px 5px',
'label_color': '#a0aec0',
'label_size': '16px',
'label_width': '150px',
'label_font': 'arial, fantasy, serif',
'label_font_weight': 'normal',
'label_margin': '5px 0px 0px 0px',
'label_padding': '2px 5px 2px 5px',
'background_color': 'white',
'height': '30px',
'width': '85px',
'padding_bottom': '2px',
'type': 'dropdown'
},
},
authorization: { clientKey: "{{ $client_key }}" }
}).then(function(instance){
window.instance = instance;
});
document.getElementById("pay-now").addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation();
e.target.parentElement.disabled = true;
document.getElementById('errors').hidden = true;
// To trigger the validation of sensitive data payment fields within the iframe before calling the tokenization process:
PTPayment.validate(function(errors) {
if (errors.length >= 1) {
if (errors.length >= 1) {
let errorsContainer = document.getElementById('errors');
errorsContainer.textContent = errors[0].description;
errorsContainer.hidden = false;
return (e.target.parentElement.disabled = false);
}
} else {
// no error so tokenize
instance.process()
.then( (response) => {
document.getElementById('HPF_Token').value =
response.message.hpf_token;
document.getElementById('enc_key').value =
response.message.enc_key;
let tokenBillingCheckbox = document.querySelector(
'input[name="token-billing-checkbox"]:checked'
);
if (tokenBillingCheckbox) {
document.querySelector(
'input[name="store_card"]'
).value = tokenBillingCheckbox.value;
}
document.getElementById('server_response').submit();
})
.catch((error) => {
document.getElementById(
'errors'
).textContent = JSON.stringify(error);
document.getElementById('errors').hidden = false;
console.log(error);
});
}
});
});
</script>
@endsection