Problema addEventListener e pypal

[fermat]

ciao!

sto cercando di integrare paypal all'interno del mio sito.
prima di inviare i dati a paypal, devo controllare che ci siano tutti i dati.
seguendo l'esempio ho fatto questo:

paypal.Buttons({
    env: 'sandbox',
    commit: true,
    style: {
        layout: 'vertical',
        color: 'blue',
        shape: 'rect',
        label: 'paypal',
        height: 35
    },
    onInit: function (data, actions) {
        actions.disable();
        document.querySelector('#dati_validati')
            .addEventListener('change', function (event) {
                console.log(event);
                actions.enable();
            });
    },
    onClick: function (data,actions) {
        // CONTROLLO I CAMPI
    },
    createOrder: function (data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '0.01'
                }
            }]
        });
    }
}).render('#paypal-button-container');

ho impostato un controllo sul valore di un campo di testo.
il valore viene cambiato, ho controllato.
ma nn succede nulla.
come se addEventListener non fosse intercettato.

[M4V1]

#dati_validati che cosa è? Un checkbox da spuntare dopo che l'utente ha controllato i dati?

[fermat]

#dati_validati che cosa è? Un checkbox da spuntare dopo che l'utente ha controllato i dati?

ciao!
no scusa, è input text.
stavo cercando di usarla come "variabile" da usare.
all'inizio il suo valore è false (o ko).
a fine validazione diventa true (o ok).

ho provato anche usando getElementById.
o l'onchange inline.
ma nada.

[M4V1]

onchange parte quando l'elemento perde il focus, quindi in base a come setti il valore di #dati_validati l'evento potrebbe non partire.

[fermat]

onchange parte quando l'elemento perde il focus, quindi in base a come setti il valore di #dati_validati l'evento potrebbe non partire.

io lo setto da javascript quel valore.
dopo aver validato i dati.
quindi un discorso di focus in verità non c'è.
una alternativa??

in pratica devo riattivare il bottoni dopo aver validato il form:

actions.enable();

sulla documentazione c'è l'esempio con una checkbox.
ma io devo validare tutti i campi!

[M4V1]

Invece di chiamare actions.enable() tramite un evento chiama quel metodo nella funzione di validazione.
Se la validazione va a buon fine attivi i bottoni, altrimenti li lasci disattivati e magari fai uscire un errore.

[fermat]

Invece di chiamare actions.enable() tramite un evento chiama quel metodo nella funzione di validazione.
Se la validazione va a buon fine attivi i bottoni, altrimenti li lasci disattivati e magari fai uscire un errore.

si ci ho provato.
ma la metto dopo la validazione mi va in errore, dicendo che la funzione non esiste:

Error: actions.enable is not a function

[M4V1]

Non vedendo il codice vado un po' ad intuito.
Passi actions come argomento nella funzione di validazione? Altrimenti nello scope della funzione quell'oggetto non esiste e ti da l'errore.

[fermat]

in pratica:

    onClick: function (data, actions) {
        console.log(actions);
    },

questo mi restituisce altre funzioni.
sono quelle di base di paypal.

quindi ho fatto in questa maniera:

var paypalActions;

paypal.Buttons({
    env: 'sandbox',
    commit: true,
    style: {
        layout: 'vertical',
        color: 'blue',
        shape: 'rect',
        label: 'paypal',
        height: 35
    },
    onInit: function (data, actions) {
        paypalActions = actions;
        actions.disable();
    },
    onClick: function (data, actions) {
        paypalActions.enable();
    },
    createOrder: function (data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '50'
                }
            }]
        });
    },
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
        });
    },
    onError: function (err) {
        console.log('ERRORE');
        console.log(err);
    }
}).render('#paypal-button-container');

questo funziona, solo che devo cliccare due volte sul tasto.
nella prima i bottoni vengono "riabilitati".
al secondo click parte il pagamento.

[fermat]

risolto così:

let nome = null;
let cognome = null;
let indirizzo = null;
let cap = null;
let citta = null;
let provincia = null;
let cf = null;
let prefisso = null;
let telefono = null;
let email = null;
let d_nome = null;
let d_cognome = null;
let d_indirizzo = null;
let d_cap = null;
let d_citta = null;
let d_provincia = null;
let d_cf = null;
let d_prefisso = null;
let d_telefono = null;
let d_email = null;
let is_privacy = null;

paypal.Buttons({
    env: 'sandbox',
    commit: true,
    style: {
        layout: 'vertical',
        color: 'blue',
        shape: 'rect',
        label: 'paypal',
        height: 35
    },
    onClick: function (data, actions) {
        nome = $('#nome').val();
        cognome = $('#congnome').val();
        indirizzo = $('#indirizzo').val();
        cap = $('#cap').val();
        citta = $('#citta').val();
        provincia = $('#provincia').val();
        telefono = $('#telefono').val();
        email = $('#email').val();
        cf = $('#cf').val();
        prefisso = $('#prefisso').val();
        is_privacy = $('#chk_privay').prop("checked");

        // CONTROLLA SE LA PRIVCAY È CECCATA
        if (!is_privacy) {
            $('#msg_err').html('Devi accettare la Privacy Policy prima di continuare');
            $('#modal_privacy').modal('show');
            return actions.reject();
        } else {
            // CONTROLLA CHE TUTTI I VALORI SIANO INSERITI
            if (R.isEmpty(nome) || R.isEmpty(cognome) || R.isEmpty(indirizzo) || R.isEmpty(cap) || R.isEmpty(citta)
                || R.isEmpty(provincia) || R.isEmpty(prefisso) || R.isEmpty(telefono) || R.isEmpty(email)) {

                $('#msg_err').html('Tutti i campi, tranne il codice fiscale, sono obbligatori');
                $('#modal_privacy').modal('show');
                return actions.reject();
            } else {
                // CONTROLLA SE È UN REGALO
                if (sessionStorage.getItem('IS_REGALO') === 'SI') {
                    d_nome = $('#dnome').val();
                    d_cognome = $('#dcongnome').val();
                    d_indirizzo = $('#dindirizzo').val();
                    d_cap = $('#dcap').val();
                    d_citta = $('#dcitta').val();
                    d_provincia = $('#dprovincia').val();
                    d_telefono = $('#dtelefono').val();
                    d_email = $('#demail').val();
                    d_cf = $('#dcf').val();
                    d_prefisso = $('#dprefisso').val();

                    // CONTROLLA CHE TUTTI I CAMPI DEL BENEFICIARIO SIANO INSERITI
                    if (R.isEmpty(d_nome) || R.isEmpty(d_cognome) || R.isEmpty(d_indirizzo) || R.isEmpty(d_cap) || R.isEmpty(d_citta)
                        || R.isEmpty(d_provincia) || R.isEmpty(d_prefisso) || R.isEmpty(d_telefono) || R.isEmpty(d_email)) {
                        $('#msg_err').html('Tutti i campi, compresi quelli del beneficiario, tranne il codice fiscale, sono obbligatori');
                        $('#modal_privacy').modal('show');
                        return actions.reject();
                    } else {
                        return actions.resolve();
                    }
                } else {
                    return actions.resolve();
                }
            }
        }
    },
    createOrder: function (data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '50'
                }
            }]
        });
    },
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
            // This function shows a transaction success message to your buyer.
            alert('Transaction completed by ' + details.payer.name.given_name);
        });
    },
    onError: function (err) {
        console.log('ERRORE');
        console.log(err);
    }
}).render('#paypal-button-container');

invece di disabilitare i bottoni nell'onInit, ho usato le actions dell'onClick.