
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pay $1 – Service Transport</title>
<style>
body { font-family: Arial; max-width: 420px; margin: 50px auto; }
.box { border: 1px solid #ddd; padding: 20px; border-radius: 6px; }
.field { margin-bottom: 12px; height: 42px; }
button { width: 100%; padding: 12px; font-size: 16px; cursor: pointer; }
.success { color: green; }
.error { color: red; }
</style>
</head>
<body>

<div class="box">
<h3>Service Transport</h3>
<p><strong>Amount:</strong> $1.00</p>

<div id="card-number" class="field"></div>
<div id="card-expiry" class="field"></div>
<div id="card-cvv" class="field"></div>

<button id="pay">Pay $1</button>
<p id="result"></p>
</div>

<script
  src="https://www.paypal.com/sdk/js?client-id=YOUR_LIVE_CLIENT_ID&components=hosted-fields&intent=capture"
  data-client-token="">
</script>

<script>
paypal.HostedFields.render({

  createOrder: () =>
    fetch("", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({ action: "create" })
    }).then(r => r.json()).then(d => d.id),

  fields: {
    number: { selector: "#card-number" },
    expirationDate: { selector: "#card-expiry" },
    cvv: { selector: "#card-cvv" }
  }

}).then(hf => {

  document.getElementById("pay").onclick = () => {
    document.getElementById("result").textContent = "Processing...";
    hf.submit({ contingencies: ["3D_SECURE"] })
      .then(p => fetch("", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({ action: "capture", orderID: p.orderId })
      }))
      .then(r => r.json())
      .then(() => {
        document.getElementById("result").textContent = "Payment successful ✔";
        document.getElementById("result").className = "success";
      })
      .catch(() => {
        document.getElementById("result").textContent = "Payment failed ✖";
        document.getElementById("result").className = "error";
      });
  };

});
</script>

</body>
</html>
