0

Tenho o seguinte jQuery

function doPay(event){
    console.log('submetendo pagamento....');
    event.preventDefault();
    if(!doSubmit){
        var $form = document.querySelector('#pay');

        console.log('criando token....');

        var dados = JSON.stringify( $form.serializeArray() );
        console.log(dados);


       // window.Mercadopago.createToken($form, sdkResponseHandler);

        return false;
    }
};

Mas ao enviar o formulário, não consigo reportar ele ao console. Aparece o seguinte mercadopago.js:110 Uncaught TypeError: $form.serializeArray is not a function

HTML

<form id="pay" name="pay" action="<?php echo base_url('inicial/validartransascao'); ?>" enctype="multipart/form-data">
 <div class="column three-fifth">
        <h6 style="">Vamos começar?</h6>
    </div>      
    <div class="column one">
        <select class="form-control" style="width: 100% !important;" id="transaction_amount" name="transaction_amount">
            <option value="21.9">BLUE TV 30 DIAS - R$ 21,90</option>
            <option value="61.90">BLUE TV 90 DIAS - R$ 61,90</option>
            <option value="169.90">BLUE TV ANUAL - R$ 169,90</option>
        </select>
    </div>

    <div id="retornos">
        <div id="cardType"></div>
    </div>
    
    <div class="column one">
        <input placeholder="Nome Completo" type="text" id="cardholderName" data-checkout="cardholderName" size="40" aria-required="true" aria-invalid="false" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
    </div>
    <!--
    <div class="column one-second">
      <input placeholder="Sobrenome" type="text" name="sobrenome" id="sobrenome" size="40" aria-invalid="false" />                                                            
    </div>
    -->
    <div class="column one-second">
        <input placeholder="Telefone" type="text" name="telefone" id="telefone" style="width:100%;" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>
     <div class="column one-second">
        <input placeholder="E-mail" type="email" name="email" id="email" size="40" aria-required="true" aria-invalid="false" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off />
    </div>

    <div class="column one">
        <input placeholder="Número do Cartão" type="text" id="cardNumber" data-checkout="cardNumber" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off  size="40" aria-required="true" aria-invalid="false" />
    </div>

    <div class="column one-third">
        <input placeholder="Mês" type="text" id="cardExpirationMonth" data-checkout="cardExpirationMonth" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>

    <div class="column one-third">
        <input placeholder="Ano" type="text" id="cardExpirationYear" data-checkout="cardExpirationYear" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off aria-invalid="false"/>
    </div>
    
    <div class="column one-third">
        <input placeholder="CVV" type="text" id="securityCode" data-checkout="securityCode" onselectstart="return false" onpaste="return false" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off  size="40" aria-required="true" aria-invalid="false" />
    </div>

    <div class="column one">
        <select id="installments" class="form-control" name="installments" placeholder="Parcelas"></select>
    </div>    

    <input type="hidden" name="payment_method_id" id="payment_method_id"/>

    <div class="column one">
        <input type="submit" value="Pagar"/>
        <!--<input type="submit" value="Receber meu código AGORA!" id="submit">-->
    </div>
</form>

A biblioteca que estou usando como referência é a do MercadoPago:

https://github.com/MercadoPagoDevelopers/api-frontend-sample/

1 Resposta 1

1

Você precisa usar jQuery para requisitar o elemento '#pay'.

Um elemento HTML nativo não têm o método serializeArray, então substitua o código var $form = document.querySelector('#pay'); por var $form = $('#pay');

Exemplo funcional: https://www.w3schools.com/code/tryit.asp?filename=GHVJ1X540M45

2
  • Dessa forma, diz que o meu $form não existe.. aliais, o "$" não é valido como argumento 18/08/2020 às 17:53
  • Então tente jQuery ao invés de $, se der o mesmo erro então está faltando a biblioteca jQuery 18/08/2020 às 18:23

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .