// instanciate the PayCertify plugin
const paywith = PayCertify('064BDCCB1F7A8835A468081753A633CA0B679FBC');

// create the elements instance
const elements = paywith.elements();

// You can override the default styling by passing a `style` object
// to the card element during its creating
const style = {
  button: {
    color: 'red'
  }
};

// create a element of type card and pass the amount to be charged
// you can find the whole list of accepted parameters here
const cardElement = elements.create('card', { style: style }, { amount: 10 });

// mount the card into a element with #container and
// stores its reference on a variable
const cardData = cardElement.mount('#container');

// handle the form subimission
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener('submit', async function(event) {
  event.preventDefault();

  try {

    // create a payment using the data provided
    // on the card element
    const result = await paywith.charges.create(cardData)

    // handle the result
    // check the response data here
    if(result.success) {
      //do whatever you need with the result
      paymentForm.submit();
    }
  } catch (err) {
    // handle here the validation error.
    console.error('err', err);
  }

});