Add pay button

2024-08-08 15:01:20 +01:00 · 2024-08-08 15:01:20 +01:00 · 4ad036ac9b
commit 4ad036ac9b
parent baec1247fb
8 changed files with 218 additions and 28 deletions
--- a/index.html
+++ b/index.html
@ -15,6 +15,7 @@
 <body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
+  <script src="https://btcpay.v0l.io/modal/btcpay.js"></script>
 </body>

 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,37 +1,59 @@
+import { CostInterval, DiskType, MachineSpec } from "./api"
+import VpsCard from "./components/vps-card"
+import { GiB } from "./const"
+
 export default function App() {
+  const offers: Array<MachineSpec> = [
+    {
+      id: "2x2x80",
+      cpu: 2,
+      ram: 2 * GiB,
+      disk: {
+        type: DiskType.SSD,
+        size: 80 * GiB
+      },
+      cost: {
+        interval: CostInterval.Month,
+        count: 3,
+        currency: "EUR",
+      }
+    },
+    {
+      id: "4x4x160",
+      cpu: 4,
+      ram: 4 * GiB,
+      disk: {
+        type: DiskType.SSD,
+        size: 160 * GiB
+      },
+      cost: {
+        interval: CostInterval.Month,
+        count: 5,
+        currency: "EUR",
+      }
+    },
+    {
+      id: "8x8x400",
+      cpu: 8,
+      ram: 8 * GiB,
+      disk: {
+        type: DiskType.SSD,
+        size: 400 * GiB
+      },
+      cost: {
+        interval: CostInterval.Month,
+        count: 12,
+        currency: "EUR",
+      }
+    }
+  ]
  return (
    <div className="w-[700px] mx-auto m-2 p-2">
-      <h1>lnvps.com</h1>
+      <h1>LNVPS</h1>

      <h1>VPS</h1>
      <div className="grid grid-cols-3 gap-2">
-        <div className="rounded-xl border border-netrual-500 px-2 py-3">
-          <h2>2x2x80</h2>
-          <ul>
-            <li>CPU: 2vCPU</li>
-            <li>RAM: 2GB</li>
-            <li>SSD: 80GB</li>
-          </ul>
-          <h2>3 EUR/mo</h2>
-        </div>
-        <div className="rounded-xl border border-netrual-500 px-2 py-3">
-          <h2>4x4x160</h2>
-          <ul>
-            <li>CPU: 4vCPU</li>
-            <li>RAM: 4GB</li>
-            <li>SSD: 160GB</li>
-          </ul>
-          <h2>5 EUR/mo</h2>
-        </div>
-        <div className="rounded-xl border border-netrual-500 px-2 py-3">
-          <h2>8x8x400</h2>
-          <ul>
-            <li>CPU: 8vCPU</li>
-            <li>RAM: 8GB</li>
-            <li>SSD: 400GB</li>
-          </ul>
-          <h2>12 EUR/mo</h2>
-        </div>
+        {offers.map(a => <VpsCard spec={a} />)}
      </div>
      <small>
        All VPS come with 1x IPv4 and 1x IPv6 address and unmetered traffic.
--- a/src/api.ts
+++ b/src/api.ts
@ -0,0 +1,28 @@
+export interface MachineSpec {
+  id: string;
+  cpu: number;
+  ram: number;
+  disk: {
+    type: DiskType;
+    size: number;
+  };
+  cost: {
+    interval: CostInterval;
+    count: number;
+    currency: CostCurrency;
+  };
+}
+
+export enum DiskType {
+  HDD,
+  SSD,
+}
+
+export enum CostInterval {
+  Hour,
+  Day,
+  Month,
+  Year,
+}
+
+export type CostCurrency = "EUR" | "USD" | "BTC";
--- a/src/components/cost.tsx
+++ b/src/components/cost.tsx
@ -0,0 +1,14 @@
+import { CostInterval, MachineSpec } from "../api";
+
+export default function CostLabel({ cost }: { cost: MachineSpec["cost"] }) {
+    function intervalName(n: number) {
+        switch (n) {
+            case CostInterval.Hour: return "Hour"
+            case CostInterval.Day: return "Day"
+            case CostInterval.Month: return "Month"
+            case CostInterval.Year: return "Year"
+        }
+    }
+
+    return <>{cost.count} {cost.currency}/{intervalName(cost.interval)}</>
+}
--- a/src/components/pay-button.css
+++ b/src/components/pay-button.css
@ -0,0 +1,75 @@
+.btcpay-form {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.btcpay-form--inline {
+  flex-direction: row;
+}
+.btcpay-form--block {
+  flex-direction: column;
+}
+.btcpay-form--inline .submit {
+  margin-left: 15px;
+}
+.btcpay-form--block select {
+  margin-bottom: 10px;
+}
+.btcpay-form .btcpay-custom-container {
+  text-align: center;
+}
+.btcpay-custom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.btcpay-form .plus-minus {
+  cursor: pointer;
+  font-size: 25px;
+  line-height: 25px;
+  background: #dfe0e1;
+  height: 30px;
+  width: 45px;
+  border: none;
+  border-radius: 60px;
+  margin: auto 5px;
+  display: inline-flex;
+  justify-content: center;
+}
+.btcpay-form select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  color: currentColor;
+  background: transparent;
+  border: 1px solid transparent;
+  display: block;
+  padding: 1px;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 11px;
+  cursor: pointer;
+}
+.btcpay-form select:hover {
+  border-color: #ccc;
+}
+.btcpay-form option {
+  color: #000;
+  background: rgba(0, 0, 0, 0.1);
+}
+.btcpay-input-price {
+  -moz-appearance: textfield;
+  border: none;
+  box-shadow: none;
+  text-align: center;
+  font-size: 25px;
+  margin: auto;
+  border-radius: 5px;
+  line-height: 35px;
+  background: #fff;
+}
+.btcpay-input-price::-webkit-outer-spin-button,
+.btcpay-input-price::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
--- a/src/components/pay-button.tsx
+++ b/src/components/pay-button.tsx
@ -0,0 +1,30 @@
+import { MachineSpec } from "../api";
+
+import "./pay-button.css"
+
+export default function VpsPayButton({ spec }: { spec: MachineSpec }) {
+    const serverUrl = "https://btcpay.v0l.io/api/v1/invoices";
+
+    function handleFormSubmit(event: React.FormEvent) {
+        event.preventDefault();
+        const form = event.target as HTMLFormElement;
+        const xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function () {
+            if (this.readyState == 4 && this.status == 200 && this.responseText) {
+                window.btcpay.appendInvoiceFrame(JSON.parse(this.responseText).invoiceId);
+            }
+        };
+        xhttp.open('POST', serverUrl, true);
+        xhttp.send(new FormData(form));
+    }
+
+    return <form method="POST" action={serverUrl} className="btcpay-form btcpay-form--block" onSubmit={handleFormSubmit}>
+        <input type="hidden" name="storeId" value="CdaHy1puLx4kLC9BG3A9mu88XNyLJukMJRuuhAfbDrxg" />
+        <input type="hidden" name="jsonResponse" value="true" />
+        <input type="hidden" name="orderId" value={spec.id} />
+        <input type="hidden" name="price" value={spec.cost.count} />
+        <input type="hidden" name="currency" value={spec.cost.currency} />
+        <input type="image" className="submit" name="submit" src="https://btcpay.v0l.io/img/paybutton/pay.svg"
+            alt="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor" />
+    </form>
+}
--- a/src/components/vps-card.tsx
+++ b/src/components/vps-card.tsx
@ -0,0 +1,16 @@
+import { DiskType, MachineSpec } from "../api";
+import CostLabel from "./cost";
+import VpsPayButton from "./pay-button";
+
+export default function VpsCard({ spec }: { spec: MachineSpec }) {
+    return <div className="rounded-xl border border-netrual-500 px-2 py-3">
+        <h2>{spec.id}</h2>
+        <ul>
+            <li>CPU: {spec.cpu}vCPU</li>
+            <li>RAM: {spec.ram / 1024 / 1024 / 1024}GB</li>
+            <li>{spec.disk.type === DiskType.SSD ? "SSD" : "HDD"}: {spec.disk.size / 1024 / 1024 / 1024}GB</li>
+        </ul>
+        <h2><CostLabel cost={spec.cost} /></h2>
+        <VpsPayButton spec={spec} />
+    </div>
+}
--- a/src/const.ts
+++ b/src/const.ts
@ -0,0 +1,4 @@
+export const KiB = 1024;
+export const MiB = KiB * 1024;
+export const GiB = MiB * 1024;
+export const TiB = GiB * 1024;