Sponsorship: document donation fees for Open Collective (#152)

* Sponsorship: document donation fees for Open Collective

* fix layout on mobile

sponsorship.md

@@ -39,11 +39,109 @@ There are currently no members of the Linux Foundation Europe Directed Fund’s
 
 If your organization is interested in becoming a member, please contact us at <join@servo.org> or enroll at the [Linux Foundation member enrollment page](https://enrollment.lfx.linuxfoundation.org/?project=servo).
 
+## Donation fees
+
+The fees for donations on Open Collective depend on how much you donate in a single transaction, and what payment method you use:
+
+- Donating at least **5 USD** at a time ensures that **over 80%** goes to Servo
+- Donating at least **50 USD** at a time ensures that **over 90%** goes to Servo
+- Donating with Stripe is almost always better for Servo than donating with PayPal
+
+<figure class="_donation_fees">
+
+| Fees for... | 5 USD | 10 USD | 20 USD | 50 USD | 100 USD | 1000 USD |
+|---|---|---|---|---|---|---|
+| Stripe (ACH) |
+| Stripe (card, USA) |
+| Stripe (card, international) |
+| Stripe (card, worst case) |
+| PayPal (USA) |
+| PayPal (international) |
+</figure>
+
+The exact fees for donations on GitHub Sponsors are still being worked out with GitHub, but we’ll post them here once we know.
+
+<script>
+  const hostFee = x => 0.04 * x;
+  const fees = {
+    // Stripe for USA merchants
+    // <https://stripe.com/us/pricing>
+    // - > Payments > Bank debits and transfers (for ACH)
+    // - > Payments > Cards and wallets (for card)
+    //   - plus “international cards” (for international)
+    //   - plus “currency conversion” too (for worst case)
+    //   - no “manually entered cards”
+    "Stripe (ACH)": x => 30 + 0.008 * x,
+    "Stripe (card, USA)": x => 30 + 0.029 * x,
+    "Stripe (card, international)": x => 30 + (0.029 + 0.015) * x,
+    "Stripe (card, worst case)": x => 30 + (0.029 + 0.015 + 0.01) * x,
+    // PayPal for USA merchants
+    // <https://www.paypal.com/us/webapps/mpp/merchant-fees#statement-2>
+    // > Commercial Transaction Rates
+    // - > Fixed fee for commercial transactions (based on currency received) > US dollar
+    // - plus > Standard rate for receiving domestic transactions > PayPal Guest Checkout
+    //   - currently same as “PayPal Checkout”
+    // - plus > Additional percentage-based fee for international commercial transactions
+    //   (for international)
+    "PayPal (USA)": x => 49 + 0.0349 * x,
+    "PayPal (international)": x => 49 + (0.0349 + 0.015) * x,
+  };
+  function updateOpenCollectiveTable() {
+    const table = document.querySelector("table");
+    const exampleDonations = [...table.rows[0].cells].slice(1)
+      .map(x => parseInt(x.textContent, 10) * 100);
+    for (const row of [...table.rows].slice(1)) {
+      const paymentProcessor = row.cells[0].textContent;
+      for (const [i, donation] of exampleDonations.entries()) {
+        const fee = fees[paymentProcessor](donation) + hostFee(donation);
+        const net = donation - fee;
+        const feeText = (Math.ceil(fee) / 100).toFixed(2);
+        const netText = (Math.ceil(net) / 100).toFixed(2);
+        const feePercentText = (100 * fee / donation).toFixed(1);
+        const netPercentText = (100 * net / donation).toFixed(1);
+        const netClass = net / donation >= 0.9 ? "_net _net90" : "_net";
+        row.cells[i + 1].innerHTML = `
+          <span class="_fee">− ${feeText} (${feePercentText}%)</span>
+          <br><strong class="${netClass}">= ${netText} (${netPercentText}%)</strong>
+        `;
+      }
+    }
+  }
+  updateOpenCollectiveTable();
+</script>
+
 <style>
   ._note {
     margin: 1em 1em;
     border-left: 1px solid;
     padding-left: 1em;
     opacity: 0.75;
   }
+  ._donation_fees {
+    overflow-x: auto;
+  }
+  ._donation_fees table {
+    width: max-content;
+  }
+  ._donation_fees tr > *:not(#specificity) {
+    text-align: left;
+  }
+  ._donation_fees tr > *:nth-child(1) {
+    /* Freeze the first cell of each row. */
+    position: sticky;
+    left: 0;
+    /* Hide other cells that overlap when scrolling. */
+    background: #121619;
+    z-index: 1;
+  }
+  ._fee {
+    opacity: 0.75;
+  }
+  ._net {
+    opacity: 0.75;
+  }
+  ._net90 {
+    opacity: 1;
+    color: #42BF64;
+  }
 </style>