From 9bfc966ae19ae6eae8a67d82d605535661f9ee05 Mon Sep 17 00:00:00 2001
From: Mike <garzarobm@gmail.com>
Date: Sat, 21 Feb 2026 18:29:56 +0000
Subject: [PATCH 1/2] - Created a new README.md for accepting in-person
 payments with setup instructions. - Added client-side JavaScript (client.js)
 for handling Stripe Terminal interactions. - Implemented global CSS styles
 for the application (global.css). - Developed the main HTML structure for the
 Stripe Terminal simulator (index.html). - Set up Flask server (server.py) to
 handle API requests for creating locations, registering readers, creating
 payment intents, processing payments, simulating payments, and capturing
 payment intents. - Updated requirements.txt to include necessary dependencies
 for the project. - Added a test sandbox script (test-sandbox.py) for creating
 a location in Stripe Terminal.

---
 stripe python-javascript severless/README.md  |  20 +
 .../public/client.js                          | 353 ++++++++++++
 .../public/global.css                         | 516 ++++++++++++++++++
 .../public/index.html                         | 309 +++++++++++
 .../requirements.txt                          |  12 +
 stripe python-javascript severless/server.py  | 145 +++++
 test-sandbox.py                               |  31 ++
 7 files changed, 1386 insertions(+)
 create mode 100644 stripe python-javascript severless/README.md
 create mode 100644 stripe python-javascript severless/public/client.js
 create mode 100644 stripe python-javascript severless/public/global.css
 create mode 100644 stripe python-javascript severless/public/index.html
 create mode 100644 stripe python-javascript severless/requirements.txt
 create mode 100644 stripe python-javascript severless/server.py
 create mode 100644 test-sandbox.py

