171 lines
7.7 KiB
HTML
171 lines
7.7 KiB
HTML
{% extends 'base.html' %}
|
||
{% load static %}
|
||
|
||
{% block extra_head %}
|
||
<link rel="stylesheet" href="{% static 'css/product.css' %}?v=20260520">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<section class="page-header reveal">
|
||
<div>
|
||
<p class="page-eyebrow">Step 2 of 2</p>
|
||
<h1>Choose your payment method</h1>
|
||
<p>Pick a verified payment option to confirm Order #{{ order.id }} with the upgraded checkout experience.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="checkout-progress reveal">
|
||
<div class="checkout-progress-step is-done">
|
||
<strong>1</strong>
|
||
<span>Delivery details</span>
|
||
</div>
|
||
<div class="checkout-progress-step is-active">
|
||
<strong>2</strong>
|
||
<span>Payment method</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-page">
|
||
<div class="payment-panel payment-panel--main reveal">
|
||
<div class="payment-panel-heading">
|
||
<div>
|
||
<p class="payment-step">Order #{{ order.id }}</p>
|
||
<h2>Complete your payment</h2>
|
||
<p class="payment-caption">Amount due: <strong>Rs. {{ order.total_price|floatformat:2 }}</strong></p>
|
||
</div>
|
||
<div class="inline-status-row">
|
||
<span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span>
|
||
<span class="status-tag status-payment-{{ order.payment_status|lower }}">{{ order.payment_status }}</span>
|
||
{% if order.payment_method and order.payment_method != 'Pending selection' %}
|
||
<span>{{ order.payment_method }}</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-overview-grid">
|
||
<article class="payment-overview-card reveal">
|
||
<strong>Verified before paid</strong>
|
||
<p>Orders are not marked paid until the gateway confirms the result.</p>
|
||
</article>
|
||
<article class="payment-overview-card reveal">
|
||
<strong>Retry-safe flow</strong>
|
||
<p>If a wallet is cancelled or fails, the order stays saved for another attempt.</p>
|
||
</article>
|
||
<article class="payment-overview-card reveal">
|
||
<strong>Flexible selection</strong>
|
||
<p>Keep COD or switch to an online method before shipment when available.</p>
|
||
</article>
|
||
</div>
|
||
|
||
{% if esewa_sandbox and esewa_ready %}
|
||
<div class="gateway-status-banner info">
|
||
<strong>eSewa is running in sandbox / UAT mode.</strong>
|
||
<p>You can test the full redirect-and-verify flow now, then switch to your live merchant credentials later.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if order.payment_method == 'Cash on Delivery' and order.payment_status == 'Pending' %}
|
||
<div class="gateway-status-banner info">
|
||
<strong>Cash on delivery is currently selected.</strong>
|
||
<p>You can keep COD, or switch to eSewa / Khalti below before the order is shipped.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if not online_ready %}
|
||
<div class="gateway-status-banner warning">
|
||
<strong>No online gateway is configured yet.</strong>
|
||
<p>Cash on delivery is still available, and you can enable Khalti or live eSewa credentials at any time.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if order.payment_status == 'Failed' %}
|
||
<div class="gateway-status-banner danger">
|
||
<strong>The last payment attempt did not complete.</strong>
|
||
<p>Your order is still saved, and you can safely start a fresh payment attempt below.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<form method="POST" class="payment-form payment-choice-form">
|
||
{% csrf_token %}
|
||
|
||
{% for option in payment_options %}
|
||
<label class="payment-method-card reveal {% if not option.ready %}is-disabled{% endif %}">
|
||
<input type="radio" name="payment" value="{{ option.value }}" {% if option.checked %}checked{% endif %} {% if not option.ready %}disabled{% endif %}>
|
||
<div class="payment-method-body">
|
||
<div class="payment-method-top">
|
||
<div class="payment-method-heading">
|
||
<strong>{{ option.title }}</strong>
|
||
{% if option.value == 'esewa' %}
|
||
<span class="payment-method-subtitle">Wallet / bank app checkout</span>
|
||
{% elif option.value == 'khalti' %}
|
||
<span class="payment-method-subtitle">Khalti hosted payment page</span>
|
||
{% elif option.value == 'fonepay' %}
|
||
<span class="payment-method-subtitle">Business / Dynamic QR</span>
|
||
{% elif option.value == 'stripe' %}
|
||
<span class="payment-method-subtitle">Card fallback</span>
|
||
{% elif option.value == 'cod' %}
|
||
<span class="payment-method-subtitle">Pay when the product arrives</span>
|
||
{% endif %}
|
||
</div>
|
||
<span class="payment-badge {% if option.badge_muted %}payment-badge--muted{% endif %}">{{ option.badge }}</span>
|
||
</div>
|
||
<p>{{ option.description }}</p>
|
||
<small>{{ option.note }}</small>
|
||
</div>
|
||
</label>
|
||
{% endfor %}
|
||
|
||
<div class="payment-trust-grid">
|
||
<div class="payment-trust-item">Server-side verification before an order is marked paid</div>
|
||
<div class="payment-trust-item">Order details are preserved even if the wallet window is cancelled</div>
|
||
<div class="payment-trust-item">Responsive checkout flow for desktop, tablet, and mobile</div>
|
||
</div>
|
||
|
||
<div class="checkout-form-actions">
|
||
<button class="btn btn-primary" type="submit">Continue to Payment</button>
|
||
<a href="{% url 'order_detail' order.id %}" class="btn btn-secondary">View Order Details</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<aside class="order-summary summary-box payment-summary reveal">
|
||
<div class="payment-summary-header">
|
||
<div>
|
||
<h3>Order details</h3>
|
||
<p class="payment-caption">{{ order.items.count }} item{{ order.items.count|pluralize }}</p>
|
||
</div>
|
||
<span class="payment-badge">Summary</span>
|
||
</div>
|
||
|
||
<ul class="order-summary-list">
|
||
{% for item in order.items.all %}
|
||
<li>
|
||
<span>{{ item.product.name }} × {{ item.quantity }}</span>
|
||
<strong>Rs. {{ item.price|floatformat:2 }}</strong>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
<div class="summary-row total-row">
|
||
<span>Total amount</span>
|
||
<span>Rs. {{ order.total_price|floatformat:2 }}</span>
|
||
</div>
|
||
|
||
<div class="summary-box payment-mini-card">
|
||
<h4>Delivery info</h4>
|
||
<p>{{ order.full_name }}</p>
|
||
<p>{{ order.phone }}</p>
|
||
{% if order.location_label %}<p>📍 {{ order.location_label }}</p>{% endif %}
|
||
<p>{{ order.address }}</p>
|
||
{% if order.delivery_notes %}<p><strong>Note:</strong> {{ order.delivery_notes }}</p>{% endif %}
|
||
{% if order.has_precise_location %}<p>GPS attached for delivery support.</p>{% endif %}
|
||
</div>
|
||
|
||
<div class="cart-summary-note">
|
||
<strong>Need to retry later?</strong>
|
||
<p>Your order remains available from My Orders, so you can return without rebuilding the cart.</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
{% endblock %}
|