|
5 | 5 | <div class="container"> |
6 | 6 | <div class="col-sm-12 starter-template"> |
7 | 7 | <h1>Donate</h1> |
| 8 | + <p>Support our work! Contributions of any size are helpful and welcome.</p> |
| 9 | + <p>All donations are fully tax-deductible through our fiscal sponsor, <a href="https://districtciviclabs.org">District Civic Labs</a>.</p> |
8 | 10 | </div> |
9 | 11 | <div class="col-sm-6 col-sm-offset-3"> |
10 | | - <p>Code for DC is an official brigade of <a href="http://www.codeforamerica.org">Code for America</a>, which is a 501(c)(3) non-profit organization. That means that you can donate to us through them! Click the button below to make that happen:</p> |
11 | | - <p class="text-center"> |
12 | | - <a class="btn btn-primary btn-lg" role="button" href="https://secure.codeforamerica.org/page/contribute/default?brigade=Code%20For%20DC">Click here to donate</a> |
13 | | - </p> |
| 12 | + <form id="donation-form"> |
| 13 | + <div class="form-group"> |
| 14 | + <label for="donation-amount"><strong>Amount</strong></label> |
| 15 | + <div class="input-group"> |
| 16 | + <input type="number" id="donation-amount" class="form-control" value="25" aria-label="Amount (to the nearest dollar)"> |
| 17 | + <span class="input-group-addon" id="basic-addon1">$</span> |
| 18 | + </div> |
| 19 | + </div> |
| 20 | + |
| 21 | + <div class="form-group"> |
| 22 | + <label for="special-instructions"><strong>Special Instructions</strong></label> |
| 23 | + <input type="text" class="form-control" id="special-instructions" placeholder=""> |
| 24 | + </div> |
| 25 | + |
| 26 | + <button type="submit" class="btn btn-primary" id="donationButton">Make donation</button> |
| 27 | + </form> |
| 28 | + |
| 29 | + <script src="/assets/js/jquery-3.2.1.min.js"></script> |
| 30 | + <script src="/assets/js/stripe.v3.min.js"></script> |
| 31 | + <script src="/assets/js/checkout.js"></script> |
| 32 | + <script> |
| 33 | + let apiKey; |
| 34 | + let account; |
| 35 | + if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { |
| 36 | + // Check if we are working locally and should use test data. |
| 37 | + apiKey = 'pk_test_NETzOLRKGqVNftlJdCarfUEN'; |
| 38 | + account = 'test'; |
| 39 | + } else { |
| 40 | + // Use the live key. |
| 41 | + // Stripe is fine with publishing the *public* API key. There's a separate |
| 42 | + // secret one that allows for the actual charging of cards and such. |
| 43 | + apiKey = 'pk_live_eb4XwCEE1e87bbZNKQrp7QiC'; |
| 44 | + account = 'live'; |
| 45 | + } |
| 46 | + const handler = StripeCheckout.configure({ |
| 47 | + key: apiKey, |
| 48 | + image: 'https://stripe.com/img/documentation/checkout/marketplace.png', |
| 49 | + locale: 'auto', |
| 50 | + token: function(token) { |
| 51 | + // You can access the token ID with `token.id`. |
| 52 | + // Get the token ID to your server-side code for use. |
| 53 | + // The "00" is there because Stripe deals in cents rather than dollars, but the form |
| 54 | + // only asks for a whole dollar amount. |
| 55 | + const amount = Number(document.getElementById('donation-amount').value + "00") |
| 56 | + const instruction = document.getElementById('special-instructions').value |
| 57 | + // Send a request to our AWS Lambda function, which handles the |
| 58 | + // secret Stripe stuff. |
| 59 | + let send = JSON.stringify({ |
| 60 | + "token": token.id, |
| 61 | + "amount": amount, |
| 62 | + "instruction": instruction, |
| 63 | + "email": token.email, |
| 64 | + "account": account |
| 65 | + }); |
| 66 | + $.post("https://b9sq87esw7.execute-api.us-east-2.amazonaws.com/prod/codefordc-stripe-processor", send, function(data, status){ |
| 67 | + if (data.chargeSuccess) { |
| 68 | + $('#donation-form').before('<p class="alert alert-success" id="donation-status" role="alert">'+data.message+'</p>') |
| 69 | + } else { |
| 70 | + $('#donation-form').before('<p class="alert alert-warning" id="donation-status" role="alert">'+data.message+'</p>') |
| 71 | + } |
| 72 | + }); |
| 73 | + } |
| 74 | + }); |
| 75 | + document.getElementById('donationButton').addEventListener('click', function(e) { |
| 76 | + // Open Checkout with further options: |
| 77 | + handler.open({ |
| 78 | + name: 'Code for DC', |
| 79 | + description: 'Donation', |
| 80 | + image: 'https://codefordc.org/assets/img/logo/code-for-dc-logo-256.png', |
| 81 | + amount: Number(document.getElementById('donation-amount').value + "00"), |
| 82 | + allowRememberMe: false |
| 83 | + }); |
| 84 | + e.preventDefault(); |
| 85 | + // Hide donation status if this isn't the first |
| 86 | + $('#donation-status').hide(500); |
| 87 | + }); |
| 88 | + // Close Checkout on page navigation: |
| 89 | + window.addEventListener('popstate', function() { |
| 90 | + handler.close(); |
| 91 | + }); |
| 92 | + </script> |
| 93 | + |
14 | 94 | </div> |
15 | 95 | </div> |
16 | 96 |
|
|
0 commit comments