donate.html

---
layout: default
redirect_from:
  - /involve
---

<section class="l-wrapper-small">
  <h1><span class="main-headline">Donations</span></h1>
  <div>
    <p class="main-intro">
      DCFemTech accepts donations in the form of both direct donations and sponsorships. Donations are tax-deductible through our fiscal sponsor, <a href="https://districtciviclabs.org">District Civic Labs</a>. Sponsorships can include in-kind space donation, a charitable contribution of funds, or sponsorships of our events: DCFemTech Awards, Inspire, Tour De Code, and more! To learn more about supporting DCFemTech please <a href="mailto:info@dcfemtech.com">email us</a>!
    </p>
  </div>
  <div class="m-donate">
    <form id="donation-form">
      <div id="donate">
        <label for="donation-amount">Amount (to the nearest dollar)</label>
        <input type="number" id="donation-amount" class="form-control" value="25" aria-label="Amount (to the nearest dollar)">
        <label for="special-instructions">Special instructions</label>
        <input type="text" class="form-control" id="special-instructions" placeholder="Special instructions">
        <input type="checkbox" id="cover-fees" />
        <label for="cover-fees">Cover processing fees (2.2% + $0.30)</label>


        <button type="submit" class="btn btn-primary" id="donationButton">Submit</button>
      </div>
    </form>
  </div>
  {% include annual-sponsors.html %}
</section>

<script src="https://checkout.stripe.com/checkout.js"></script>
<script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
<script type="text/javascript">
  var apiKey;
  var account;
  var donationAmount = document.getElementById('donation-amount');
  // This looks sketchy, but it's a conversion from dollars to cents because that's
  // what Stripe expects to receive. For example, $25.00 is sent as 2500.
  var amount = Number(donationAmount.value) * 100;

  var updateAmount = function(){
    amount = Number(donationAmount.value);
    if (document.getElementById('cover-fees').checked) {
      amount = (amount * 1.022) + 0.30;
    }
    // Round to two decimal places
    amount = Math.round((amount + 0.00001) * 100) / 100;
    // Back to cents
    amount = amount * 100
    // Trim off any fractions of a cents
    amount = Math.trunc(amount);
    document.getElementById('donationButton').textContent = "Make $"+(amount/100)+" donation";
  }
  donationAmount.addEventListener('keyup', updateAmount);
  document.getElementById('cover-fees').addEventListener('click', updateAmount);
  updateAmount();

  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
    // Check to see if we are working locally and should use test data.
    apiKey = 'pk_test_WdOeHxK5PRn9H3Crlf0pYYYP';
    account = 'test';
  } else {
    // Use the live key.
    // Stripe is fine with publishing the *public* API key. There's a separate
    // secret one that allows for the actual charging of cards and such.
    apiKey = 'pk_live_PNIueSBxjLHRvhkp9VR4vl4a';
    account = 'live';
  }

  var handler = StripeCheckout.configure({
  key: apiKey,
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
    var instruction = document.getElementById('special-instructions').value
    // Send a request to our AWS Lambda function, which handles the
    // secret Stripe stuff.
    let send = JSON.stringify({
      "token": token.id,
      "amount": amount,
      "instruction": instruction,
      "email": token.email,
      "account": account
    });
    $.post("https://b9sq87esw7.execute-api.us-east-2.amazonaws.com/prod/dcfemtech-stripe-processor", send, function(data, status){
      if (data.chargeSuccess) {
        $('#donation-form').before('<p class="m-members__callout" id="donation-status" role="alert"><b>'+data.message+'</b></p>')
      } else {
        $('#donation-form').before('<p style="color: #721c24; background-color: #f8d7da; border-color: #f5c6cb;" id="donation-status" role="alert"><b>'+data.message+'</b></p>')
      }
    });
  }
  });

  document.getElementById('donationButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'DCFemTech',
    description: 'Donation',
    image: 'https://dcfemtech.com/assets/fav.png',
    amount: amount,
    allowRememberMe: false
  });
  e.preventDefault();
  });

  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
  handler.close();
  });

</script>