Recuperar dados do JS

[mkboy 1]

Prezados, boa tarde.

 

Estou com dificuldade em recuperar dados de uma função, sou grato se puderem me ajudar.

Estou integrando o Pagar.Me no meu site.

Na página de pagamento, tenho uma DIV com os campos do formulário e em seguida um Form.

 

Manual: https://docs.pagar.me/docs/obtendo-os-dados-do-cartao

 

Esse é p modelo dos campos:

 

<div id="form">
    Número do cartão: <input type="text" id="card_number"/>
    <br/>
    Nome (como escrito no cartão): <input type="text" id="card_holder_name"/>
    <br/>
    Mês de expiração: <input type="text" id="card_expiration_month"/>
    <br/>
    Ano de expiração: <input type="text" id="card_expiration_year"/>
    <br/>
    Código de segurança: <input type="text" id="card_cvv"/>
    <br/>
    <div id="field_errors">
    </div>
    <br/>
</div>
<form id="payment_form" action="https://seusite.com.br/transactions/new" method="POST">
    <input type="submit"></input>
</form>

Fiz a inserção do Script deles, e a inserção desta função no site:

 

$(document).ready(function() { 
    var form = $("#payment_form")

    form.submit(function(event) {
        event.preventDefault();
        var card = {} 
        card.card_holder_name = $("#form #card_holder_name").val()
        card.card_expiration_date = $("#form #card_expiration_month").val() + '/' + $("#form #card_expiration_year").val()
        card.card_number = $("#form #card_number").val()
        card.card_cvv = $("#form #card_cvv").val()

        // pega os erros de validação nos campos do form e a bandeira do cartão
        var cardValidations = pagarme.validate({card: card})
				
        //Então você pode verificar se algum campo não é válido
        if(!cardValidations.card.card_number)
          console.log('Oops, número de cartão incorreto')
         
        //Mas caso esteja tudo certo, você pode seguir o fluxo
        pagarme.client.connect({ encryption_key: 'SUA_ENCRYPTION_KEY' })
          .then(client => client.security.encrypt(card))
          .then(card_hash => console.log(card_hash))
          // o próximo passo aqui é enviar o card_hash para seu servidor, e
          // em seguida criar a transação/assinatura

        return false
    })
});

O objetivo é gerar o card_hash, e consegui fazer isso, olhando no console do Chorme, é gerado, mas, não consigo enviar esse dado para o formulário e submete-lo.

 

Fiz isso:

 

Criei um campo e na função JS estou enviando o valor fixo 'Pegar valor aqui', e está retornando para o campo que enviei.

 

var var_card_hash = 'Pegar valor aqui';
document.getElementById("card_hash").value = var_card_hash;   
								 

 

Mas, se tento pegar o valor que exibe no console, esse aqui:

 

.then(card_hash => console.log(card_hash)

Não consigo retonar ele ali na variavel var_card_hash.

 

Esse é o primeiro problema.

 

O segundo, é que não consigo eniar no post do formulário todos os campos que estão da DIV de ID form.

 

Até tentei fazer isso, mas ele submete o form vazio.

 

.then(card_hash => var var_card_hash = card_hash)

document.getElementById("card_hash").value = var_card_hash;   

 

 

Podem me auxiliar por favor?