<h1>Basqet Demo</h1>
<select name = "currency" class="currencyInput">
  <option value = "USD">USD</option>
  <option value = "EUR">EUR</option>
  <option value = "GBP">GBP</option>
</select>
<input type="number" min="5" class="amountInput" placeholder="Amount"/>
<input type="email"  class="emailInput"
       placeholder="Email Address"/>
<input type="text" value="" class="descriptionInput" placeholder="Transaction Description" />
<input type="text"
       class="publicKeyInput" placeholder="Basqet Public key" />
<button class="payButton">Pay</button>
<script src="https://checkout.basqet.com/static/prod/basqet.js"></script> 

.publicKeyInput {
  display: block;
}

input {
  display: block;
  margin: 10px 0;
  width: 300px;
  height: 30px;
  padding: 2px 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

select {
  display: block;
  margin: 10px 0;
  width: 330px;
  height: 40px;
  padding: 2px 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  display: block;
  margin: 10px 0;
  width: 330px;
  height: 50px;
  padding: 2px 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-weight: bold;
}

const amountInput = document.querySelector(".amountInput");
const payButton = document.querySelector(".payButton");
const emailInput = document.querySelector(".emailInput");
const descriptionInput = document.querySelector(".descriptionInput");
const publicKeyInput = document.querySelector(".publicKeyInput");
const currencyInput = document.querySelector(".currencyInput");

payButton.addEventListener("click", () => {
  const amount = amountInput.value;
  const email = emailInput.value;
  const publicKey = publicKeyInput.value;
  const description = descriptionInput.value;
  const currency = currencyInput.value

  window.payWithBasqet({
    amount,
    email,
    ...(description && { description }),
    currency: currency,
    public_key: publicKey,
    meta: {
      transaction_reference: "REF56768798"
    },
    onSuccess: (ref) => {
      alert(`Transaction successful: ${ref}`);
    },
    onError: (error) => {
      alert(`Transaction failed ${error}`);
    },
    onClose: () => {
      alert("Checkout closed");
    },
    onAbandoned: () => {
      alert("Checkout Abandoned");
    }
  });
});