async function CardPay(fieldEl, buttonEl) {
  
  // Create a card payment object and attach to page
  const card = await window.payments.card({
    style: {
      '.input-container.is-focus': {
        borderColor: '#006AFF'
      },
      '.message-text.is-error': {
        color: '#BF0020'
      }
    }
  });
  await card.attach(fieldEl);

  async function eventHandler(event) {
   
    // Clear any existing messages
    window.paymentFlowMessageEl.innerText = '';
    

       
    try {
     
      const result = await card.tokenize();
     // console.log(result);
      if (result.status === 'OK') {
         $('#loading-spinner-overlay').css('visibility', 'visible');
        // Use global method from sq-payment-flow.js
        window.createPayment(result.token);
      }
    } catch (e) {
      if (e.message) {
        // console.log(e.message);
        // window.showError(`Error: ${e.message}`);
        window.showError(`The request is already in process`);
      } else {
        window.showError('Something went wrong');
      }
    }
  }

  buttonEl.addEventListener('click', eventHandler);
}