Блог

Я пытаюсь отправить некоторую скрытую информацию после того, как пользователь запускает событие onclick на кнопке отправки. Мне интересно, достаточно ли времени, чтобы Javascript установил значение для скрытого ввода, а затем отправил во всю форму. Мне понадобится скрытая информация в серверной части, чтобы продолжить обработку проверки кредитной карты.

Мой скрипт:

     var elSubmit = document.getElementById("form-button");
    elSubmit.onclick = createToken;

    function createToken() {

        var sixDig = elCard.value.substring(0,7).replace(/s /g, '');

            var elMonth = document.getElementById("month-cc");
            var elYear = document.getElementById("year-cc");

        PagSeguroDirectPayment.createCardToken({
            cardNumber: elCard.value.replace(/ /g,''), // Número do cartão de crédito
            brand: flag, // Bandeira do cartão
            cvv: elCvc.value, // CVV do cartão
            expirationMonth: elMonth.value, // Mês da expiração do cartão
            expirationYear: 20   elYear.value, // Ano da expiração do cartão, é necessário os 4 dígitos.

            success: function(response) {
                var token = response.card.token;
                console.log('Token do cartão: '   token);
                var elToken = document.getElementById("token");
                **elToken.setAttribute("value", token);**
            },
            error: function(response) {
                console.log(response);
                // Callback para chamadas que falharam.
            },
            complete: function(response) {
                console.log(response);
                // Callback para todas chamadas.
            }
        });
    }
  

Страница html:

             <form action="{% url 'payment:checkout' %}" method="post">

                <div id="shipping-info">
                        <a href="{% url 'payment:address_change' %}">
                              Desejo alterar o endereço de entrega</a></p>
                    <hr>


                        {% csrf_token %}

                      <div class="form-group">

                          <label for="card-element">Insira as informações do seu cartão de crédito:</label>

                          <div class="card-js" data-icon-colour="#158CBA">
                           <input class="card-number form-control"
                                  name="my-custom-form-field__card-number"
                                  placeholder="Número do cartão"
                                  autocomplete="off"
                                  id="number-cc"
                                  required>
                           <input class="expiry" id="expiry-cc">
                           <input class="name" id="name-cc" name="name"
                                  placeholder="Nome impresso no cartão"
                                  required>
                           <input class="expiry-month" id="month-cc" required>
                           <input class="expiry-year" id="year-cc" required>
                           <input class="cvc" id="cvc-cc" required>

                        </div>
                      </div>

                </div>
                <hr>
                **<input type="hidden" name="mytoken" id="token">
                <input type="hidden" name="myhash" id="hash">**

            </form>
  

Я кодировал до этого с onblur событием для каждого поля кредитной карты, чтобы сгенерировать токен. Но теперь я думаю, что было бы проще отправить токен с onclick событием на кнопке отправки.

Какова наилучшая практика?

Спасибо!

Редактировать:

Вставьте полный js-код:

     // https://github.com/CardJs/CardJs --> validação de formulário em JS

    // Iniciando a sessão no PagSeguro

    PagSeguroDirectPayment.setSessionId(session_id);
    console.log(session_id);

    var elName = document.getElementById("name-cc");
    elName.onblur = createHash;

    var flag;

    var elCard = document.getElementById("number-cc");
    var elCvc = document.getElementById("cvc-cc");

    var elSubmit = document.getElementById("form-button");
    elSubmit.addEventListener('submit', handleOnSubmit);

    async function handleOnSubmit(e) {
      e.preventDefault();

      try {
       const response = await createToken();
       // do whatever you want with the response here...
       const { token } = response.card;
       console.log(token);
       console.log('Token do cartão: ', token);
       const elToken = document.getElementById("token");
       elToken.setAttribute("value", token);

       document.querySelector('form').submit();

      } catch (e) {
       console.log('Error: ', e.message);
      }
    }

    function createHash() {
        PagSeguroDirectPayment.onSenderHashReady(function(response){
            if(response.status == 'error') {
                console.log(response.message);
                return false;
            }
            var hash = response.senderHash; //Hash estará disponível nesta variável.
            var elToken = document.getElementById("hash");
            elToken.setAttribute("value", hash);
        });
    }

    async function createToken() {

        var sixDig = elCard.value.substring(0,7).replace(/s /g, '');

        // única maneira que consegui fazer o exExpiry funcionar foi colocando-o dentro da função!
        var elExpiry = document.getElementsByClassName("expiry");
        //elExpiry[0].onblur = createToken;

        PagSeguroDirectPayment.getBrand({
            cardBin: sixDig,
            success: function(response) {
             flag = response.brand.name;
            },
            error: function(response) {
              console.log(response);
            },
            complete: function(response) {
              console.log(response);
            }
        });



            console.log('Card #: '   elCard.value);
            console.log('Mês: '   elExpiry[0].value.substring(0,2));
            console.log('Ano: '   elExpiry[0].value.substring(5,7));
            console.log('CVC: '   elCvc.value);
            console.log('Bandeira: '   flag);


        PagSeguroDirectPayment.createCardToken({
            cardNumber: elCard.value.replace(/ /g,''), // Número do cartão de crédito
            brand: flag, // Bandeira do cartão
            cvv: elCvc.value, // CVV do cartão
            expirationMonth: elExpiry[0].value.substring(0,2), // Mês da expiração do cartão
            expirationYear: 20   elExpiry[0].value.substring(5,7), // Ano da expiração do cartão, é necessário os 4 dígitos.

            success: function(response) {
                var token = response.card.token;
                console.log('Token do cartão: '   token);
                var elToken = document.getElementById("token");
                elToken.setAttribute("value", token);
            },
            error: function(response) {
                console.log(response);
                // Callback para chamadas que falharam.
            },
            complete: function(response) {
                console.log(response);
                // Callback para todas chamadas.
            }
        });

}
    
  

Может быть, вы можете сделать что-то подобное! [ОБНОВЛЕНО]

 
var elSubmit = document.getElementById("form-button");
elSubmit.addEventListener('submit', handleOnSubmit);

async function handleOnSubmit(e) {
  e.preventDefault();
  
  try {
   const response = await createToken();
   // do whatever you want with the response here...
   const { token } = response.card;
   console.log('Token do cartão: ', token);
   const elToken = document.getElementById("token");
   elToken.setAttribute("value", token);

   document.querySelector('form').submit();

  } catch (e) {
   console.log('Error: ', e.message);
  }
}


async function createToken() {

  var sixDig = elCard.value.substring(0,7).replace(/s /g, '');

  var elMonth = document.getElementById("month-cc");
  var elYear = document.getElementById("year-cc");

  return PagSeguroDirectPayment.createCardToken({
    cardNumber: elCard.value.replace(/ /g,''),
    brand: flag,
    cvv: elCvc.value,
    expirationMonth: elMonth.value,
    expirationYear: 20   elYear.value,
    success: function(response) {
      return response
    },
    error: function(error) {
     return error 
    },
    complete: function(response) {
      console.log(response);
      // Callback para todas chamadas.
    }
  });
}