checkout

 <div id="infazon-checkout">

  <style>

    #infazon-checkout {

      max-width: 700px;

      margin: 30px auto;

      font-family: Arial, sans-serif;

      color: #222;

    }

    .checkout-box {

      background: #fff;

      border: 1px solid #e5e5e5;

      border-radius: 14px;

      padding: 25px;

      box-shadow: 0 4px 20px rgba(0,0,0,.08);

    }

    .checkout-box h2 {

      margin-top: 0;

      font-size: 28px;

    }

    .product-summary {

      background: #f7f8fa;

      padding: 15px;

      border-radius: 10px;

      margin-bottom: 20px;

    }

    .row {

      display: flex;

      justify-content: space-between;

      margin: 8px 0;

    }

    .total {

      border-top: 1px solid #ddd;

      padding-top: 12px;

      margin-top: 12px;

      font-size: 20px;

      font-weight: bold;

    }

    .field {

      margin-bottom: 15px;

    }

    .field label {

      display: block;

      font-weight: 600;

      margin-bottom: 6px;

    }

    .field input,

    .field textarea,

    .field select {

      width: 100%;

      box-sizing: border-box;

      padding: 12px;

      border: 1px solid #ccc;

      border-radius: 8px;

      font-size: 15px;

    }

    .pay-button {

      width: 100%;

      padding: 15px;

      border: 0;

      border-radius: 9px;

      background: #111827;

      color: white;

      font-size: 17px;

      font-weight: bold;

      cursor: pointer;

    }

    .pay-button:hover {

      opacity: .9;

    }

    .secure-note {

      text-align: center;

      margin-top: 15px;

      color: #666;

      font-size: 13px;

    }

  </style>

  <div class="checkout-box">

    <h2>Complete Your Order</h2>

    <div class="product-summary">

      <div class="row">

        <span>Product</span>

        <strong id="product-name">Your Product</strong>

      </div>

      <div class="row">

        <span>Product Price</span>

        <span>$66.00</span>

      </div>

      <div class="row">

        <span>Shipping</span>

        <span>$10.00</span>

      </div>

      <div class="row total">

        <span>Total</span>

        <span>$76.00</span>

      </div>

    </div>

    <form id="orderForm">

      <div class="field">

        <label>Full Name</label>

        <input

          type="text"

          id="name"

          required

          placeholder="Enter your full name">

      </div>

      <div class="field">

        <label>Email Address</label>

        <input

          type="email"

          id="email"

          required

          placeholder="you@example.com">

      </div>

      <div class="field">

        <label>Phone Number</label>

        <input

          type="tel"

          id="phone"

          required

          placeholder="+1 555 123 4567">

      </div>

      <div class="field">

        <label>Shipping Address</label>

        <textarea

          id="address"

          rows="4"

          required

          placeholder="Street, City, State, ZIP, Country"></textarea>

      </div>

      <div class="field">

        <label>Payment Method</label>

        <select id="paymentMethod" required>

          <option value="">

            Select Payment Method

          </option>

          <option value="gateway">

            Pay Online by Card

          </option>

          <option value="bank">

            Bank Transfer

          </option>

          <option value="cod">

            Cash on Delivery

          </option>

        </select>

      </div>

      <button

        type="submit"

        class="pay-button">

        Continue to Payment

      </button>

      <div class="secure-note">

        🔒 Your payment will be processed by the selected payment provider.

      </div>

    </form>

  </div>

  <script>

    document.getElementById("orderForm").addEventListener("submit", function(e) {

      e.preventDefault();

      const name =

        document.getElementById("name").value.trim();

      const email =

        document.getElementById("email").value.trim();

      const phone =

        document.getElementById("phone").value.trim();

      const address =

        document.getElementById("address").value.trim();

      const payment =

        document.getElementById("paymentMethod").value;

      if (!name || !email || !phone || !address || !payment) {

        alert("Please complete all required fields.");

        return;

      }

      /*

       * IMPORTANT:

       *

       * Replace this URL with the REAL hosted

       * checkout/payment-link URL supplied by

       * your payment gateway.

       */

      if (payment === "gateway") {

        const PAYMENT_URL =

          "https://YOUR-PAYMENT-GATEWAY-CHECKOUT-URL";

        window.location.href = PAYMENT_URL;

        return;

      }

      if (payment === "bank") {

        alert(

          "Please complete the bank transfer using the official bank details provided by the store."

        );

        return;

      }

      if (payment === "cod") {

        alert(

          "Your Cash on Delivery order has been received. We will contact you to confirm the order."

        );

        return;

      }

    });

  </script>

</div>