item.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="refresh" content="15">
    <link href='https://fonts.googleapis.com/css?family=Alkatra' rel='stylesheet'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>Checkout</title>

    <style>
                /* Global styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Alkatra', sans-serif;
            background-color: #f2f2f2;
        }

        h1, h2, p {
            margin: 10px;
            text-align: center;
        }

        img {
            display: block;
            margin: 10px auto;
            width: 160px;
            height: auto;
        }

        button {
            display: block;
            margin: 10px auto;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: rgb(175, 129, 76);
            color: white;
            font-weight: bold;
            cursor: pointer;
        }

        a {
            text-decoration: none;
            color: white;
        }

        a:hover {
            color: #f2f2f2;
        }

        /* Header styles */
        header {
            background-color: #af844c;
            text-align: center;
            padding: 20px;
            color: white;
        }

        /* Form styles */
        form {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
        }
        /* Add some basic styling for the buttons */
        .quantity-btn {
            cursor: pointer;
            font-size: 16px;
            padding: 5px 10px;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <?php
        $item = $_GET['item'];
        $price = $_GET['price'];
    ?>
    <header>
        <h1>Items</h1>
    </header>
    <form>
        <h2><?php echo $item; ?></h2>
        <p>Price: <strong id="item-price"><?php echo $price; ?></strong></p>

        <!-- Plus and minus buttons for quantity -->
        <button type="button" class="quantity-btn" onclick="updateQuantity('minus', '<?php echo $item; ?>', '<?php echo $price; ?>')">-</button>
        <!-- Make the quantity field read-only -->
        <input type="text" id="quantity" name="quantity" value="1" readonly>
        <button type="button" class="quantity-btn" onclick="updateQuantity('plus', '<?php echo $item; ?>', '<?php echo $price; ?>')">+</button>

        <!-- Display total price -->
        <p>Total Price: Rs:<strong id="total-price"><?php echo number_format($price, 2); ?></strong></p>

        <!-- Add hidden input fields for item and price -->
        <input type="hidden" name="item" value="<?php echo $item; ?>">
        <input type="hidden" name="price" value="<?php echo $price; ?>">

        <!-- Styled hyperlink with data attributes -->
        <button type="submit">
            <a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now"
           data-amount="<?php echo $price * 100; ?>" data-id="<?php echo $item; ?>">
                Order Now
            </a>
        </button>
        <!-- Original "Cancel and Return back" button -->
        <button><a href="index.html">Cancel and Return back</a></button>
    </form>

    <!-- Razorpay scripts -->
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        // Script for Razorpay integration
        $('body').on('click', '.buy_now', function(e){
            var totalAmount = $(this).attr("data-amount");
            var product_id =  $(this).attr("data-id");
            var options = {
                "key": "rzp_test//",
                "amount": totalAmount,
                "name": "Tutsmake",
                "description": "Payment",
                "image": "//www.tutsmake.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",
                "handler": function (response){
                    $.ajax({
                        url: 'http://stripe_payment_gateway.dvl.to/checkout.php',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            razorpay_payment_id: response.razorpay_payment_id,
                            totalAmount: totalAmount,
                            product_id: product_id,
                        },
                        success: function (msg) {
                            window.location.href = 'http://stripe_payment_gateway.dvl.to/success.php';
                        }
                    });
                },
                "theme": {
                    "color": "#528FF0"
                }
            };
            var rzp1 = new Razorpay(options);
            rzp1.open();
            e.preventDefault();
        });
    </script>

    <!-- Function to update quantity and total price -->
    <script>
        function updateQuantity(action, item, price) {
            var quantityInput = document.querySelector('input[name="quantity"]');
            var quantity = parseInt(quantityInput.value);

            if (action === 'plus') {
                quantity += 1;
            } else if (action === 'minus' && quantity > 1) {
                quantity -= 1;
            }

            quantityInput.value = quantity;

            var itemPrice = parseFloat(price);
            var totalPrice = quantity * itemPrice;

            document.getElementById('total-price').textContent = totalPrice.toFixed(2);
        }
    </script>

</body>
</html>