<template>
    
    <div class="col-12 px-0 mb-2">
        <!-- placeholder for card under bold text-->
        <div class="">
            <p class="h7 fw-bold mb-1">Pay by Card </p>
            <p class="textmuted h8 mb-2">Make payment by filling in the card details</p>
            <div class="form">
                <div class="row">
                    <div class="col-12">
                        <div class="card border-0"> <input class="form-control ps-5" type="text" placeholder="Card number"> <span class="far fa-credit-card"></span> </div>
                    </div>
                    <div class="col-6"> <input class="form-control my-3" type="text" placeholder="MM/YY"> </div>
                    <div class="col-6"> <input class="form-control my-3" type="password" placeholder="cvv"> </div>
                    
                </div>
                <div class="btn btn-primary d-block h8 mb-2">Make Payment <!-- <span class="fas fa-dollar-sign ms-2"></span>1400<span class="ms-3 fas fa-arrow-right"></span> --></div>
                
                

                
            </div>
        </div>

    </div>
</template>
  
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  components: {

  },
  setup() {


    return {

    };
  }
});
</script>


  