Last active
July 17, 2026 16:08
-
-
Save vadimkantorov/747817a6815b1c88c72762eafd19c9fa to your computer and use it in GitHub Desktop.
PayPal donation form primer (with preset amounts and custom amount) in pure HTML / CSS without any JavaScript or tracking pixels
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- | |
| - Modeled after PayPal Giving Fund donation form: https://www.paypal.com/fr/fundraiser/charity/4864486 | |
| - Supports preset donation amounts and custom amount | |
| - Contains two HTML forms because cannot put in a single form radio preset amount input and text custom amount input | |
| - Inlines in two copies of business email, currency code, item name (for https://russie-Libertes.org) | |
| - Verification/tracking pixel must be used for method="post" | |
| - Default preset amount is highlighted with a heart symbol | |
| - Unique form ids must be used for several forms | |
| --> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>PayPal donation form</title> | |
| <style> | |
| :root { | |
| --paypal-margin: 5px; | |
| --paypal-border-radius-small: 5px; | |
| --paypal-border-radius-big: 25px; | |
| --paypal-height: 50px; | |
| --paypal-width: 60px; | |
| --paypal-color-accent: white; | |
| --paypal-background-color-accent: rgb(0, 48, 135); | |
| --paypal-color-fade: gray; | |
| --paypal-color-currency-code: rgb(84, 93, 104); | |
| } | |
| .paypal-donate-box { | |
| display: inline-block; | |
| border: 1px solid var(--paypal-color-fade); | |
| border-radius: var(--paypal-border-radius-small) var(--paypal-border-radius-small) var(--paypal-border-radius-big) var(--paypal-border-radius-big); | |
| } | |
| .paypal-preset-amount-form, .paypal-custom-amount-form { display: flex } | |
| .paypal-lead { margin: var(--paypal-margin) } | |
| .paypal-preset-amount-form:has(.paypal-custom-amount-option:checked) + .paypal-custom-amount-form { visibility: visible } | |
| .paypal-preset-amount-form:has(.paypal-custom-amount-option:checked) + .paypal-custom-amount-form + .paypal-donate-button-container > .paypal-donate-custom-button { display: block !important } | |
| .paypal-preset-amount-form:has(.paypal-custom-amount-option:checked) + .paypal-custom-amount-form + .paypal-donate-button-container > .paypal-donate-preset-button { display: none !important } | |
| .paypal-select-amount-label { | |
| display: flex; | |
| flex-direction: column; | |
| text-align: center; | |
| height: var(--paypal-height); | |
| width: var(--paypal-width); | |
| padding: var(--paypal-margin); | |
| margin: var(--paypal-margin); | |
| border: 1px solid var(--paypal-color-fade); | |
| border-radius: var(--paypal-border-radius-small); | |
| box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .paypal-select-amount-label:hover { border: 1px solid var(--paypal-background-color-accent) !important } | |
| .paypal-select-amount-label:has(.paypal-select-amount:checked) { color: var(--paypal-color-accent) !important; background-color: var(--paypal-background-color-accent) !important; } | |
| .paypal-select-amount-label:not(:has(.paypal-select-amount:checked)) > .paypal-currency-code { color: var(--paypal-color-currency-code) } | |
| .paypal-select-amount { appearance: none; } | |
| .paypal-custom-amount-form { visibility: hidden; } | |
| .paypal-custom-amount { width: 100%; font-size: large; margin: var(--paypal-margin); } | |
| .paypal-donate-button-container { margin: var(--paypal-margin) } | |
| .paypal-donate-custom-button { display: none } | |
| .paypal-donate-custom-button, .paypal-donate-preset-button { | |
| width: 100%; | |
| font-size: large; | |
| height: var(--paypal-height); | |
| color: var(--paypal-color-accent); | |
| background-color: var(--paypal-background-color-accent); | |
| border: 1px solid var(--paypal-background-color-accent); | |
| border-radius: var(--paypal-border-radius-big); | |
| } | |
| .paypal-select-amount-label:has(.paypal-select-amount[checked])::after { | |
| content: "\2665"; | |
| color: red; | |
| font-size: x-large; | |
| position: relative; | |
| top: -100%; | |
| left: 40%; | |
| opacity: 0.8; | |
| pointer-events: none; /* Allows clicks to pass through to image */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="paypal-donate-box"> | |
| <!-- <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" style="width: 1px; height: 1px; border: 0px" /> --> | |
| <p class="paypal-lead">Make a donation to <a href="https://russie-libertes.org">Russie-Libertés</a></p> | |
| <form action="https://www.paypal.com/donate" method="get" target="_top" class="paypal-preset-amount-form" id="paypal-preset-amount-form-1"> | |
| <input type="hidden" name="cmd" value="_donations" /> | |
| <input type="hidden" name="no_recurring" value="0" /> | |
| <input type="hidden" name="item_name" value="Donation"/> | |
| <input type="hidden" name="business" value=contact@russie-libertes.org /> | |
| <input type="hidden" name="currency_code" value="EUR" /> | |
| <label class="paypal-select-amount-label"><input class="paypal-select-amount" type="radio" name="amount" value="20" /><span class="paypal-amount">20 €</span><span class="paypal-currency-code">EUR</span></label> | |
| <label class="paypal-select-amount-label"><input class="paypal-select-amount" type="radio" name="amount" value="50" checked /><span class="paypal-amount">50 €</span><span class="paypal-currency-code">EUR</span></label> | |
| <label class="paypal-select-amount-label"><input class="paypal-select-amount" type="radio" name="amount" value="100" /><span class="paypal-amount">100 €</span><span class="paypal-currency-code">EUR</span></label> | |
| <label class="paypal-select-amount-label"><input class="paypal-select-amount paypal-custom-amount-option" type="radio" name="amount" /><span class="paypal-amount-custom">Custom amount</span></label> | |
| </form> | |
| <form action="https://www.paypal.com/donate" method="get" target="_top" class="paypal-custom-amount-form" id="paypal-custom-amount-form-1"> | |
| <input type="hidden" name="cmd" value="_donations" /> | |
| <input type="hidden" name="no_recurring" value="0" /> | |
| <input type="hidden" name="item_name" value="Donation"/> | |
| <input type="hidden" name="business" value="contact@russie-libertes.org" /> | |
| <input type="hidden" name="currency_code" value="EUR" /> | |
| <input class="paypal-custom-amount" name="amount" type="number" min="1" step="1" max="10000" inputmode="numeric" required placeholder="Custom amount" /><!-- pattern="[1-9][0-9]*" --> | |
| </form> | |
| <div class="paypal-donate-button-container"> | |
| <button class="paypal-donate-preset-button" type="submit" form="paypal-preset-amount-form-1">Donate via PayPal</button> | |
| <button class="paypal-donate-custom-button" type="submit" form="paypal-custom-amount-form-1">Donate via PayPal</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Result: