var monri = Monri('', { locale: 'en' });
var components = monri.components({ "clientSecret": '' });
var card = components.create('card', { showInstallmentsSelection: true });
card.mount('card-element');

card.onChange(function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});

var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
    event.preventDefault();
    const transactionParams = {
        fullName: "Test Testić",
        address: "Address",
        city: "City",
        zip: "12345",
        phone: "+385999999999",
        country: "HR",
        email: "test@test.hr",
        orderInfo: "orderNumber12"
    }

    monri.confirmPayment(card, transactionParams).then(function (result) {
        console.log(result);
        if (result.error) {
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            handlePaymentResult(result.result)
        }
    });
});