Получение внешней информации и прохождение формы | JavaScript

Question

Я пытаюсь создать страницу оформления заказа на своем веб-сайте электронной коммерции, используя бразильскую платежную систему под названием PagSeguro. У меня есть некоторые сомнения по поводу кода JavaScript, потому что я действительно нуб об этом. Я работаю с Django / Python в бэкэнде.

Мне нужно собрать 2 информации с помощью JavaScript, а затем пройти через форму оформления заказа:

• onSenderHashReady : он должен выполняться с событием на странице оформления заказа. Они рекомендуют генерировать этот ha sh, когда пользователь начинает вводить идентификатор пользователя <input name="senderCPF" type="hidden" value="1234567890">.
• createCardToken: он должен захватывать карточку пользователя (номер, бренд, CVV, срок действия месяца и года, чтобы создать token.

Итак, я создал базовую c форму оформления заказа, включая код JavaScript, требуемый PagSeguro:

 <script type="text/javascript" 
 src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js">
 </script>

  <form method="post" action="">         
        <!-- Field required-->  
        <input name="receiverEmail" type="hidden" value="suporte@lojamodelo.com.br">  
  
        <!-- Buyer info -->  
        <input name="senderName" type="hidden" value="José Comprador">  
        <input name="senderAreaCode" type="hidden" value="11">  
        <input name="senderPhone" type="hidden" value="56273440">  
        <input name="senderEmail" type="hidden" value="comprador@uol.com.br">
        <input name="senderCPF" type="hidden" value="1234567890">

        <!-- Credit Card info -->  
        <input name="number" type="text">
        <input name="brand" type="text">
        <input name="cvv" type="text">
        <input name="month" type="text">
        <input name="year" type="text">

        <!-- Missing info -->  
        <input name="senderHash" type="hidden" value="???">
        <input name="creditCardtoken" type="hidden" value="???"> 
  
        <!-- submit do form (obrigatório) -->  
        <input alt="Pague com PagSeguro" name="submit" src=""/>      
</form>

<script>
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.
});


PagSeguroDirectPayment.createCardToken({
cardNumber: '4111111111111111', // Número do cartão de crédito
brand: 'visa', // Bandeira do cartão
cvv: '013', // CVV do cartão
expirationMonth: '12', // Mês da expiração do cartão
expirationYear: '2026', // Ano da expiração do cartão, é necessário os 4 dígitos.
success: function(response) {
    // Retorna o cartão tokenizado.
},
error: function(response) {
        // Callback para chamadas que falharam.
},
complete: function(response) {
    // Callback para todas chamadas.
}
});

</script>

Это небольшая часть XML. Как видите, требуются senderHa sh и creditCardtoken:

<payment>
    <mode>default</mode>
    <method>creditCard</method>
    <sender>
        <name>Fulano Silva</name>
        <email>fulano.silva@uol.com.br</email>
        <phone>
            <areaCode>11</areaCode>
            <number>30380000</number>
        </phone>
        <documents>
            <document>
                <type>CPF</type>
                <value>22111944785</value>
            </document>
        </documents>
        <hash>{hash_get_on_step_2.3}</hash>
    </sender>
    <creditCard>
        <token>{creditCard_token_get_on_step_2.6}</token>
    </creditCard>
</payment>

Как я могу передать через эту форму эту информацию: senderHa sh и creditCardtoken?

Полная версия PagSeguro do c находится здесь (доступна только на португальском языке): https://dev.pagseguro.uol.com.br/reference/checkout-transparente

Спасибо!