Add credit card processing for givers (close #3)
parent
3cad059dbe
commit
75d1f2322e
@ -0,0 +1,87 @@
|
|||||||
|
/*
|
||||||
|
* 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/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var stripe = null;
|
||||||
|
var elements = null;
|
||||||
|
var card = null;
|
||||||
|
|
||||||
|
function initPaymentPage() {
|
||||||
|
$("#tx-off-percent").text(+(SETTINGS["addfunds_percent"] * 100).toFixed(2));
|
||||||
|
initStripe();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initStripe() {
|
||||||
|
// Wait for Stripe to be loaded
|
||||||
|
if (typeof Stripe == 'undefined') {
|
||||||
|
setTimeout(initStripe, 500);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
stripe = Stripe(SETTINGS["stripe_pubkey"]);
|
||||||
|
elements = stripe.elements();
|
||||||
|
|
||||||
|
card = elements.create('card', {});
|
||||||
|
|
||||||
|
card.mount('#card-element');
|
||||||
|
|
||||||
|
card.addEventListener('change', function (event) {
|
||||||
|
var displayError = document.getElementById('card-errors');
|
||||||
|
if (event.error) {
|
||||||
|
displayError.textContent = event.error.message;
|
||||||
|
} else {
|
||||||
|
displayError.textContent = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addFeesToAmount() {
|
||||||
|
if ($("#funds-amount").val() == "") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var amount = $("#funds-amount").val() * 1.0;
|
||||||
|
|
||||||
|
var stripefees = 0.30 + (amount * 0.029);
|
||||||
|
var totalfees = amount * SETTINGS["addfunds_percent"];
|
||||||
|
|
||||||
|
amount = (amount + (stripefees > totalfees ? 0.30 : 0)) /
|
||||||
|
(1 - (stripefees > totalfees ? 0.029 : SETTINGS["addfunds_percent"]));
|
||||||
|
|
||||||
|
$("#funds-amount").val(amount.toFixed(2));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function chargeCard() {
|
||||||
|
if ($("#funds-amount").val() == "") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (stripe == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
app.preloader.show();
|
||||||
|
stripe.createToken(card).then(function (result) {
|
||||||
|
if (result.error) {
|
||||||
|
// Inform the customer that there was an error.
|
||||||
|
app.preloader.hide();
|
||||||
|
var errorElement = document.getElementById('card-errors');
|
||||||
|
errorElement.textContent = result.error.message;
|
||||||
|
} else {
|
||||||
|
callAPI("addfunds", {
|
||||||
|
key: localStorage.getItem("key"),
|
||||||
|
amount: $("#funds-amount").val(),
|
||||||
|
token: result.token.id
|
||||||
|
}, function (response) {
|
||||||
|
app.preloader.hide();
|
||||||
|
router.navigate("/fundsadded/" + response.charged_amount.toFixed(2) + "/" + response.final_amount.toFixed(2));
|
||||||
|
}, function (error) {
|
||||||
|
app.preloader.hide();
|
||||||
|
app.dialog.alert(error, "Error");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".preset-amount-button").click(function () {
|
||||||
|
$($(this).data("target")).val($(this).data("amount"));
|
||||||
|
});
|
@ -0,0 +1,67 @@
|
|||||||
|
<!-- 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>
|
@ -0,0 +1,40 @@
|
|||||||
|
<!-- 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="fundsadded">
|
||||||
|
|
||||||
|
<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">Funds Added</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 bg-color-green">
|
||||||
|
<div class="card-content card-content-padding text-align-center text-color-white color-theme-white">
|
||||||
|
<img style="max-height: 150px;" src="img/bigcheck.svg" alt="Checkmark"/>
|
||||||
|
|
||||||
|
<h3>You paid ${{this.$route.params.amount}} total and added ${{this.$route.params.final_amount}} to your balance.</h3>
|
||||||
|
|
||||||
|
<a class="button button-outline" href="/home">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
Loading…
Reference in New Issue