# Checkout

<snt-checkout></snt-checkout>

<snt-checkout #default="{ selectedPurchase, totalPrice, shippingFee, promoCodeDiscount, netPrice, valid, submitting, submit }">
  <snt-cart #default>
    <div>
      <div>ส่งไปยังที่อยู่ของฉัน</div>
      <snt-address></snt-address>
      <div>เลือกวิธีจัดส่ง</div>
      <snt-shipping></snt-shipping>
      <div>เลือกช่องทางชำระเงิน</div>
      <snt-payment-methods></snt-payment-methods>
      <div>ใช้ส่วนลด</div>
      <snt-promo-codes></snt-promo-codes>
      <div>จำนวนสินค้าในตะกร้า</div>
      <template v-for="(item, i) in selectedPurchase">
        <div :key="i">
          <div>{{ item.name }}</div>
          <div>ราคา</div>
          <div>{{ item.price | toLocaleString }} ฿</div>
          <div>จำนวน</div>
          <div>{{ item.quantity | toLocaleString }}</div>
        </div>
      </template>
      <h3>สรุปคำสั่งซื้อ</h3>
      <div>ยอดรวม</div>
      <div>{{ totalPrice | toLocaleString }} ฿</div>
      <div>ส่วนลด</div>
      <div>{{ promoCodeDiscount | toLocaleString }} ฿</div>
      <div>ค่าส่งสินค้า</div>
      <div v-if="shippingFee">{{ shippingFee | toLocaleString }} ฿</div>
      <div v-else>ฟรี</div>
      <div>ยอดรวมทั้งหมด</div>
      <div>{{ netPrice | toLocaleString }} ฿</div>
      <snt-button
        :loading="submitting"
        :disabled="!valid"
        color="secondary"
        depressed
        large
        block
        @click="submit()">
        ยืนยันการสั่งซื้อ
      </snt-button>
    </div>
  </snt-cart>
</snt-checkout>