Skip to content

Instantly share code, notes, and snippets.

@Septdir

Septdir/donate-solution.html

Last active August 16, 2019 21:21
Show Gist options
  • Save Septdir/3fee3553cbc5e65bd7ffee76f4566acc to your computer and use it in GitHub Desktop.
Save Septdir/3fee3553cbc5e65bd7ffee76f4566acc to your computer and use it in GitHub Desktop.
Download ZIP
Simple donate form for Yandex.Money and PayPal.Based on uikit3
Raw
donate-solution.html
<div class="uk-form uk-form-horizontal" donate-form="form">
<div class="uk-margin">
<div class="uk-form-label">Сервис</div>
<div class="uk-form-controls">
<div class="uk-button-group">
<a class="uk-button uk-button-default" donate-form="service_button"
data-service="yandex">Яндекс.Деньги</a>
<a class="uk-button uk-button-default" donate-form="service_button" data-service="paypal">PayPal</a>
</div>
<input type="hidden" donate-form="service">
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Сумма</div>
<div class="uk-form-controls">
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip uk-h3 uk-margin-remove">
<span donate-form="currency_symbol" data-currency="RUB" style="display: none;">₽</span>
<span donate-form="currency_symbol" data-currency="EUR" style="display: none;">€</span>
<span donate-form="currency_symbol" data-currency="USD" style="display: none;">$</span>
</span>
<input donate-form="amount" type="text" class="uk-input uk-form-large uk-form-width-medium">
</div>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Валюта</div>
<div class="uk-form-controls">
<select donate-form="currency" class="uk-select uk-form-width-medium">
<option value="RUB">Российский рубль</option>
<option value="EUR">Евро</option>
<option value="USD">Доллар США</option>
</select>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Комментарий</div>
<div class="uk-form-controls">
<textarea donate-form="comment" class="uk-textarea uk-form-width-large" rows="3"></textarea>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-controls">
<a class="uk-button uk-button-primary" donate-form="submit">Отправить</a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Values
let currencyDefault = 'RUB',
serviceDefault = 'yandex',
amountDefault = '100',
commentDefault = 'Пожертвование на развитие проекта',
yandex = '410012760908158',
paypal = '[email protected]';
let hash = window.location.hash.substr(1);
if (hash) {
let parts = hash.split('=');
if (parts.length === 2 && parts[0] === 'solution') {
commentDefault = 'Пожертвование на развитие ' + parts[1];
}
}
// Elements
let form = document.querySelector('[donate-form="form"]'),
serviceButtons = form.querySelectorAll('[donate-form="service_button"]'),
serviceField = form.querySelector('[donate-form="service"]'),
currencySymbols = form.querySelectorAll('[donate-form="currency_symbol"]'),
currencyField = form.querySelector('[donate-form="currency"]'),
currencyOptions = currencyField.querySelectorAll('option'),
amountField = form.querySelector('[donate-form="amount"]'),
commentField = form.querySelector('[donate-form="comment"]'),
submitButton = form.querySelector('[donate-form="submit"]');
// Set defaults
serviceField.value = serviceDefault;
currencyField.value = currencyDefault;
amountField.value = amountDefault;
commentField.value = commentDefault;
setService();
// Change service
function setService(value = '') {
if (value === '') {
value = (serviceField.value !== '') ? serviceField.value : serviceDefault;
}
serviceButtons.forEach(function (button) {
if (button.getAttribute('data-service') === value) {
button.classList.add('uk-active');
} else {
button.classList.remove('uk-active');
}
});
serviceField.value = value;
// Set disabled currency
currencyOptions.forEach(function (option) {
if (value === 'yandex' && option.value !== 'RUB') {
option.setAttribute('disabled', '');
} else {
option.removeAttribute('disabled');
}
});
if (value === 'yandex') {
currencyField.value = 'RUB';
}
setCurrency();
}
serviceButtons.forEach(function (button) {
button.addEventListener('click', function (element) {
element.preventDefault();
setService(button.getAttribute('data-service'));
});
});
// Set currency
function setCurrency(value = '') {
if (value === '') {
value = (currencyField.value !== '') ? currencyField.value : currencyDefault;
}
currencySymbols.forEach(function (symbol) {
if (symbol.getAttribute('data-currency') === value) {
symbol.style.display = '';
} else {
symbol.style.display = 'none';
}
});
}
currencyField.addEventListener('change', function (element) {
setCurrency(element.value);
});
// Submit
submitButton.addEventListener('click', function (element) {
element.preventDefault();
// Check values
if (serviceField.value === '') {
serviceField.value = serviceDefault;
setService(serviceDefault)
}
amountField.classList.remove('uk-form-danger');
if (amountField.value === '') {
amountField.classList.add('uk-form-danger');
return false;
}
// Values
let service = serviceField.value,
amount = amountField.value,
currency = currencyField.value,
comment = commentField.value;
// Prepare link
let link = '';
if (service === 'yandex') {
if (yandex === '') {
return false;
}
link = 'https://money.yandex.ru/to/' + yandex + '/' + amount;
if (comment !== '') {
link += '?comment=' + comment;
}
} else if (service === 'paypal') {
if (paypal === '') {
return false;
}
link = 'https://www.paypal.com/cgi-bin/webscr?cmd=_donations&charset=utf-8&source=url&business=' + paypal
+ '&amount=' + amount
+ '&currency_code=' + currency;
if (comment !== '') {
link += '&item_name=' + comment;
}
}
// Open tab
if (link === '') return false;
window.open(link, '_blank');
});
})
</script>
Raw
donate.html
<div class="uk-form uk-form-horizontal" donate-form="form">
<div class="uk-margin">
<div class="uk-form-label">Сервис</div>
<div class="uk-form-controls">
<div class="uk-button-group">
<a class="uk-button uk-button-default" donate-form="service_button"
data-service="yandex">Yandex.Money</a>
<a class="uk-button uk-button-default" donate-form="service_button" data-service="paypal">PayPal</a>
</div>
<input type="hidden" donate-form="service">
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Сумма</div>
<div class="uk-form-controls">
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip uk-h3 uk-margin-remove">
<span donate-form="currency_symbol" data-currency="RUB" style="display: none;">₽</span>
<span donate-form="currency_symbol" data-currency="EUR" style="display: none;">€</span>
<span donate-form="currency_symbol" data-currency="USD" style="display: none;">$</span>
</span>
<input donate-form="sum" type="text" class="uk-input uk-form-large uk-form-width-medium">
</div>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Валюта</div>
<div class="uk-form-controls">
<select donate-form="currency" class="uk-select uk-form-width-medium">
<option value="RUB">Российский рубль</option>
<option value="EUR">Евро</option>
<option value="USD">Доллар США</option>
</select>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-label">Комментарий</div>
<div class="uk-form-controls">
<textarea donate-form="comment" class="uk-textarea uk-form-width-large" rows="3"></textarea>
</div>
</div>
<div class="uk-margin">
<div class="uk-form-controls">
<a class="uk-button uk-button-primary" donate-form="submit">Отправить</a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Values
let currencyDefault = 'RUB',
serviceDefault = 'yandex',
sumDefault = '100',
commentDefault = 'Пожертвование на развитие проекта',
yandex = '410012760908158',
paypal = '[email protected]';
// Elements
let form = document.querySelector('[donate-form="form"]'),
serviceButtons = form.querySelectorAll('[donate-form="service_button"]'),
serviceField = form.querySelector('[donate-form="service"]'),
currencySymbols = form.querySelectorAll('[donate-form="currency_symbol"]'),
currencyField = form.querySelector('[donate-form="currency"]'),
currencyOptions = currencyField.querySelectorAll('option'),
sumField = form.querySelector('[donate-form="sum"]'),
commentField = form.querySelector('[donate-form="comment"]'),
submitButton = form.querySelector('[donate-form="submit"]');
// Set defaults
serviceField.value = serviceDefault;
currencyField.value = currencyDefault;
sumField.value = sumDefault;
commentField.value = commentDefault;
setService();
// Change service
function setService(value = '') {
if (value === '') {
value = (serviceField.value !== '') ? serviceField.value : serviceDefault;
}
serviceButtons.forEach(function (button) {
if (button.getAttribute('data-service') === value) {
button.classList.add('uk-active');
} else {
button.classList.remove('uk-active');
}
});
serviceField.value = value;
// Set disabled currency
currencyOptions.forEach(function (option) {
if (value === 'yandex' && option.value !== 'RUB') {
option.setAttribute('disabled', '');
} else {
option.removeAttribute('disabled');
}
});
if (value === 'yandex') {
currencyField.value = 'RUB';
}
setCurrency();
}
serviceButtons.forEach(function (button) {
button.addEventListener('click', function (element) {
element.preventDefault();
setService(button.getAttribute('data-service'));
});
});
// Set currency
function setCurrency(value = '') {
if (value === '') {
value = (currencyField.value !== '') ? currencyField.value : currencyDefault;
}
currencySymbols.forEach(function (symbol) {
if (symbol.getAttribute('data-currency') === value) {
symbol.style.display = '';
} else {
symbol.style.display = 'none';
}
});
}
currencyField.addEventListener('change', function (element) {
setCurrency(element.value);
});
// Submit
submitButton.addEventListener('click', function (element) {
element.preventDefault();
// Check values
if (serviceField.value === '') {
serviceField.value = serviceDefault;
setService(serviceDefault)
}
sumField.classList.remove('uk-form-danger');
if (sumField.value === '') {
sumField.classList.add('uk-form-danger');
return false;
}
// Values
let service = serviceField.value,
sum = sumField.value,
currency = currencyField.value,
comment = commentField.value;
// Prepare link
let link = '';
if (service === 'yandex') {
if (yandex === '') {
return false;
}
link = 'https://money.yandex.ru/to/' + yandex + '/' + sum;
if (comment !== '') {
link += '?comment=' + comment;
}
} else if (service === 'paypal') {
if (paypal === '') {
return false;
}
link = 'https://www.paypal.com/cgi-bin/webscr?cmd=_donations&charset=utf-8&source=url&business=' + paypal
+ '&amount=' + sum
+ '&currency_code=' + currency;
if (comment !== '') {
link += '&item_name=' + comment;
}
}
// Open tab
if (link === '') return false;
window.open(link, '_blank');
});
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment