add checkout

bitovi · Nov 12, 2024 · 9d58a1d · 9d58a1d
1 parent 4bdc66c
commit 9d58a1d
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 37 deletions.
diff --git a/public/checkout/checkout.css b/public/checkout/checkout.css
@@ -0,0 +1,7 @@
+@import url("../common/theme/index.css");
+
+#pay {
+  display: block;
+  margin: 0 auto;
+  font-size: 1.5em;
+}
diff --git a/public/checkout/checkout.js b/public/checkout/checkout.js
@@ -0,0 +1,93 @@
+import "../common/sandbox-header.js"
+
+const payEl = document.getElementById("pay")
+payEl.style.display = ""
+
+payEl.addEventListener("click", async () => {
+  requestPayment()
+})
+
+async function requestPayment() {
+  const request = new PaymentRequest(
+    [
+      {
+        supportedMethods: "https://google.com/pay",
+        data: {
+          environment: "TEST",
+          apiVersion: 2,
+          apiVersionMinor: 0,
+          merchantInfo: {
+            merchantName: "Example Merchant",
+          },
+          allowedPaymentMethods: [
+            {
+              type: "CARD",
+              parameters: {
+                allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
+                allowedCardNetworks: [
+                  "AMEX",
+                  "DISCOVER",
+                  "INTERAC",
+                  "JCB",
+                  "MASTERCARD",
+                  "VISA",
+                ],
+              },
+              tokenizationSpecification: {
+                type: "PAYMENT_GATEWAY",
+                // Check with your payment gateway on the parameters to pass.
+                // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}
+                parameters: {
+                  gateway: "example",
+                  gatewayMerchantId: "exampleGatewayMerchantId",
+                },
+              },
+            },
+          ],
+        },
+      },
+      {
+        supportedMethods: "https://apple.com/apple-pay",
+        data: {
+          version: 3,
+          merchantIdentifier: "merchant.com.example",
+          merchantCapabilities: [
+            "supports3DS",
+            "supportsCredit",
+            "supportsDebit",
+          ],
+          supportedNetworks: ["amex", "discover", "masterCard", "visa"],
+          countryCode: "US",
+        },
+      },
+    ],
+    {
+      id: "order-123",
+      displayItems: [
+        {
+          label: "Example item",
+          amount: { currency: "USD", value: "1.00" },
+        },
+      ],
+      total: {
+        label: "Total",
+        amount: { currency: "USD", value: "1.00" },
+      },
+    },
+    {
+      requestPayerName: true,
+      requestPayerEmail: true,
+      requestPayerPhone: true,
+    },
+  )
+
+  if (!(await request.canMakePayment())) {
+    alert("No supported payment methods.")
+    return
+  }
+
+  await request
+    .show()
+    .then((response) => response.complete("fail"))
+    .catch((error) => alert(error))
+}
diff --git a/public/checkout/index.html b/public/checkout/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkout | Bitovi PWA Sandbox</title>
+    <link rel="manifest" href="../manifest.json" />
+
+    <link type="text/css" rel="stylesheet" href="./checkout.css" />
+  </head>
+  <body>
+    <sandbox-header share-title="PWA Checkout"></sandbox-header>
+
+    <button id="pay">Pay Now</button>
+
+    <script type="module" src="./checkout.js"></script>
+  </body>
+</html>
diff --git a/public/cube3d/webgpu/util.js b/public/cube3d/webgpu/util.js
@@ -1,41 +1,5 @@
-export function createDialog() {
-  if (typeof document === "undefined") {
-    // Not implemented in workers.
-    return {
-      show(msg) {
-        console.error(msg)
-      },
-    }
-  }
-
-  const dialogBox = document.createElement("dialog")
-  dialogBox.close()
-  document.body.append(dialogBox)
-
-  const dialogText = document.createElement("pre")
-  dialogText.style.whiteSpace = "pre-wrap"
-  dialogBox.append(dialogText)
-
-  const closeBtn = document.createElement("button")
-  closeBtn.textContent = "OK"
-  closeBtn.onclick = () => dialogBox.close()
-  dialogBox.append(closeBtn)
-
-  return {
-    show(msg) {
-      // Don't overwrite the dialog message while it's still open
-      // (show the first error, not the most recent error).
-      if (!dialogBox.open) {
-        dialogText.textContent = msg
-        dialogBox.showModal()
-      }
-    },
-  }
-}
-
-const failOutput = createDialog()
 export function fail(message) {
-  failOutput.show(message)
+  alert(message)
   throw new Error(message)
 }
 

diff --git a/public/index.html b/public/index.html
@@ -18,6 +18,7 @@
         <li><a href="./map/">Geolocation Demo</a></li>
         <li><a href="./pomodoro/">Pomodoro Timer</a></li>
         <li><a href="./cube3d/">3D Cube</a></li>
+        <li><a href="./checkout/">Checkout</a></li>
       </ul>
     </nav>