Commit a81cc70a authored by Ivar Derksen's avatar Ivar Derksen Committed by David Venhoek
Browse files

Added donation using ideal payment

parent e981c21e
var config = {
idealServer: 'http://localhost:4242/irma_ideal_server/api/v1/ideal/',
};
function insertBanksIntoForm(data, select) {
// clear existing data ('Loading...')
select.empty();
select.append($('<option selected disabled hidden>'));
// create a list of countries
const countries = [];
for (let country in data) {
countries.push(country);
}
countries.sort();
if (countries.indexOf('Nederland') >= 0) {
// set Nederland as first country
countries.splice(countries.indexOf('Nederland'), 1);
countries.unshift('Nederland');
}
// insert each country with it's banks
for (let country of countries) {
const optgroup = $('<optgroup>');
optgroup.attr('label', country);
select.append(optgroup);
for (let bank of data[country]) {
const option = $('<option>');
option.text(bank.issuerName);
option.val(bank.issuerID);
optgroup.append(option);
}
}
if (sessionStorage.idx_input) {
select.val(sessionStorage.idx_bank);
}
}
function insertAmountsIntoForm(data, select) {
// clear existing data ('Loading...')
select.empty();
select.append($('<option selected disabled hidden>'));
// Load all amounts and make sure they are sorted
const amounts = data.map(a => parseFloat(a).toFixed(2));
amounts.sort(function(a,b) { return a - b;});
// Insert other amounts (if present)
for (let i=0; i < amounts.length; i++) {
const option = $('<option>');
option.html(`&euro; ${amounts[i]}`);
option.val(amounts[i]);
select.append(option);
}
if (sessionStorage.idx_input) {
select.val(sessionStorage.idx_amount);
}
}
// https://stackoverflow.com/a/8486188/559350
function parseURLParams() {
const query = location.search.substr(1);
const result = {};
query.split("&").forEach(function(part) {
const item = part.split("=");
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}
// Start a transaction.
function startIDealTransaction(e) {
e.preventDefault();
$('#donation')[0].scrollIntoView();
const selectedBank = $('#donation-select-bank');
const selectedAmount = $('#donation-select-amount');
const data = {
bank: selectedBank.val(),
amount: selectedAmount.val(),
};
if (!data.bank || !data.amount) {
if (!data.bank) selectedBank.parent()
.addClass('error')
.parent().children().last().removeClass('hide');
if (!data.amount) selectedAmount.parent()
.addClass('error')
.parent().children().last().removeClass('hide');
return;
}
sessionStorage.idx_bank = data.bank;
sessionStorage.idx_amount = data.amount;
const submitButton = $('#donation-submit');
const loadingPanel = $('#donation-loading');
const failedPanel = $('#donation-alert');
submitButton.prop('disabled', true);
loadingPanel.removeClass('hide');
failedPanel.addClass('hide');
selectedBank.parent()
.removeClass('error')
.parent().children().last().addClass('hide');
selectedAmount.parent()
.removeClass('error')
.parent().children().last().addClass('hide');
$('#donation-cancelled').addClass('hide');
$('#donation-success').addClass('hide');
$.ajax({
method: 'POST',
url: config.idealServer + 'start-donation',
data: data,
}).done((redirect) => {
location.href = redirect;
}).fail(() => {
failedPanel.removeClass('hide');
}).always(() => {
loadingPanel.addClass('hide');
});
}
function finishIdealTransaction(params) {
$('#donation')[0].scrollIntoView();
const loadingPanel = $('#donation-loading');
loadingPanel.removeClass('hide');
$.ajax({
method: 'POST',
url: config.idealServer + 'return',
data: {
trxid: params['trxid'],
ec: params['ec'],
},
}).done(() => {
$('#donation-success').removeClass('hide');
}).fail((xhr) => {
if (xhr.responseText === 'error:transaction-open') {
// TODO: Do we have to tell users this explicitly?
$('#donation-success').removeClass('hide');
} else if (xhr.responseText === 'error:transaction-cancelled') {
$('#donation-cancelled').removeClass('hide');
$('#donation-form').removeClass('hide');
} else {
$('#donation-failed').removeClass('hide');
$('#donation-form').removeClass('hide');
}
}).always(() => {
loadingPanel.addClass('hide');
});
}
function init() {
// Check whether user finished donation.
const params = parseURLParams();
if (params['trxid']) {
history.replaceState(null, '', '?');
finishIdealTransaction(params)
} else {
$('#donation-form').removeClass('hide');
}
// Fetch the list of banks
const selectBank = $('#donation-select-bank');
$.ajax({
url: config.idealServer + 'banks',
})
.done(function (data) {
insertBanksIntoForm(data, selectBank);
})
.fail(function () {
selectBank.empty();
selectBank.append($('<option selected disabled hidden>Failed to load bank list</option>'));
});
// Fetch the list of allowed payment amounts
const selectAmount = $('#donation-select-amount');
$.ajax({
url: config.idealServer + 'amounts',
})
.done(function (data) {
insertAmountsIntoForm(data, selectAmount);
})
.fail(function () {
selectAmount.empty();
selectAmount.append($('<option selected disabled hidden>Failed to load amounts list</option>'));
});
// Assign click handlers
$('#donation-submit').click(startIDealTransaction);
}
$.getScript('/assets/js/config.js')
.then(init);
......@@ -72,4 +72,41 @@ bijstaan. Financiële bijdragen zullen enkel in lijn met de
de stichting besteed worden. De stichting publiceert een jaarverslag
met daarin een financiële verantwoording.
<fieldset id="donation">
<legend>Doneren</legend>
<div id="donation-loading" class="panel callout hide">
Verbinden met uw bank...
</div>
<div id="donation-failed" class="alert-box alert hide">
Er is een fout opgetreden. Probeer het later opnieuw.
</div>
<div id="donation-cancelled" class="alert-box warning hide">
Donatie is geannuleerd.
</div>
<p id="donation-success" class="hide">
Bedankt voor uw donatie!
</p>
<form id="donation-form" class="hide" onsubmit="return false;">
<div>
<label>Kies uw bank
<select id="donation-select-bank" required>
<option disabled value="">Laden...</option>
</select>
</label>
<small class="error hide">Vereist</small>
</div>
<div>
<label>Kies donatie
<select id="donation-select-amount" required>
<option disabled value="">Laden...</option>
</select>
</label>
<small class="error hide">Vereist</small>
</div>
<div class="text-right">
<input type="submit" id="donation-submit" class="button" value="Start betaling"/>
</div>
</form>
</fieldset>
<script src="/assets/js/donation.js" defer></script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment