Simple Checkout Form

<!DOCTYPE html>
<title>My Example</title>

<div class="checkout-container">
    <form class="checkout-form" id="checkoutForm" action="#" method="post">
        
        <fieldset>
            <legend>Shipping Information</legend>
            <div class="form-group"><label for="shipping-name">Full Name</label><input type="text" id="shipping-name" name="shipping_name" autocomplete="name" required></div>
            <div class="form-group"><label for="shipping-address">Address</label><input type="text" id="shipping-address" name="shipping_address" autocomplete="street-address" required></div>
            <div class="form-row">
                <div class="form-group"><label for="shipping-city">City</label><input type="text" id="shipping-city" name="shipping_city" autocomplete="address-level2" required></div>
                <div class="form-group"><label for="shipping-zip">Zip Code</label><input type="text" id="shipping-zip" name="shipping_zip" autocomplete="postal-code" required></div>
            </div>
        </fieldset>

<fieldset>
            <legend>Payment Details</legend>
            <div class="form-group"><label for="card-name">Name on Card</label><input type="text" id="card-name" name="card_name" autocomplete="cc-name" required></div>
            <div class="form-group"><label for="card-number">Card Number</label><input type="text" id="card-number" name="card_number" autocomplete="cc-number" required></div>
            <div class="form-row">
                <div class="form-group"><label for="card-expiry">Expiry Date (MM/YY)</label><input type="text" id="card-expiry" name="card_expiry" autocomplete="cc-exp" placeholder="MM/YY" required></div>
                <div class="form-group"><label for="card-cvc">CVC</label><input type="text" id="card-cvc" name="card_cvc" autocomplete="cc-csc" required></div>
            </div>
        </fieldset>

<fieldset>
            <legend>Billing Address</legend>
            <div class="billing-checkbox">
                <input type="checkbox" id="same-as-shipping" name="same_as_shipping" checked>
                <label for="same-as-shipping">Same as shipping address</label>
            </div>
            
            <div id="billing-address-fieldset" style="display: none;">
                <div class="form-group"><label for="billing-name">Full Name</label><input type="text" id="billing-name" name="billing_name" autocomplete="name"></div>
                <div class="form-group"><label for="billing-address">Address</label><input type="text" id="billing-address" name="billing_address" autocomplete="street-address"></div>
                <div class="form-row">
                    <div class="form-group"><label for="billing-city">City</label><input type="text" id="billing-city" name="billing_city" autocomplete="address-level2"></div>
                    <div class="form-group"><label for="billing-zip">Zip Code</label><input type="text" id="billing-zip" name="billing_zip" autocomplete="postal-code"></div>
                </div>
            </div>
        </fieldset>

<button type="submit" class="submit-btn">Place Order</button>
    </form>
</div>

if (sameAsShippingCheckbox && billingAddressFields) {
    // This function will toggle the visibility of the billing address section
    const toggleBillingAddress = () => {
        if (sameAsShippingCheckbox.checked) {
            billingAddressFields.style.display = 'none';
        } else {
            billingAddressFields.style.display = 'block';
        }
    };
    
    // Listen for changes on the checkbox
    sameAsShippingCheckbox.addEventListener('change', toggleBillingAddress);

// Run the function on initial page load
    toggleBillingAddress();
}
</script>