Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Stripe Tip Jar
<div class="card ">
<h1>Tip Jar</h1>
<p>Almost everything I make is from a labour of love, provided free to you. If my projects have provided
you value and you wish to say thanks, that's super awesome!</p>
<div class="radio-tile-group">
<div class="input-container" style="margin-left: 0;">
<input id="500" class="radio-button" type="radio" name="amountradio" value="500" onclick="amountChanged();" />
<div class="radio-tile">
<label for="500" class="radio-tile-label">$5</label>
</div>
</div>
<div class="input-container">
<input id="1000" class="radio-button" type="radio" name="amountradio" value="1000" checked onclick="amountChanged();" />
<div class="radio-tile">
<label for="1000" class="radio-tile-label">$10</label>
</div>
</div>
<div class="input-container">
<input id="2000" class="radio-button" type="radio" name="amountradio" value="2000" onclick="amountChanged();" />
<div class="radio-tile">
<label for="2000" class="radio-tile-label">$20</label>
</div>
</div>
<div class="input-container" style="margin-right: 0;">
<input type="number" name="otheramount" id="otheramount" oninput="handleOtherChange();" placeholder="Other">
</div>
</div>
<p style=" text-align: center;font-size: 60%;margin-top: 20px;margin-bottom: 3px;">Tip $
<span id="amountoutput">10</span>USD!
</p>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<div id="payment-request-button" style=" margin: 0 10px;">
<!-- A Stripe Element will be inserted here. -->
</div>
<div id="paymentbuttons">
<button class="tip-button" id="stripebutton">
<svg style=" height: 30px;" aria-hidden="true" data-prefix="fal" data-icon="credit-card"
class="svg-inline--fa fa-credit-card fa-w-18" role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
<path fill="white" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM48 64h480c8.8 0 16 7.2 16 16v48H32V80c0-8.8 7.2-16 16-16zm480 384H48c-8.8 0-16-7.2-16-16V224h512v208c0 8.8-7.2 16-16 16zm-336-84v8c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v8c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"></path>
</svg>
</button>
<button class="tip-button" id="paypalbutton">
<svg style=" height: 30px;" aria-hidden="true"
data-prefix="fab" class="svg-inline--fa fa-paypal fa-w-12" role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512">
<path fill="white" d="M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z"></path>
</svg>
</button>
</div>
</div>
.radio-tile-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.radio-tile-group .input-container {
position: relative;
height: 4rem;
width: 4rem;
margin: 0.5em;
}
.radio-tile-group .input-container .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
.radio-tile-group .input-container .radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid rgb(243, 166, 54);
border-radius: 5px;
/* padding: 1rem;
*/
transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
.radio-tile-group .input-container .radio-tile-label {
text-align: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: rgb(243, 166, 54);
}
.radio-tile-group .input-container .radio-button:checked + .radio-tile {
background-color: rgb(243, 166, 54);
border: 2px solid rgb(243, 166, 54);
color: white;
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
color: white;
background-color: rgb(243, 166, 54);
}
#otheramount {
font-weight: 600;
text-align: center;
position: relative;
height: 100%;
width: 100%;
border: 2px solid rgb(243, 166, 54);
border-radius: 5px;
padding: 0;
color: rgb(243, 166, 54);
font-size: 100%;
transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
#otheramount.active {
background-color: rgb(243, 166, 54);
border: 2px solid rgb(243, 166, 54);
color: white;
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.