You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

67 lines
3.3 KiB
HTML

<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="page" data-name="addfunds">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only back">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title">Add Funds</div>
</div>
</div>
<div class="page-content">
<div class="block">
<div class="row justify-content-center">
<div class="col-100 tablet-50 desktop-25">
<div class="card">
<div class="card-content card-content-padding">
<div class="money-input-box">
<div class="currency">$</div>
<input type="tel" min="1.00" max="999.99" placeholder="0.00" id="funds-amount" class="money-input" />
</div>
<p class="segmented segmented-raised segmented-round">
<button class="button button-round preset-amount-button" data-target="#funds-amount" data-amount="10.00">$10</button>
<button class="button button-round preset-amount-button" data-target="#funds-amount" data-amount="20.00">$20</button>
<button class="button button-round preset-amount-button" data-target="#funds-amount" data-amount="50.00">$50</button>
</p>
<div class="margin-vertical padding-top">
<div id="card-element">
<i class="fas fa-spin fa-spinner"></i> Loading secure card form...
</div>
<div id="card-errors" role="alert"></div>
</div>
<p class="text-color-green">
<i class="fas fa-lock"></i> We don't see your card number; it's sent directly and securely to our payment processor.
<p>
<i class="fas fa-info-circle"></i> Your account balance won't gain the entire amount you choose.
<span id="tx-off-percent">7</span>% (or the card fees, whichever is greater) is subtracted to
cover fees and maintenance costs. <a href="" class="link" onclick="addFeesToAmount()">Tap here</a> to add
the fees to your total.
</div>
<div class="card-footer display-block padding-vertical">
<div class="button button-large button-fill button-round button-raised" onclick="chargeCard()">
<i class="fas fa-credit-card"></i> Charge Card
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script src="js/addfunds.js"></script>
</div>