Thanh toán

Các nội dung cơ bản của trang thanh toán

Trang thanh toán là trang cung cấp dịch vụ thanh toán cho đơn hàng đã được người dùng chọn vào giỏ hàng trước đó. Thanh toán là bước xác nhận cuối cùng để người dùng có thể thành công đặt được sản phẩm mình đã chọn mua.

Các thẻ meta

{% extends layout_empty %}
{% block meta %}
    {{ headTitle('Thanh toán').setSeparator(' - ').setAutoEscape(false)|raw }}
    <meta name="keywords" content="Thanh toán">
    <meta name="description" content="Thanh toán">
    <link rel="canonical" href="{{ getCurrentUrl(true) }}" />
    <meta property="og:url" content="{{ getCurrentUrl(true) }}">
    <meta property="og:image" content="https://dummyimage.com/300x200/000/fff">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Thanh toán">
{% endblock %}

Xác nhận

Người dùng có thể xem chi tiết thông tin đơn hàng mà mình sắp thanh toán như Hình ảnh, Mô tả, Số lượng, Giá:

{% set products = serviceCart().productList %}
{% if (products) %}
{% for p in products %}
{% set discount = p.priceAfterDiscount(p.quantity) %}
<tr class="product">
    <td class="product-image">
        <div class="product-thumbnail">
            <div class="product-thumbnail-wrapper">
                <img class="product-thumbnail-image" src="{{ p.thumbnailUri }}" alt="{{ p.name }}">
            </div>
            <span class="product-thumbnail-quantity">{{ p.quantity }}</span>
        </div>
    </td>
    <td class="product-description">
    <span class="product-description-name order-summary-emphasis tp_product_name">
        {{ p.name }}                                              
    </span>
    </td>
<td class="product-quantity visually-hidden">{{ p.quantity }}</td>
<td class="product-price">
    <span class="order-summary-emphasis">
        {% if(discount > 0) %}
        <span class="tp_product_price">{{ discount|number_format(0) }} đ <del>{{ p.price|number_format(0) }} đ</del></span>                                                
        {% elseif(p.oldPrice > 0) %}
        <span class="tp_product_price">{{ p.price|number_format(0) }} đ <del>{{ p.oldPrice|number_format(0) }} đ</del></span>                                                
        {% else %}
        <span class="tp_product_price">{{ p.price|number_format(0) }} đ</span>   
        {% endif %}
    </span>
</td>
</tr>
{% endfor %}
{% endif %}

Mã giảm giá

Người dùng có thể sử dụng mã giảm giá mỗi khi có chương trình để giảm giá trị đơn hàng

<div class="section-item bg-white">
   <div class="section-header">
       <span>{{ translate('Mã giảm giá') }}</span>
       <p class="_couponPrice"></p>
   </div>
   <div class="section-discount-code p-3">
       <div class="discount-box">
          <input aria-label="coupon" type="text" class="_txtCoupon" placeholder="{{ translate('Nhập mã ưu đãi') }}">
          <a class="_couponBtn">
              {{ translate('Áp dụng') }}
          </a>
        </div>
    </div>
</div>

Số tiền cần thanh toán

Số tiền cần thanh toán cho mỗi đơn hàng bao gồm số tiền tạm tính và phí vận chuyển

<td class="total-line-name payment-due-label">
    <span class="payment-due-label-total">Tổng cộng</span>
</td>
<td class="total-line-name payment-due">
    <span class="payment-due-price" id="showTotalMoney" value="{{ totalCartMoney }}">
        {{ totalCartMoney |number_format(0) }} đ
    </span>
</td>

Thông tin giao hàng

Thông tin về người mua hàng sẽ được hiển thị chi tiết như: Tên, Số điện thoại, Email, Địa chỉ, Tỉnh thành phố, Quận huyện, Phường xã

<input aria-label="{{ translate('Họ và tên') }}" type="text" placeholder="{{ translate('Họ và tên') }}" class="validate[required] form-control" name="customerName" value="{{ user?user.fullname:'' }}">
<input aria-label="{{ translate('Điện thoại') }}" class="validate[required,custom[phone]] form-control" name="customerMobile" type="text" placeholder="{{ translate('Điện thoại') }}" value="{{ user ? (user.mobile | replace({'+84': '0'})):'' }}" required>
<input aria-label="Email" class="form-control" type="email" placeholder="Email" value="{{ user?user.email:'' }}" name="customerEmail">
<input aria-label="{{ translate('Địa chỉ') }}" type="text" placeholder="{{ translate('Địa chỉ') }}" class="validate[required] form-control" 
                                               value="{{ user?user.address:'' }}" name="customerAddress">
<select aria-label="city" name="customerCityId" id="customcityId" class="validate[required] form-control" tabindex="-1" aria-hidden="true">
     <option value="">{{ translate('Chọn Tỉnh/ thành phố') }}</option>
     



 </select>
 
 <select aria-label="district" name="customerDistrictId" id="customdistrictId"
        class="validate[required] form-control">
        <option>{{ translate('Chọn Quận/ Huyện') }}</option>
        



  </select>
  
  <select aria-label="ward" name="customerWardId" id="customerWardId"
         class="validate[required] form-control">
      <option>{{ translate('Chọn Phường/ Xã') }}</option>
      


    </select>
    <input type="hidden" name="selectIdWard">

    <textarea aria-label="description" name="description"  placeholder="{{ translate('Ghi chú đơn hàng') }}" rows="3" ></textarea>

Phương thức vận chuyển

Người dùng có thể chọn các phương thức vận chuyển cũng như các hãng vận chuyển như: Liên vùng, Giao nhanh, Giao chậm, Giao hỏa tốc...

<div class= "justify-content-between pe-3 ps-3 mb-3">
     <div class="price-item-title">{{ translate('Phí vận chuyển') }}</div>
     <div>
        <span id="ship_fee" class="_ship_fee">0</span>
        <span id="showCarrier"></span>
     </div>
</div>

Phương thức thanh toán

Người dùng có thể chọn các phương thức thanh toán mình muốn như: Thanh toán tại nhà, Thanh toán chuyển khoản, cũng như các nền tảng hộ trợ thanh toán online khác như VNPay hoặc MoMo.

{{ getPayments() | raw }}