Switch to new payment method endpoints

account/make_a_payment/make_a_payment.js

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