1.1. Implementação Javascript

Inclua o javascript do PagSeguro:

<script type="text/javascript" src="/pagseguro/javascript"></script>

OU

<script type="text/javascript" src="{{ PagSeguro::getUrl()['javascript'] }}"></script>

Verifique a documentação do PagSeguro para instruções de como realizar a implementação javascript.

<script>
    PagSeguroDirectPayment.setSessionId('{{ PagSeguro::startSession() }}'); //PagSeguroRecorrente tem um método identico, use o que preferir neste caso, não tem diferença.
</script>

Outra opção de conseguir este Hash é através da rota:

GET /pagseguro/session

Com a instância setada é necessário obter o senderHash:

$('#senderHash').val(PagSeguroDirectPayment.getSenderHash()); 

Este hash é utilizado na hora de realizar o checkout no PHP.

Atenção: Este método possui algumas dependências e, por isso, recomendamos que o getSenderHash não seja executado no onLoad da página. Você pode executá-lo, por exemplo quando o cliente clicar no botão de conclusão de pagamento.