62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{% static 'css/product.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="page-header">
|
|
<div>
|
|
<h1>Checkout Payment</h1>
|
|
<p>Choose a payment option to confirm your order securely.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="payment-page">
|
|
<div class="payment-panel">
|
|
<h2>Order #{{ order.id }}</h2>
|
|
<p class="payment-total">Amount due: <strong>Rs. {{ order.total_price|floatformat:2 }}</strong></p>
|
|
<p>Status: <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span></p>
|
|
|
|
<form method="POST" class="payment-form">
|
|
{% csrf_token %}
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment" value="eSewa" required>
|
|
<span>eSewa</span>
|
|
<small>Pay with Nepal's popular mobile wallet.</small>
|
|
</label>
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment" value="Khalti">
|
|
<span>Khalti</span>
|
|
<small>Pay instantly with Khalti wallet.</small>
|
|
</label>
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment" value="Fonpay">
|
|
<span>Fonpay</span>
|
|
<small>Use Fonpay for secure mobile payment.</small>
|
|
</label>
|
|
<label class="payment-option">
|
|
<input type="radio" name="payment" value="Cash on Delivery">
|
|
<span>Cash on Delivery</span>
|
|
<small>Pay when your order arrives.</small>
|
|
</label>
|
|
<button class="btn btn-primary" type="submit">Continue to Payment</button>
|
|
</form>
|
|
</div>
|
|
|
|
<aside class="order-summary summary-box">
|
|
<h3>Order details</h3>
|
|
<p>Total items: {{ order.items.count }}</p>
|
|
<ul class="order-summary-list">
|
|
{% for item in order.items.all %}
|
|
<li>
|
|
<span>{{ item.product.name }} x {{ item.quantity }}</span>
|
|
<strong>Rs. {{ item.price|floatformat:2 }}</strong>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
{% endblock %}
|