diff --git a/stripe python-javascript severless/README.md b/stripe python-javascript severless/README.md
new file mode 100644
index 000000000..820ead1f0
--- /dev/null
+++ b/stripe python-javascript severless/README.md	
@@ -0,0 +1,20 @@
+# Accept in-person payments
+
+Set up the Stripe Terminal SDK so you can begin accepting in-person payments. Included are some basic build and run scripts you can use to start up the application.
+
+## Running the sample
+
+1. Build the server
+
+~~~
+pip3 install -r requirements.txt
+~~~
+
+2. Run the server
+
+~~~
+export FLASK_APP="server.py" && python3 -m flask run --port=4242
+~~~
+
+
+3. Go to [http://localhost:4242](http://localhost:4242)
\ No newline at end of file
diff --git a/stripe python-javascript severless/public/client.js b/stripe python-javascript severless/public/client.js
new file mode 100644
index 000000000..0da135252
--- /dev/null
+++ b/stripe python-javascript severless/public/client.js	
@@ -0,0 +1,353 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.getElementById("create-reader-button").disabled = true;
+  document.getElementById("create-payment-intent-button").disabled = true;
+  document.getElementById("process-payment-button").disabled = true;
+  document.getElementById("simulate-payment-button").disabled = true;
+  document.getElementById("capture-button").disabled = true;
+  document.getElementById("view-dashboard-button").disabled = true;
+});
+
+function createLocation() {
+  return fetch("/create_location", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      display_name: "HQ",
+      address: {
+        line1: "1272 Valencia Street",
+        city: "San Francisco",
+        state: "CA",
+        country: "US",
+        postal_code: "94110",
+      },
+    }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+function createReader() {
+  return fetch("/register_reader", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ location_id: locationId }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+function createPaymentIntent(amount) {
+  return fetch("/create_payment_intent", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ amount: amount }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+function processPayment() {
+  return fetch("/process_payment", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      reader_id: readerId,
+      payment_intent_id: paymentIntentId,
+    }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+function simulatePayment() {
+  return fetch("/simulate_payment", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      reader_id: readerId,
+      card_number: document.getElementById("card-number-input").value,
+    }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+function capture(paymentIntentId) {
+  return fetch("/capture_payment_intent", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ payment_intent_id: paymentIntentId }),
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+var locationId;
+var readerId;
+var paymentIntentId;
+
+const createLocationButton = document.getElementById("create-location-button");
+createLocationButton.addEventListener("click", async (event) => {
+  createLocationButton.className = "btn btn-light float-right loading";
+  createLocationButton.disabled = true;
+
+  const requestData = {
+    display_name: "HQ",
+    address: {
+      line1: "1272 Valencia Street",
+      city: "San Francisco",
+      state: "CA",
+      country: "US",
+      postal_code: "94110",
+    },
+  };
+
+  createLocation().then((location) => {
+    createLocationButton.className = "btn btn-light float-right";
+    logApiCall("POST /v1/terminal/locations", requestData, location);
+    locationId = location["id"];
+
+    document.getElementById("create-reader-button").disabled = false;
+  });
+});
+
+const createReaderButton = document.getElementById("create-reader-button");
+createReaderButton.addEventListener("click", async (event) => {
+  createReaderButton.className = "btn btn-light float-right loading";
+  createReaderButton.disabled = true;
+
+  const requestData = { location_id: locationId };
+  createReader().then((reader) => {
+    createReaderButton.className = "btn btn-light float-right";
+    logApiCall("POST /v1/terminal/readers", requestData, reader);
+    readerId = reader["id"];
+
+    document.getElementById("create-payment-intent-button").disabled = false;
+  });
+});
+
+const createPaymentIntentButton = document.getElementById("create-payment-intent-button");
+createPaymentIntentButton.addEventListener("click", async (event) => {
+  createPaymentIntentButton.className = "btn btn-light float-right loading";
+  createPaymentIntentButton.disabled = true;
+
+  amount = document.getElementById("amount-input").value;
+  const paymentIntentRequestData = { amount: amount };
+  createPaymentIntent(amount)
+    .then((paymentIntent) => {
+      createPaymentIntentButton.className = "btn btn-light float-right";
+      logApiCall(
+        "POST /v1/payment_intents",
+        paymentIntentRequestData,
+        paymentIntent
+      );
+      paymentIntentId = paymentIntent["id"];
+
+      document.getElementById("process-payment-button").disabled = false;
+    })
+    .catch((error) => {
+      createPaymentIntentButton.className = "btn btn-light float-right";
+      createPaymentIntentButton.disabled = false;
+      console.error("Error creating payment intent:", error);
+    });
+});
+
+const processPaymentButton = document.getElementById("process-payment-button");
+processPaymentButton.addEventListener("click", async (event) => {
+  processPaymentButton.className = "btn btn-light float-right loading";
+  processPaymentButton.disabled = true;
+
+  const processPaymentRequestData = {
+    reader_id: readerId,
+    payment_intent_id: paymentIntentId,
+  };
+  processPayment()
+    .then((reader) => {
+      processPaymentButton.className = "btn btn-light float-right";
+      logApiCall(
+        "POST /v1/terminal/readers/" + readerId + "/process_payment_intent",
+        processPaymentRequestData,
+        reader
+      );
+      document.getElementById("simulate-payment-button").disabled = false;
+    })
+    .catch((error) => {
+      processPaymentButton.className = "btn btn-light float-right";
+      processPaymentButton.disabled = false;
+      console.error("Error processing payment:", error);
+    });
+});
+
+const simulatePaymentButton = document.getElementById(
+  "simulate-payment-button"
+);
+simulatePaymentButton.addEventListener("click", async (event) => {
+  simulatePaymentButton.className = "btn btn-light float-right loading";
+  simulatePaymentButton.disabled = true;
+
+  const simulatePaymentRequestData = {
+    reader_id: readerId,
+    card_number: document.getElementById("card-number-input").value,
+  };
+  simulatePayment().then((reader) => {
+    simulatePaymentButton.className = "btn btn-light float-right";
+    logApiCall(
+      "POST /v1/test_helpers/terminal/readers/" +
+        readerId +
+        "/present_payment_method",
+      simulatePaymentRequestData,
+      reader
+    );
+
+    // Check if the action status is failed
+    if (reader.action && reader.action.status === "failed") {
+      // Skip capture button and enable view dashboard button directly
+      document.getElementById("view-dashboard-button").disabled = false;
+    } else {
+      // Normal flow - enable capture button
+      document.getElementById("capture-button").disabled = false;
+    }
+  });
+});
+
+const captureButton = document.getElementById("capture-button");
+captureButton.addEventListener("click", async (event) => {
+  captureButton.className = "btn btn-light float-right loading";
+  captureButton.disabled = true;
+
+  const captureRequestData = { payment_intent_id: paymentIntentId };
+  capture(paymentIntentId).then((paymentIntent) => {
+    captureButton.className = "btn btn-light float-right";
+    logApiCall(
+      "POST /v1/payment_intents/" + paymentIntentId + "/capture",
+      captureRequestData,
+      paymentIntent
+    );
+    document.getElementById("view-dashboard-button").disabled = false;
+  });
+});
+
+function logApiCall(method, requestData, responseData) {
+  var logs = document.getElementById("logs");
+
+  // Create main container for this API call
+  var apiCallContainer = document.createElement("div");
+  apiCallContainer.classList.add("api-call");
+
+  // Create title with method and status
+  var title = document.createElement("div");
+  title.classList.add("api-title");
+
+  var methodSpan = document.createElement("span");
+  methodSpan.classList.add("api-method");
+  methodSpan.textContent = method.split(" ")[0]; // GET/POST etc
+
+  var urlSpan = document.createElement("span");
+  urlSpan.classList.add("api-url");
+  urlSpan.textContent = " " + method.split(" ").slice(1).join(" ");
+
+  title.appendChild(methodSpan);
+  title.appendChild(urlSpan);
+
+  // Create request section
+  var requestSection = document.createElement("div");
+  requestSection.classList.add("api-section");
+
+  var requestTitle = document.createElement("div");
+  requestTitle.classList.add("section-title");
+  requestTitle.textContent = "Request body";
+
+  var requestContent = document.createElement("div");
+  requestContent.classList.add("section-content");
+  var requestPre = document.createElement("pre");
+  var requestCode = document.createElement("code");
+
+  if (requestData) {
+    requestCode.textContent = formatJson(
+      JSON.stringify(requestData, undefined, 2)
+    );
+  } else {
+    requestCode.textContent = "No request body";
+  }
+
+  requestPre.appendChild(requestCode);
+  requestContent.appendChild(requestPre);
+  requestSection.appendChild(requestTitle);
+  requestSection.appendChild(requestContent);
+
+  // Create response section
+  var responseSection = document.createElement("div");
+  responseSection.classList.add("api-section");
+
+  var responseTitle = document.createElement("div");
+  responseTitle.classList.add("section-title");
+  responseTitle.textContent = "Response body";
+
+  var responseContent = document.createElement("div");
+  responseContent.classList.add("section-content");
+  var responsePre = document.createElement("pre");
+  var responseCode = document.createElement("code");
+  responseCode.textContent = formatJson(
+    JSON.stringify(responseData, undefined, 2)
+  );
+
+  responsePre.appendChild(responseCode);
+  responseContent.appendChild(responsePre);
+  responseSection.appendChild(responseTitle);
+  responseSection.appendChild(responseContent);
+
+  // Assemble the complete API call log
+  apiCallContainer.appendChild(title);
+  apiCallContainer.appendChild(requestSection);
+  apiCallContainer.appendChild(responseSection);
+
+  logs.appendChild(apiCallContainer);
+
+  // Auto-scroll to the new log entry
+  apiCallContainer.scrollIntoView({ behavior: "smooth", block: "nearest" });
+}
+
+function formatJson(message) {
+  var lines = message.split("\n");
+  var json = "";
+  var lineNumberFixedWidth = stringLengthOfInt(lines.length);
+  for (var i = 1; i <= lines.length; i += 1) {
+    line = i + padSpaces(i, lineNumberFixedWidth) + lines[i - 1];
+    json = json + line + "\n";
+  }
+  return json;
+}
+
+function stringLengthOfInt(number) {
+  return number.toString().length;
+}
+
+function padSpaces(lineNumber, fixedWidth) {
+  // Always indent by 2 and then maybe more, based on the width of the line
+  // number.
+  return " ".repeat(2 + fixedWidth - stringLengthOfInt(lineNumber));
+}
+
+// Update the displayed amount in dollars when the cents input changes
+const amountInput = document.getElementById("amount-input");
+amountInput.addEventListener("input", (event) => {
+  const cents = parseInt(event.target.value, 10);
+  const dollars = (cents / 100).toFixed(2);
+  document.querySelector(".amount-display").textContent = `$${dollars}`;
+});
+
+// Initialize the displayed amount
+document.querySelector(".amount-display").textContent = "$20.00";
+
+// Handle View in Dashboard button
+const viewDashboardButton = document.getElementById("view-dashboard-button");
+viewDashboardButton.addEventListener("click", async (event) => {
+  if (paymentIntentId) {
+    const dashboardUrl = `https://dashboard.stripe.com/payments/${paymentIntentId}`;
+    window.open(dashboardUrl, "_blank");
+  } else {
+    alert(
+      "No payment intent found. Please complete the payment process first."
+    );
+  }
+});
\ No newline at end of file
diff --git a/stripe python-javascript severless/public/global.css b/stripe python-javascript severless/public/global.css
new file mode 100644
index 000000000..869bf1035
--- /dev/null
+++ b/stripe python-javascript severless/public/global.css	
@@ -0,0 +1,516 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  background-color: #f8f9fa;
+  color: #212529;
+  font-size: 16px;
+}
+
+.main-header {
+  background-color: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
+  padding: 16px 0;
+}
+
+.header-content {
+  max-width: 1200px;
+  padding: 0 20px;
+}
+
+.header-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292f;
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  font-family: monospace;
+  font-size: 18px;
+  font-weight: bold;
+  color: #6772e5;
+  margin-right: 2px;
+}
+
+main {
+  padding-top: 20px;
+}
+
+.container {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  margin: 0;
+  gap: 16px;
+  padding: 16px;
+}
+
+/* Main content area */
+.main-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.section {
+  background: white;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.section h2 {
+  background: #f8f9fa;
+  padding: 16px 24px;
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #dee2e6;
+}
+
+/* Step styling */
+.step {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.step:last-child {
+  border-bottom: none;
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  cursor: pointer;
+  background: white;
+  transition: background-color 0.2s;
+}
+
+.step-header:hover {
+  background-color: #f8f9fa;
+}
+
+.step-header i {
+  margin-right: 8px;
+  color: #6c757d;
+  transition: transform 0.2s;
+  width: 12px;
+}
+
+.step-number {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.step-title {
+  flex: 1;
+  font-weight: 500;
+}
+
+.amount-display {
+  color: #6c757d;
+  margin-left: auto;
+  margin-right: 16px;
+}
+
+.float-right {
+  margin-left: auto;
+}
+
+.step-content {
+  padding: 0 24px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+}
+
+.step-input {
+  padding: 0 24px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+}
+
+.step-content.expanded {
+  max-height: 500px;
+  padding: 16px 24px 24px;
+}
+
+.step-input {
+  max-height: 500px;
+  padding: 16px 24px 24px;
+}
+
+.step-content p {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.step-input p {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.subtitle {
+  color: #6c757d;
+  font-size: 15px;
+  margin-bottom: 16px !important;
+}
+
+/* Form elements */
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.input-group .btn {
+  flex-shrink: 0;
+  min-width: fit-content;
+  white-space: nowrap;
+}
+
+.form-control {
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+#amount-input {
+  width: 100px;
+}
+
+#card-number-input {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+/* Button styling */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.05);
+  padding: 6px 16px;
+}
+
+.btn-light {
+  color: #24292f;
+  background-color: #f6f8fa;
+  border-color: #d0d7de;
+}
+
+.btn-light:hover {
+  background-color: #f3f4f6;
+  border-color: #bfc4ca;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn.loading {
+  position: relative;
+  color: transparent;
+}
+
+.btn.loading::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 2px solid transparent;
+  border-top: 2px solid #212529;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Test cards section */
+.card-input-section {
+  margin-bottom: 24px;
+}
+
+.card-input-section label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.test-cards h4 {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.test-card-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.test-card-row:last-child {
+  border-bottom: none;
+}
+
+.test-card-label {
+  flex: 1;
+  font-size: 15px;
+  color: #495057;
+}
+
+.test-card-number {
+  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+  font-size: 15px;
+  color: #007bff;
+  margin-right: 8px;
+}
+
+/* Logs section */
+.logs-section {
+  flex: 1;
+  min-width: 350px;
+  background: white;
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  height: fit-content;
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.logs-section h3 {
+  padding: 16px 24px;
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #dee2e6;
+  background: #f8f9fa;
+}
+
+.logs-header {
+  padding: 12px 24px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  font-weight: 500;
+  font-size: 15px;
+  color: #495057;
+}
+
+.logs-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* API Call Styling */
+.api-call {
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+}
+
+.api-call:last-child {
+  border-bottom: none;
+}
+
+.api-title {
+  padding: 12px 24px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  display: flex;
+  align-items: center;
+  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+  font-size: 15px;
+}
+
+.api-method {
+  color: #0969da;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.api-url {
+  color: #24292f;
+  flex: 1;
+}
+
+.api-status {
+  margin-left: auto;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status-200 {
+  background-color: #1f883d;
+  color: white;
+}
+
+.api-section {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.api-section:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  padding: 12px 24px;
+  background: #f6f8fa;
+  color: #656d76;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid #d0d7de;
+}
+
+.section-content {
+  background: white;
+}
+
+.section-content pre {
+  margin: 0;
+  padding: 16px 24px;
+  background: #f6f8fa;
+  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #24292f;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+}
+
+.section-content code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+  .container {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .logs-section {
+    min-width: unset;
+    max-height: 400px;
+  }
+
+  .main-content {
+    max-width: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 8px;
+  }
+
+  .step-header {
+    padding: 12px 16px;
+  }
+
+  .step-content.expanded {
+    padding: 12px 16px 16px;
+  }
+
+  .step-input {
+    padding: 12px 16px 16px;
+  }
+
+  .section h2 {
+    padding: 12px 16px;
+  }
+
+  .logs-section h3 {
+    padding: 12px 16px;
+  }
+
+  .logs-header {
+    padding: 8px 16px;
+  }
+
+  .log-title {
+    padding: 6px 16px;
+  }
+
+  .log pre {
+    padding: 12px 16px;
+  }
+}
+
+/* Additional status indicators */
+.status-success {
+  color: #28a745;
+}
+
+.status-warning {
+  color: #ffc107;
+}
+
+.status-error {
+  color: #dc3545;
+}
+
+/* Focus states for accessibility */
+.btn:focus,
+.form-control:focus,
+.step-header:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+.step-header:focus {
+  outline-offset: -2px;
+}
\ No newline at end of file
diff --git a/stripe python-javascript severless/public/index.html b/stripe python-javascript severless/public/index.html
new file mode 100644
index 000000000..396d8577b
--- /dev/null
+++ b/stripe python-javascript severless/public/index.html	
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stripe Terminal Simulator</title>
+    <link rel="stylesheet" href="global.css" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header class="main-header">
+      <div class="header-content">
+        <div class="header-text">
+          <span class="header-icon"><</span>
+          <span class="header-icon">/</span>
+          <span class="header-icon">></span>
+          Terminal Quickstart
+        </div>
+      </div>
+    </header>
+    <main>
+      <div class="container">
+        <div class="main-content">
+          <!-- Create a simulated Reader Section -->
+          <div class="section">
+            <h2>Create a simulated Reader</h2>
+
+            <!-- Step 1: Create a Location -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-down"></i>
+                <span class="step-number">1.</span>
+                <span class="step-title">Create a Location</span>
+                <button
+                  id="create-location-button"
+                  class="btn btn-light float-right"
+                >
+                  <i class="fas fa-plus"></i> Create
+                </button>
+              </div>
+              <div class="step-content expanded">
+                <p>
+                  Create locations to organize your readers. Locations group
+                  readers and allow them to automatically download the reader
+                  configuration needed for their region of use. You must assign
+                  a location to each reader when you register it, which you can
+                  do using the API or the Dashboard.
+                </p>
+              </div>
+            </div>
+
+            <!-- Step 2: Register a Reader -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">2.</span>
+                <span class="step-title">Register a Reader</span>
+                <button
+                  id="create-reader-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-user-plus"></i> Register
+                </button>
+              </div>
+              <div class="step-content">
+                <p>
+                  Register your reader with Stripe Terminal to enable payment
+                  processing.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Simulate a transaction Section -->
+          <div class="section">
+            <h2>Simulate a transaction</h2>
+
+            <!-- Step 3: Enter the transaction amount and create a PaymentIntent -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">3.</span>
+                <span class="step-title">Enter the transaction amount and create a PaymentIntent</span>
+                <button
+                  id="create-payment-intent-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-credit-card"></i> Create
+                </button>
+              </div>
+              <div class="step-content">
+                <p>
+                  Simulate the amount you want to charge by entering it below. Use cents only—skip decimals and commas, since currency separators vary internationally.
+                  Use this amount to create a PaymentIntent on your server. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed attempts and ensuring they're only charged once.
+                </p>
+              </div>
+              <div class="step-input">
+                <p>Transaction amount</p>
+                <p class="subtitle">Use cents or the smallest currency unit.</p>
+                <div class="input-group">
+                  <input
+                    type="number"
+                    id="amount-input"
+                    class="form-control"
+                    value="2000"
+                    min="50"
+                    max="999999"
+                    data-1p-ignore
+                  />
+                  <span class="amount-display">$20.00 USD</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Step 4: Process PaymentIntent on the simulated reader -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">4.</span>
+                <span class="step-title"
+                  >Process PaymentIntent on the simulated reader</span
+                >
+                <button
+                  id="process-payment-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-play"></i> Process
+                </button>
+              </div>
+              <div class="step-content">
+                <p>
+                  Create a PaymentIntent with the specific amount and process the payment on your simulated reader.
+                  It prompts the customer to present their card by inserting or tapping it before attempting authorization.
+                </p>
+              </div>
+            </div>
+
+            <!-- Step 5: Simulate card presentment -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">5.</span>
+                <span class="step-title"
+                  >Simulate card presentment by the cardholder</span
+                >
+                <button
+                  id="simulate-payment-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-hand-paper"></i> Simulate
+                </button>
+              </div>
+              <div class="step-content">
+                <div class="note-box">
+                  <p>
+                    In a real transaction flow, the customer inserts or taps
+                    their card on the physical reader. With a simulated reader,
+                    you simulate the card presentment step by making another API
+                    call.
+                  </p>
+                </div>
+
+                <p>
+                  This call successfully confirms the PaymentIntent with a test
+                  card. You can also try other test cards.
+                </p>
+              </div>
+              <div class="step-input">
+                <div class="card-input-section">
+                  <label for="card-number-input">Credit card number</label>
+                  <input
+                    type="text"
+                    id="card-number-input"
+                    class="form-control"
+                    value="4242 4242 4242 4242"
+                    data-1p-ignore
+                  />
+                </div>
+
+                <div class="test-cards">
+                  <h4>Test card numbers</h4>
+                  <div class="test-card-row">
+                    <span class="test-card-label">Payment succeeds</span>
+                    <span class="test-card-number">4242 4242 4242 4242</span>
+                    <button
+                      class="btn-copy"
+                      onclick="copyCardNumber('4242 4242 4242 4242')"
+                    >
+                      <i class="far fa-copy"></i>
+                    </button>
+                  </div>
+                  <div class="test-card-row">
+                    <span class="test-card-label">Payment is declined</span>
+                    <span class="test-card-number">4000 0000 0000 9995</span>
+                    <button
+                      class="btn-copy"
+                      onclick="copyCardNumber('4000 0000 0000 9995')"
+                    >
+                      <i class="far fa-copy"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Step 6: Capture PaymentIntent -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">6.</span>
+                <span class="step-title">Capture the PaymentIntent</span>
+                <button
+                  id="capture-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-check"></i> Capture
+                </button>
+              </div>
+              <div class="step-content">
+                <p>
+                  Capture the authorized payment to complete the transaction.
+                </p>
+              </div>
+            </div>
+
+            <!-- Step 7: View payment -->
+            <div class="step">
+              <div class="step-header" onclick="toggleStep(this, event)">
+                <i class="fas fa-chevron-right"></i>
+                <span class="step-number">7.</span>
+                <span class="step-title"
+                  >View the payment in the Stripe Dashboard</span
+                >
+                <button
+                  id="view-dashboard-button"
+                  class="btn btn-light float-right"
+                  disabled
+                >
+                  <i class="fas fa-external-link-alt"></i> View
+                </button>
+              </div>
+              <div class="step-content">
+                <p>View the completed payment in your Stripe Dashboard.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logs Section -->
+        <div class="logs-section">
+          <h3>Logs</h3>
+          <div class="logs-header">
+            <span>API request</span>
+          </div>
+          <div id="logs" class="logs-container">
+            <!-- Logs will be populated by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <script>
+      function toggleStep(header, event) {
+        // Don't toggle if a button or its child elements were clicked
+        if (event.target.closest(".btn")) {
+          return;
+        }
+
+        const content = header.nextElementSibling;
+        const icon = header.querySelector("i");
+
+        if (
+          content.classList.contains("step-content") &&
+          content.classList.contains("expanded")
+        ) {
+          content.classList.remove("expanded");
+          icon.classList.remove("fa-chevron-down");
+          icon.classList.add("fa-chevron-right");
+        } else if (content.classList.contains("step-content")) {
+          content.classList.add("expanded");
+          icon.classList.remove("fa-chevron-right");
+          icon.classList.add("fa-chevron-down");
+        }
+      }
+
+      function copyCardNumber(cardNumber) {
+        const cardInput = document.getElementById("card-number-input");
+        cardInput.value = cardNumber;
+        cardInput.focus();
+        cardInput.select();
+
+        // Copy to clipboard
+        navigator.clipboard.writeText(cardNumber).then(() => {
+          // Optional: show a toast or feedback
+          console.log("Card number copied to clipboard");
+        });
+      }
+    </script>
+    <script src="client.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/stripe python-javascript severless/requirements.txt b/stripe python-javascript severless/requirements.txt
new file mode 100644
index 000000000..0bf4b9178
--- /dev/null
+++ b/stripe python-javascript severless/requirements.txt	
@@ -0,0 +1,12 @@
+certifi==2021.5.30
+chardet==4.0.0
+Click==8.0.1
+Flask==2.1.0
+idna==3.2
+itsdangerous==2.0.1
+Jinja2==3.0.1
+MarkupSafe==2.0.1
+requests==2.26.0
+stripe==14.3.0
+toml==0.10.2
+Werkzeug==2.0.1
\ No newline at end of file
diff --git a/stripe python-javascript severless/server.py b/stripe python-javascript severless/server.py
new file mode 100644
index 000000000..57922277e
--- /dev/null
+++ b/stripe python-javascript severless/server.py	
@@ -0,0 +1,145 @@
+#! /usr/bin/env python3.10
+
+# Python 3.10 or newer required.
+
+import json
+import os
+import stripe
+
+# This is your test secret API key.
+stripe.api_key = 'rk_test_51REzPYBUxEI2KOLvFD9b0XMfewiQXelHjds8bZ3k6p7dLJYq7B9EIakYL4tscIjfb2vDG7l2PC6jzxQUst53PMUy003d1o8Jn9'
+
+from flask import Flask, jsonify, request, render_template
+
+
+app = Flask(__name__, static_folder='public',
+            static_url_path='', template_folder='public')
+
+@app.route('/')
+def index():
+  return render_template('index.html')
+
+
+@app.route('/create_location', methods=['POST'])
+def create_location():
+  data = json.loads(request.data)
+
+  location = stripe.terminal.Location.create(
+    display_name=data['display_name'],
+    address={
+      'line1': data['address']['line1'],
+      'city': data['address']['city'],
+      'state': data['address']['state'],
+      'country': data['address']['country'],
+      'postal_code': data['address']['postal_code'],
+    },
+  )
+
+  return location
+
+@app.route('/register_reader', methods=['POST'])
+def register_reader():
+  data = json.loads(request.data)
+
+  reader = stripe.terminal.Reader.create(
+    location=data['location_id'],
+    label='Quickstart - S700 Simulated Reader',
+    registration_code='simulated-s700'
+  )
+
+  return reader
+
+@app.route('/create_payment_intent', methods=['POST'])
+def secret():
+  data = json.loads(request.data)
+
+  # For Terminal payments, the 'payment_method_types' parameter must include
+  # 'card_present'.
+  # To automatically capture funds when a charge is authorized,
+  # set `capture_method` to `automatic`.
+  intent = stripe.PaymentIntent.create(
+    amount=data['amount'],
+    currency='usd',
+    payment_method_types=[
+      'card_present',
+    ],
+    capture_method='automatic',
+    payment_method_options={
+      "card_present": {
+        "capture_method": "manual_preferred"
+      }
+    }
+  )
+  return intent
+
+@app.route('/process_payment', methods=['POST'])
+def process_payment():
+  data = json.loads(request.data)
+
+  tries = 3
+  for attempt in range(tries):
+    try:
+      reader = stripe.terminal.Reader.process_payment_intent(
+        data['reader_id'],
+        payment_intent=data['payment_intent_id'],
+      )
+      return reader
+    except stripe.error.InvalidRequestError as e:
+      if e.code == 'terminal_reader_timeout':
+        # Temporary networking blip, automatically retry a few times.
+        if attempt < tries - 1:
+          continue
+        else:
+          return e.json_body
+      elif e.code == 'terminal_reader_offline':
+        # Reader is offline and won't respond to API requests. Make sure the reader is powered on
+        # and connected to the internet before retrying.
+        app.logger.error(e)
+        return e.json_body
+      elif e.code == 'terminal_reader_busy':
+        # Reader is currently busy processing another request, installing updates or changing settings.
+        # Remember to disable the pay button in your point-of-sale application while waiting for a
+        # reader to respond to an API request.
+        app.logger.error(e)
+        return e.json_body
+      elif e.code == 'intent_invalid_state':
+        # Check PaymentIntent status because it's not ready to be processed. It might have been already
+        # successfully processed or canceled.
+        payment_intent = stripe.PaymentIntent.retrieve(data['payment_intent_id'])
+        app.logger.error('PaymentIntent is already in %s state.' % payment_intent.status)
+        return e.json_body
+      else:
+        app.logger.error(e)
+        return e.json_body
+
+@app.route('/simulate_payment', methods=['POST'])
+def simulate_payment():
+  data = json.loads(request.data)
+
+  options = {
+      "card_present": {
+          "number": data['card_number']
+      },
+      "type": "card_present"
+  }
+
+  reader = stripe.terminal.Reader.TestHelpers.present_payment_method(
+    data['reader_id'],
+    **options
+  )
+
+  return reader
+
+
+@app.route('/capture_payment_intent', methods=['POST'])
+def capture():
+  data = json.loads(request.data)
+
+  intent = stripe.PaymentIntent.capture(
+    data['payment_intent_id']
+  )
+
+  return intent
+
+if __name__ == '__main__':
+    app.run()
\ No newline at end of file
diff --git a/test-sandbox.py b/test-sandbox.py
new file mode 100644
index 000000000..2b4987285
--- /dev/null
+++ b/test-sandbox.py
@@ -0,0 +1,31 @@
+
+# Set your secret key. Remember to switch to your live secret key in production.
+# See your keys here: https://dashboard.stripe.com/apikeys
+import stripe
+stripe.api_key = "rk_test_51REzPYBUxEI2KOLvFD9b0XMfewiQXelHjds8bZ3k6p7dLJYq7B9EIakYL4tscIjfb2vDG7l2PC6jzxQUst53PMUy003d1o8Jn9"
+
+location = stripe.terminal.Location.create(
+  display_name="HQ",
+  address={
+    "line1": "1272 Valencia Street",
+    "city": "San Francisco",
+    "state": "CA",
+    "country": "US",
+    "postal_code": "94110",
+  },
+  stripe_account="acct_1REzPYBUxEI2KOLv",
+)
+
+
+
+
+
+
+
+
+
+
+
+
+
+

From 600a0c72be031ba8949e96ef7b2aafce0a4caca5 Mon Sep 17 00:00:00 2001
From: Mike <garzarobm@gmail.com>
Date: Sat, 21 Feb 2026 18:30:24 +0000
Subject: [PATCH 2/2] Add Stripe Terminal simulator with frontend and backend
 implementation

- Created a new README.md for accepting in-person payments with setup instructions.
- Added client-side JavaScript (client.js) for handling Stripe Terminal interactions.
- Implemented global CSS styles for the application (global.css).
- Developed the main HTML structure for the Stripe Terminal simulator (index.html).
- Set up Flask server (server.py) to handle API requests for creating locations, registering readers, creating payment intents, processing payments, simulating payments, and capturing payment intents.
- Updated requirements.txt to include necessary dependencies for the project.
- Added a test sandbox script (test-sandbox.py) for creating a location in Stripe Terminal.
---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 9c1e3cb70..a15c35246 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,4 @@ venv.bak/
 
 # Git
 *.orig
+poetry.lock