Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-08 19:14:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor for self hosted pay now button

Browse Source
This commit is contained in:
David Bomba 2024-09-10 11:50:15 +10:00
parent 4f46fa1029
commit 53e295df4c
1 changed files with 102 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
resources/views/portal/ninja2020/gateways/powerboard/credit_card/pay.blade.php
View File

@ -6,6 +6,11 @@
@section('gateway_content') @section('gateway_content')
<form action="javascript:void(0);" id="stepone">
<input type="hidden" name="gateway_response">
<button type="submit" class="hidden" id="stepone_submit">Submit</button>
</form>
<form action="{{ route('client.payments.response') }}" method="post" id="server-response"> <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
@csrf @csrf
<input type="hidden" name="gateway_response"> <input type="hidden" name="gateway_response">
@ -58,9 +63,7 @@
</label> </label>
</li> </li>
</ul> </ul>
@endcomponent
@endcomponent
<div id="powerboard-payment-container" class="w-full"> <div id="powerboard-payment-container" class="w-full">
<div id="widget" style="block" class="hidden"></div> <div id="widget" style="block" class="hidden"></div>
@ -88,45 +91,45 @@
var widget = new cba.HtmlWidget('#widget', '{{ $public_key }}', '{{ $gateway_id }}'); var widget = new cba.HtmlWidget('#widget', '{{ $public_key }}', '{{ $gateway_id }}');
widget.setEnv("{{ $environment }}"); widget.setEnv("{{ $environment }}");
widget.useAutoResize(); widget.useAutoResize();
// widget.interceptSubmitForm('#server-response'); widget.interceptSubmitForm('#stepone');
widget.onFinishInsert('input[name="gateway_response"]', "payment_source"); widget.onFinishInsert('#server-response input[name="gateway_response"]', "payment_source");
widget.load(); widget.load();
widget.trigger('tab', function (data){ // widget.trigger('tab', function (data){
console.log("tab Response", data); // console.log("tab Response", data);
console.log(widget.isValidForm()); // console.log(widget.isValidForm());
let payNow = document.getElementById('pay-now'); // let payNow = document.getElementById('pay-now');
payNow.disabled = widget.isInvalidForm(); // payNow.disabled = widget.isInvalidForm();
}); // });
widget.trigger('submit_form',function (data){ // widget.trigger('submit_form',function (data){
console.log("submit_form Response", data); // console.log("submit_form Response", data);
console.log(widget.isValidForm()); // console.log(widget.isValidForm());
let payNow = document.getElementById('pay-now'); // let payNow = document.getElementById('pay-now');
payNow.disabled = widget.isInvalidForm(); // payNow.disabled = widget.isInvalidForm();
}); // });
widget.trigger('tab',function (data){ // widget.trigger('tab',function (data){
console.log("tab Response", data); // console.log("tab Response", data);
console.log(widget.isValidForm()); // console.log(widget.isValidForm());
let payNow = document.getElementById('pay-now'); // let payNow = document.getElementById('pay-now');
payNow.disabled = widget.isInvalidForm(); // payNow.disabled = widget.isInvalidForm();
}); // });
widget.on("systemError", function(data) { widget.on("systemError", function(data) {
console.log("systemError Response", data); console.log("systemError Response", data);
@ -139,64 +142,14 @@
widget.on("finish", async function(data) { widget.on("finish", async function(data) {
document.getElementById('errors').hidden = true; document.getElementById('errors').hidden = true;
console.log("finish", data); console.log("finish");
console.log(data);
try {
const resource = await get3dsToken();
console.log("3DS Token:", resource);
console.log("pre canvas");
console.log(resource._3ds.token);
var canvas = new cba.Canvas3ds('#widget-3dsecure', resource._3ds.token);
canvas.load();
let widget = document.getElementById('widget'); process3ds();
widget.classList.add('hidden');
} catch (error) {
console.error("Error fetching 3DS Token:", error);
}
canvas.on("chargeAuthSuccess", function(data) {
console.log(data);
document.querySelector(
'input[name="browser_details"]'
).value = null;
document.querySelector(
'input[name="charge"]'
).value = JSON.stringify(data);
let storeCard = document.querySelector(
'input[name=token-billing-checkbox]:checked'
);
if (storeCard) {
document.getElementById('store_card').value = storeCard.value;
}
document.getElementById('server-response').submit();
});
canvas.on("chargeAuthReject", function(data) {
console.log(data);
document.getElementById('errors').textContent = `Sorry, your transaction could not be processed...`;
document.getElementById('errors').hidden = false;
});
canvas.load();
}); });
widget.on("submit", async function (data){ widget.on("submit", function (data){
console.log("submit"); console.log("submit");
console.log(data); console.log(data);
document.getElementById('errors').hidden = true; document.getElementById('errors').hidden = true;
@ -207,11 +160,6 @@
console.log(data); console.log(data);
}); });
widget.on('submit', function (data) {
console.log("submit", data);
console.log(data);
});
widget.on('tab', function (data) { widget.on('tab', function (data) {
console.log("tab", data); console.log("tab", data);
console.log(data); console.log(data);
@ -221,7 +169,7 @@
payNow.addEventListener('click', () => { payNow.addEventListener('click', () => {
// widget.getValidationState(); widget.getValidationState();
// if(!widget.isValidForm()){ // if(!widget.isValidForm()){
// console.log("invalid"); // console.log("invalid");
@ -240,11 +188,81 @@
document.getElementById('store_card').value = storeCard.value; document.getElementById('store_card').value = storeCard.value;
} }
document.getElementById('server-response').submit(); if(document.querySelector('#server-response input[name=gateway_response]').value.length > 1)
document.getElementById('stepone_submit').click();
else
document.getElementById('server-response').submit();
}); });
async function process3ds()
{
try {
const resource = await get3dsToken();
console.log("3DS Token:", resource);
if(resource.status != 'pre-authenticated')
throw new Error('There was an issue authenticating this payment method.');
console.log("pre canvas");
console.log(resource._3ds.token);
var canvas = new cba.Canvas3ds('#widget-3dsecure', resource._3ds.token);
canvas.load();
let widget = document.getElementById('widget');
widget.classList.add('hidden');
} catch (error) {
console.error("Error fetching 3DS Token:", error);
document.getElementById('errors').textContent = `Sorry, your transaction could not be processed...\n\n${error}`;
document.getElementById('errors').hidden = false;
}
canvas.on("chargeAuthSuccess", function(data) {
console.log(data);
document.querySelector(
'input[name="browser_details"]'
).value = null;
document.querySelector(
'input[name="charge"]'
).value = JSON.stringify(data);
let storeCard = document.querySelector(
'input[name=token-billing-checkbox]:checked'
);
if (storeCard) {
document.getElementById('store_card').value = storeCard.value;
}
document.getElementById('server-response').submit();
});
canvas.on("chargeAuthReject", function(data) {
console.log(data);
document.getElementById('errors').textContent = `Sorry, your transaction could not be processed...`;
document.getElementById('errors').hidden = false;
});
canvas.load();
}
async function get3dsToken() { async function get3dsToken() {
const browserDetails = { const browserDetails = {
@ -318,7 +336,6 @@
}); });
Array.from( Array.from(
document.getElementsByClassName('toggle-payment-with-token') document.getElementsByClassName('toggle-payment-with-token')
).forEach((element) => ).forEach((element) =>