Browse Source

Add credit card processing for givers (close #3)

master
Skylar Ittner 3 years ago
parent
commit
75d1f2322e
  1. 87
      www/js/addfunds.js
  2. 2
      www/js/map.js
  3. 67
      www/pages/addfunds.html
  4. 40
      www/pages/fundsadded.html
  5. 2
      www/pages/home.html
  6. 15
      www/routes.js
  7. 5
      www/settings.template.js

87
www/js/addfunds.js

@ -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"));
});

2
www/js/map.js

@ -22,7 +22,7 @@ leafletmap.attributionControl.setPrefix("");
var leafletgllayer = L.mapboxGL({
attribution: "© OpenMapTiles © OpenStreetMap contributors",
accessToken: 'none',
style: 'https://maps.netsyms.net/styles/klokantech-3d-gl/style.json',
style: SETTINGS["map_style_json"],
pitch: 0
});

67
www/pages/addfunds.html

@ -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>

40
www/pages/fundsadded.html

@ -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>

2
www/pages/home.html

@ -50,7 +50,7 @@
</div>
{{else}}
<div class="card-footer">
<a href="#" class="link">
<a href="/addfunds" class="link">
<i class="fas fa-credit-card fa-fw"></i> Add Funds
</a>
<a href="/sendmoney/0" class="link">

15
www/routes.js

@ -48,6 +48,21 @@ var routes = [
templateUrl: './pages/moneysent.html',
name: 'moneysent'
},
{
path: '/addfunds',
templateUrl: './pages/addfunds.html',
name: 'addfunds',
on: {
pageAfterIn: function () {
initPaymentPage();
}
}
},
{
path: '/fundsadded/:amount/:final_amount',
templateUrl: './pages/fundsadded.html',
name: 'fundsadded'
},
{
path: '/updateprofile',
templateUrl: './pages/updateprofile.html',

5
www/settings.template.js

@ -11,5 +11,8 @@ var SETTINGS = {
server: "http://localhost/helpinghelena/api",
webapp_url: "https://app.helpinghelena.org/",
terms_of_service_url: "https://netsyms.com/legal?pk_campaign=HelpingHelenaApp",
min_password_length: 8
min_password_length: 8,
map_style_json: "https://maps.netsyms.net/styles/klokantech-3d-gl/style.json",
stripe_pubkey: "",
addfunds_percent: 0.07
};
Loading…
Cancel
Save