<script>
import CreditCard from 'svelte-interactive-creditcard'
//https://github.com/MelihAltintas/svelte-credit-card
let creditCard;
let investor = "INVESTOR";
let cardNumber = "5446895555555555";
let expDate = "11/21";
let cardHolder = "Melih Altıntaş";
let cvv = "999";
</script>
<div class="container">
<div class="card mx-auto mt-3 p-0" style="width:400px">
<CreditCard {investor} {cardNumber} {expDate} {cardHolder} {cvv} bind:this={creditCard} width="400px"/>
<div class="card-body">
<p class="text-muted">Your payment details</p>
<div class="numbr mb-3">
<input class="col-12 p-0" type="text" placeholder="Card Number" bind:value={cardNumber} on:focus={creditCard.focusCardNumber()}>
</div>
<div class="numbr mb-3">
<input class="col-12 p-0" type="text" placeholder="Card Holder" bind:value={cardHolder} on:focus={creditCard.focusCardHolderElement()}>
</div>
<div class="numbr mb-3">
<input class="cal col-12 p-0" type="text" placeholder="MM/YY" bind:value={expDate} on:focus={creditCard.focusExpDateElement()}>
</div>
<div class="numbr mb-3">
<input class="cal col-12 p-0" type="text" placeholder="CVV" bind:value={cvv} on:focus={creditCard.focusCvvElement()}>
</div>
</div>
<div class="footer text-center p-0">
<div class="col-lg-12 col-12 p-0">