brad/lmc
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Switch to new payment method endpoints

Browse Source
This commit is contained in:
L. Bradley LaBoon
2024-06-17 18:21:01 -04:00
parent 5f89bdcb1a
commit 59889d6910
7 changed files with 198 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
account/make_a_payment/index.shtml
View File

@ -32,62 +32,25 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<table class="lmc-table">
<thead>
<tr>
<td colspan="3">Make a Payment</td>
<td colspan="2">Make a Payment</td>
</tr>
</thead>
<tbody>
<tr class="lmc-tr3">
<td>Current Balance</td>
<td id="balance" class="balance-positive"></td>
<td></td>
</tr>
</tbody>
<tbody class="lmc-tbody-head">
<tr class="noshow">
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3">Make a Payment - via Credit Card</td>
</tr>
</tbody>
<tbody>
<tr class="lmc-tr3">
<td>Current Card</td>
<td>xxxxxxxxxxxx<span id="cc-number"></span> Exp: <span id="cc-exp"></span></td>
<td class="info"><a href="/account/creditcard">(update credit card)</a></td>
</tr>
<tr class="lmc-tr3">
<td>Amount to Charge</td>
<td><input id="cc-amount" type="number" min="0" max="50000" step="0.01" value="0.00" /> <span class="info">(USD)</span></td>
<td></td>
<td><input id="cc-amount" type="number" min="5" max="2000" step="0.01" value="5.00" /> <span class="info">(USD)</span></td>
</tr>
<tr class="lmc-tr3">
<td>CVV</td>
<td><input id="cvv" type="text" size="8" /> <span class="info">(optional)</span></td>
<td></td>
<td>Payment Method</td>
<td><select id="method"></select></td>
</tr>
<tr class="lmc-tr3">
<td></td>
<td colspan="2"><button disabled id="cc-charge" type="button">Charge Credit Card</button></td>
</tr>
</tbody>
<tbody class="lmc-tbody-head">
<tr class="noshow">
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3">Make a Payment - via PayPal</td>
</tr>
</tbody>
<tbody>
<tr class="lmc-tr3">
<td>Amount to Pay</td>
<td><input id="paypal-amount" type="number" min="0" max="10000" step="0.01" value="0.00" /> <span class="info">(USD)</span></td>
<td></td>
</tr>
<tr class="lmc-tr3">
<td></td>
<td colspan="2"><button disabled id="paypal-charge" type="button">Continue...</button></td>
<td><button disabled id="cc-charge" type="button">Make Payment</button></td>
</tr>
</tbody>
</table>

77
account/make_a_payment/make_a_payment.js
View File

@ -24,25 +24,18 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader } from "/
elements.balanceNegative = "balance-negative";
elements.ccAmount = "cc-amount";
elements.ccCharge = "cc-charge";
elements.ccExp = "cc-exp";
elements.ccNumber = "cc-number";
elements.cvv = "cvv";
elements.paypalAmount = "paypal-amount";
elements.paypalCharge = "paypal-charge";
elements.method = "method";
// Data received from API calls
var data = {};
data.methods = [];
// Static references to UI elements
var ui = {};
ui.balance = {};
ui.ccAmount = {};
ui.ccCharge = {};
ui.ccExp = {};
ui.ccNumber = {};
ui.cvv = {};
ui.paypalAmount = {};
ui.paypalCharge = {};
ui.method = {};
// Callback for account details API call
var displayAccount = function(response)
@ -53,17 +46,55 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader } from "/
} else if (response.balance > 0) {
ui.balance.innerHTML += response.balance.toFixed(2) + " outstanding";
ui.balance.className = elements.balanceNegative;
if (response.balance < 5) {
ui.ccAmount.min = response.balance.toFixed(2);
ui.ccAmount.value = response.balance.toFixed(2);
} else if (response.balance > 2000) {
ui.ccAmount.max = Math.min(50000, response.balance.toFixed(2));
}
} else {
ui.balance.innerHTML += response.balance.toFixed(2);
}
if (response.credit_card) {
ui.ccNumber.innerHTML = response.credit_card.last_four;
ui.ccExp.innerHTML = response.credit_card.expiry;
ui.ccCharge.disabled = false;
};
// Callback for payment methods API call
var displayMethods = function(response)
{
data.methods = data.methods.concat(response.data);
// Request the next page if there are more
if (response.page != response.pages) {
apiGet("/account/payment-methods?page=" + (response.page + 1), displayMethods, null);
return;
}
var typeNames = {
"credit_card": "Credit Card",
"google_pay": "Google Pay",
"paypal": "PayPal"
};
for (var i = 0; i < data.methods.length; i++) {
var option = document.createElement("option");
option.value = data.methods[i].id;
if (typeNames[data.methods[i].type])
option.innerHTML = typeNames[data.methods[i].type];
else
option.innerHTML = data.methods[i].type;
if (data.methods[i].type == "credit_card" || data.methods[i].type == "google_pay")
option.innerHTML += ": " + data.methods[i].data.card_type + " ****" + data.methods[i].data.last_four;
else if (data.methods[i].type == "paypal")
option.innerHTML += ": " + data.methods[i].data.email;
ui.method.appendChild(option);
if (data.methods[i].is_default) {
option.innerHTML += " (default)";
ui.method.value = data.methods[i].id;
}
}
ui.ccCharge.disabled = false;
//ui.paypalCharge.disabled = false;
};
// Click handler for CC charge button
@ -76,10 +107,9 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader } from "/
return;
var req = {
"payment_method_id": parseInt(ui.method.value),
"usd": ui.ccAmount.value
};
if (ui.cvv.value.length)
req.cvv = ui.cvv.value;
apiPost("/account/payments", req, function(response)
{
@ -87,13 +117,6 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader } from "/
});
};
// Click handler for PayPal button
var handlePayPal = function(event)
{
if (event.currentTarget.disabled)
return;
};
// Initial setup
var setup = function()
{
@ -106,18 +129,14 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader } from "/
ui.balance = document.getElementById(elements.balance);
ui.ccAmount = document.getElementById(elements.ccAmount);
ui.ccCharge = document.getElementById(elements.ccCharge);
ui.ccExp = document.getElementById(elements.ccExp);
ui.ccNumber = document.getElementById(elements.ccNumber);
ui.cvv = document.getElementById(elements.cvv);
ui.paypalAmount = document.getElementById(elements.paypalAmount);
ui.paypalCharge = document.getElementById(elements.paypalCharge);
ui.method = document.getElementById(elements.method);
// Register event handlers
ui.ccCharge.addEventListener("click", handleCharge);
ui.paypalCharge.addEventListener("click", handlePayPal);
// Get data from API
apiGet("/account", displayAccount, null);
apiGet("/account/payment-methods", displayMethods, null);
};
// Attach onload handler