Implemented charge up

main.go

@@ -159,7 +159,7 @@ func configure(app *aero.Application) *aero.Application {
 	// PayPal
 	app.Ajax("/paypal/success", paypal.Success)
 	app.Ajax("/paypal/cancel", paypal.Cancel)
-	app.Get("/api/paypal/payment/create", paypal.CreatePayment)
+	app.Post("/api/paypal/payment/create", paypal.CreatePayment)
 
 	// Assets
 	configureAssets(app)

pages/anime/anime.scarlet

@@ -101,6 +101,12 @@
 	opacity 0.7
 	margin-top 0.5rem
 
+	&.mountable
+		opacity 0 !important
+
+	&.mounted
+		opacity 0.7 !important
+
 .relations
 	horizontal-wrap
 

pages/charge/charge.pixy

@@ -1,3 +1,29 @@
 component Charge(user *arn.User)
 	ShopTabs(user)
-	p Coming soon.
+
+	h1.mountable Charge up
+
+	p.text-center.mountable You can charge up your balance via PayPal. 1 USD equals 100 gems.
+
+	.buttons
+		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=1000)
+			Icon("diamond")
+			span 1000
+
+		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=2000)
+			Icon("diamond")
+			span 2000
+
+		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=3000)
+			Icon("diamond")
+			span 3000
+
+		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=6000)
+			Icon("diamond")
+			span 6000
+
+		button.action.mountable(data-trigger="click", data-action="chargeUp", data-amount=12000)
+			Icon("diamond")
+			span 12000
+	
+	.footer.text-center.mountable You need to enable popup windows in your browser.

pages/paypal/paypal.go

@@ -17,12 +17,24 @@ func CreatePayment(ctx *aero.Context) string {
 		return ctx.Error(http.StatusUnauthorized, "Not logged in", nil)
 	}
 
+	amount := string(ctx.RequestBody())
+
+	// Verify amount
+	switch amount {
+	case "1000", "2000", "3000", "6000", "12000":
+		// OK
+	default:
+		return ctx.Error(http.StatusBadRequest, "Incorrect amount", nil)
+	}
+
+	// Initiate PayPal client
 	c, err := arn.PayPal()
 
 	if err != nil {
 		return ctx.Error(http.StatusInternalServerError, "Could not initiate PayPal client", err)
 	}
 
+	// Get access token
 	_, err = c.GetAccessToken()
 
 	if err != nil {
@@ -55,6 +67,9 @@ func CreatePayment(ctx *aero.Context) string {
 	// 	return ctx.Error(http.StatusInternalServerError, "Could not create PayPal web profile", err)
 	// }
 
+	total := amount[:len(amount)-2] + "." + amount[len(amount)-2:]
+
+	// Create payment
 	p := paypalsdk.Payment{
 		Intent: "sale",
 		Payer: &paypalsdk.Payer{
@@ -63,7 +78,7 @@ func CreatePayment(ctx *aero.Context) string {
 		Transactions: []paypalsdk.Transaction{paypalsdk.Transaction{
 			Amount: &paypalsdk.Amount{
 				Currency: "USD",
-				Total:    "10.00",
+				Total:    total,
 			},
 			Description: "Top Up Balance",
 		}},

scripts/Actions.ts

@@ -302,24 +302,39 @@ export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElemen
 	.then(() => arn.loading(false))
 }
 
-// Use item
-// export function useItem(arn: AnimeNotifier, button: HTMLElement) {
-// 	let slotIndex = ""
-// 	let parent = button
+// Charge up
+export function chargeUp(arn: AnimeNotifier, button: HTMLElement) {
+	let amount = button.dataset.amount
 
-// 	while(parent = parent.parentElement) {
-// 		if(parent.dataset.index !== undefined) {
-// 			slotIndex = parent.dataset.index
-// 			break
-// 		}
-// 	}
+	arn.loading(true)
+	arn.statusMessage.showInfo("Creating PayPal transaction... This might take a few seconds.")
 
-// 	let apiEndpoint = arn.findAPIEndpoint(button)
+	fetch("/api/paypal/payment/create", {
+		method: "POST",
+		body: amount,
+		credentials: "same-origin"
+	})
+	.then(response => response.json())
+	.then(payment => {
+		if(!payment || !payment.links) {
+			throw "Error creating PayPal payment"
+		}
 
-// 	arn.post(apiEndpoint + "/use/" + slotIndex, "")
-// 	.then(() => arn.reloadContent())
-// 	.catch(err => arn.statusMessage.showError(err))
-// }
+		console.log(payment)
+		let link = payment.links.find(link => link.rel === "approval_url")
+
+		if(!link) {
+			throw "Error finding PayPal payment link"
+		}
+
+		let url = link.href
+		console.log(url)
+
+		window.open(url, "_blank")
+	})
+	.catch(err => arn.statusMessage.showError(err))
+	.then(() => arn.loading(false))
+}
 
 // Chrome extension installation
 export function installExtension(arn: AnimeNotifier, button: HTMLElement) {