Last active
August 16, 2019 21:21
-
-
Save Septdir/3fee3553cbc5e65bd7ffee76f4566acc to your computer and use it in GitHub Desktop.
Simple donate form for Yandex.Money and PayPal.Based on uikit3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 = 'septdir@gmail.com'; | |
| 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 | |
| + '¤cy_code=' + currency; | |
| if (comment !== '') { | |
| link += '&item_name=' + comment; | |
| } | |
| } | |
| // Open tab | |
| if (link === '') return false; | |
| window.open(link, '_blank'); | |
| }); | |
| }) | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 = 'septdir@gmail.com'; | |
| // 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 | |
| + '¤cy_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