Bootstrap Snippet PayPal donation modal using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 (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">';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"PayPal donation modal"
Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"PayPal donation modal" Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"PayPal donation modal"
Bootstrap 4.1.1 Snippet by MMLTech