<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div class="d-flex flex-column align-items-center h-100">
<div class="col-md-6 my-5">
<h1>Dynamic paypal donation modal</h1>
<h5>Bind the script to a button</h5>
<textarea class="form-control mb-5">$("#donate").donationModal({
currencies: ['EUR', 'USD'],
modalSize: 'md',
email: 'yourpaypalemail@email.com',
selectedCurrency: 'EUR',
defaultAmount: 2.99,
amountLabel: 'Donation amount',
itemName: 'Donation',
itemNumber: '000001',
redirectSuccess: '',
redirectFailed: '',
buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'
});</textarea>
<h5>Available settings</h5>
<ul>
<li>currencies: ['EUR', 'USD', 'AUD', 'BRL', 'CAD', 'CNY', 'CZK', 'DKK', 'HKD', 'HUF', 'ILS', 'JPY', 'MYR', 'MXN', 'TWD', 'NZD', 'NOK', 'PHP', 'PLN', 'GBP', 'RUB', 'SGD', 'SEK', 'CHF', 'THB']</li>
<li>modalSize: 'md'</li>
<li>email: ''</li>
<li>selectedCurrency: 'EUR'</li>
<li>defaultAmount: 2.99</li>
<li>amountLabel: 'Donation amount'</li>
<li>itemName: 'Donation'</li>
<li>itemNumber: '000001'</li>
<li>redirectSuccess: ''</li>
<li>redirectFailed: ''</li>
<li>buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'</li>
</ul>
</div>
<div class="col-md-6">
<h1>Examples</h1>
<button id="demo1" class="btn btn-primary"><i class="fab fa-paypal"></i> Donate with paypal</button>
<button id="demo2" class="btn btn-warning"><i class="fas fa-coffee"></i> Buy me a coffee</button>
<button id="demo3" class="btn btn-danger"><i class="fas fa-money-bill"></i> Support my work</button>
</div>
</div>
</body>
<div style="position: fixed;bottom: 5%;right: 5%;">
<h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5>
<div style="display: flex;align-items: center;">
<a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a>
<a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
(function($){
$.fn.donationModal = function(options) {
let settings = $.extend({
currencies: ['EUR', 'USD'],
modalSize: 'md',
email: '',
selectedCurrency: 'EUR',
defaultAmount: 2.99,
amountLabel: 'Donation amount',
itemName: 'Donation',
itemNumber: '000001',
redirectSuccess: '',
redirectFailed: '',
buttonClass: '',
buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'
}, options);
let ShowModal = function(){
let html = '',
modal = $('<div class="modal" tabindex="-1" role="dialog" id="DonationModal"></div>'),
dialog = $('<div class="modal-dialog modal-' + settings.modalSize + '" role="document"></div>'),
content = $('<div class="modal-content"></div>'),
body = $('<div class="modal-body mt-4"></div>'),
close = $('<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>');
close.css({
position: "absolute",
right: "5px",
opacity: 1
});
content.append(close);
html += '<form target="paypal" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">';
html += ' <input type="hidden" name="custom" value="587">';
html += ' <div class="form-group">';
html += ' <label for="amount">' + settings.amountLabel + '</label>';
html += ' <div class="input-group flex-nowrap mb-3">';
html += ' <input class="form-control" id="amount" type="number" name="amount" value="' + settings.defaultAmount + '">';
html += ' <div class="input-group-append">';
html += ' <select name="currency_code" class="form-control" aria-label="">';
$.each(settings.currencies, function (k, v) {
html += ' <option value="' + v + '">' + v + '</option>';
});
html += ' </select>';
html += ' </div>';
html += ' </div>';
html += ' </div>';
html += ' <input type="hidden" name="cmd" value="_donations">';
html += ' <input type="hidden" name="item_name" value="' + settings.itemName + '">';
html += ' <input type="hidden" name="item_number" value="' + settings.itemNumber + '">';
html += ' <input type="hidden" name="business" value="' + settings.email + '">';
html += ' <input type="hidden" name="return" value="' + settings.redirectSuccess + '">';
html += ' <input type="hidden" name="cancel_return" value="' + settings.redirectFailed + '">';
html += ' <div class="form-group mb-0 d-flex justify-content-end w-100">';
html += ' <button type="submit" name="submit" class="btn btn-' + settings.buttonClass + '" id="payout" style="position:relative;">' + settings.buttonHTML + '</button>';
html += ' </div>';
html += '</form>';
body.append(html);
content.append(body);
dialog.append(content);
modal.append(dialog);
$("body").append(modal);
modal.modal("show");
};
let build = function (e) {
if(settings.email.length === 0)
{
console.log("Donation Button: Invalid business email");
return false;
}
// Create modal element
$(e).click(function (event) {
event.preventDefault();
ShowModal();
});
// Clear te DOM after modal element is closed/disappear
$(document).on("bs.hide.modal", "#DonationModal", function () {
$(this).remove();
})
};
return this.each(function() {
return new build(this, settings);
});
};
})(jQuery);
$("#demo1").donationModal({
currencies: ['EUR', 'USD'],
modalSize: 'sm',
email: 'yourpaypalemail@email.com',
selectedCurrency: 'EUR',
defaultAmount: 2.99,
amountLabel: 'Donation amount',
itemName: 'Donation',
itemNumber: '000001',
redirectSuccess: '',
redirectFailed: '',
buttonClass: 'primary',
buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'
});
$("#demo2").donationModal({
currencies: ['EUR', 'USD'],
modalSize: 'md',
email: 'yourpaypalemail@email.com',
selectedCurrency: 'EUR',
defaultAmount: 2.99,
amountLabel: 'Donation amount',
itemName: 'Donation',
itemNumber: '000001',
redirectSuccess: '',
redirectFailed: '',
buttonClass: 'warning',
buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'
});
$("#demo3").donationModal({
currencies: ['EUR', 'USD'],
modalSize: 'lg',
email: 'yourpaypalemail@email.com',
selectedCurrency: 'EUR',
defaultAmount: 2.99,
amountLabel: 'Donation amount',
itemName: 'Donation',
itemNumber: '000001',
redirectSuccess: '',
redirectFailed: '',
buttonClass: 'danger',
buttonHTML: '<i class="fab fa-paypal"></i> Continue to paypal'
});
