‫Instrutor: Nesta aula aprenderemos
‫como processar pagamentos com stripe, no
‫front-end sempre que um usuário clica em um botão.
‫E para começar, vamos configurar esse botão para
‫que apareça apenas quando um usuário estiver
‫realmente logado.
‫Então, aqui na página
‫de detalhes do tour, agora temos
‫um usuário conectado e esse botão diz reservar tour agora,
‫mas só deve ser assim
‫quando houver um usuário conectado no
‫momento,
‫caso contrário, ele nos redirecionaria para a página de login.
‫OK?
‫Então, vamos implementar isso no modelo de passeio.
‫E isso está realmente bem aqui, então
‫este é este botão.
‫Tudo bem?
‫Agora, se houver um usuário logado
‫no momento, isso significa que temos acesso à
‫variável de usuário e, portanto, podemos fazer isso com o usuário.
‫E se não houver nenhum usuário, então, então,
‫simplesmente queremos exibir um botão, que nos leva
‫à página de login.
‫E então, faça o login
‫para reservar o tour, e este deve ser
‫um link, então precisamos
‫de um elemento A para âncora.
‫Vamos então especificar a propriedade hf, que novamente nos
‫apontará para a página de login,
‫certo?
‫Agora também precisamos adicionar um ID, um tour
‫do livro para que possamos selecioná-lo em nosso JavaScript, e também algo
‫muito importante, é
‫que devemos colocar o ID do tour
‫atual bem aqui neste elemento, certo?
‫Agora, por que isso é tão importante?
‫Bem, lembre-se de como o endpoint da API que acabamos de criar.
‫Então, este aqui precisa do ID do passeio
‫e, portanto, esse ID do passeio precisa vir de algum lugar, basicamente,
‫e agora não temos essa informação em
‫nenhum lugar desta página, então
‫vamos colocá-la aqui neste elemento, que então ou
‫o arquivo JavaScript pode pegá-lo daqui e enviá-lo
‫junto com a
‫solicitação para a rota de sessão de checkout, certo?
‫Assim como fizemos aqui com um mapa,
‫vamos usar um atributo de dados, e
‫isso é data-,
‫e basicamente qualquer nome de variável que
‫desejamos definir.
‫E então esse é o ID da turnê neste caso.
‫Então faça um tour. id, certo?
‫Então, doe para
‫o cofre, e vamos tentar fazer isso agora.
‫Portanto, recarregue a página e, em
‫primeiro lugar, vamos
‫inspecioná-la para ver se a ideia realmente
‫existe e, de fato, vamos lá.
‫E agora, se sairmos.
‫Então vamos ver o que temos e,
‫de fato, agora diz, faça login
‫para reservar o passeio.
‫Ótimo, e vamos fazer isso na verdade.
‫Agora está bem?
‫E agora, a seguir, vamos criar um script
‫no qual faremos a solicitação
‫e processaremos o pagamento no front end.
‫E assim como antes, isso será em público, e
‫depois em JavaScript.
‫Então, mais um script aqui.
‫E vou chamá-lo de stripe. js.
‫E agora aqui precisamos
‫acessar a biblioteca stripe novamente, mas aquele
‫pacote que acabamos de instalar antes,
‫então lembre-se do pacote MPM stripe que usamos aqui.
‫Portanto, este só funciona para o back-end, e
‫o que precisamos fazer no
‫front-end é realmente incluir um script no HTML e, uma vez que
‫só precisamos desse script aqui na página de passeio, faremos
‫exatamente como fazemos fez com o script da caixa do mapa.
‫Então, esse aqui,
‫vamos colocá-lo aqui neste bloco de cabeça,
‫certo?
‫Agora, de qual script realmente precisamos?
‫Bem, isso nós podemos simplesmente pegar a partir da documentação
‫que já vimos antes, e
‫espero que você não tenha fechado essa, certo?
‫E, novamente, este aqui explica como usamos
‫o produto de checkout no cliente
‫e no servidor.
‫Aqui, vemos que temos duas etapas,
‫primeiro criando a sessão de checkout no servidor e,
‫portanto, é muito
‫semelhante ao que fizemos antes no último
‫vídeo e, portanto, agora precisamos adicioná-la também ao nosso front end.
‫E então esse script que precisamos é esse, certo?
‫Então, vamos copiar isso e voltar.
‫E agora precisamos nos adaptar um pouco.
‫Agora está certo?
‫Então, isso foi uma exposição de um objeto stripe para o escopo
‫global, e agora neste arquivo podemos usar isso.
‫Então
‫dizemos, const stripe =,
‫e esse é o objeto
‫que obtemos do script que acabamos de
‫incluir e, então, precisamos de nossa chave pública, certo?
‫Já usamos nossa chave secreta no backend,
‫agora é hora de usar nossa chave pública.
‫Então, vamos voltar ao painel e, na
‫verdade, se você estiver na documentação, ele
‫já aparecerá aqui para você, então esse
‫é um recurso muito
‫bom das documentações de stripe.
‫Então, sempre que
‫você estiver logado, essa chave que
‫você tem aqui é na verdade sua chave pública.
‫Mas se você não estiver nessa
‫página, é claro que também pode obter sua
‫chave de API acessando a página inicial
‫ou a página de desenvolvedores,
‫vamos tentar essa aqui.
‫Então, aqui nas chaves de
‫API, você tem sua chave de teste pública bem aqui.
‫Então pegue isso e,
‫em seguida, vamos voltar e passá-lo aqui.
‫E, assim como
‫antes, quero desabilitar o eslint rapidamente aqui.
‫OK?
‫E agora vamos finalmente criar uma função, que
‫chamarei de tour do livro.
‫OK?
‫E então esta função terá um tour ID.
‫E então o ID do tour é o que virá bem
‫aqui a partir desta interface do usuário.
‫Então, a partir daqui, ok?
‫Assim como antes,
‫vamos obter esse do índice. js onde
‫também chamaremos esse livro de Tour,
‫ok?
‫Muito parecido com o que fizemos antes.
‫De qualquer forma, vamos agora mais uma vez especificar os
‫passos que vamos seguir aqui.
‫Portanto, a primeira etapa é realmente
‫obter a sessão
‫do servidor, e é aí que entra agora essa rota, certo?
‫Portanto, este é o ponto em que vamos usar
‫este endpoint para realmente colocar nossa sessão de checkout
‫no lado do cliente.
‫OK?
‫Então dê uma olhada na sessão.
‫Do ponto de extremidade ou da API, isso realmente não importa.
‫Feito isso como
‫uma segunda etapa, usaremos
‫nosso objeto stripe para criar basicamente automaticamente o formulário de pagamento,
‫+ processar ou, digamos, + cobrar o
‫cartão de crédito para nós, certo?
‫E é
‫isso, apenas duas etapas simples
‫e você verá que elas são realmente muito simples.
‫Portanto, vamos armazenar a sessão em uma variável chamada sessão.
‫E então vamos aguardar uma requisição HTTP, que
‫mais uma vez faremos com axios.
‫Tudo bem?
‫Então eu preciso pegar isso aqui.
‫Portanto, importe axios e, mais
‫uma vez, estou usando a sintaxe do módulo ES6.
‫Lembre-se
‫disso, de axios.
‫Assim como fizemos, por exemplo, no login ou
‫nas configurações de atualização, certo?
‫Agora também precisamos marcar esta função aqui como assíncrona.
‫OK?
‫E então, no
‫axios, podemos simplesmente passar a URL, quando
‫tudo o que queremos fazer é uma simples solicitação GET.
‫OK?
‫Até este
‫ponto, sempre especificamos o método, a
‫URL e os dados, mas agora
‫estamos apenas fazendo uma solicitação GET, e
‫isso é muito mais simples.
‫Vamos pegar o URL
‫aqui, para não perdermos mais tempo.
‫Então aqui está api / v1 / bookings.
‫Em seguida, verifique a sessão.
‫E então a identificação do tour.
‫Então é esse aqui,
‫que vai entrar em disfunção,
‫certo?
‫E vamos realmente dar uma
‫olhada neste objeto de sessão em nosso
‫console, apenas para ver se tudo
‫funciona, ok?
‫Então, agora em nosso índice. js vamos basicamente
‫conectar o botão verde com a disfunção que acabamos de
‫criar dentro do stripe. js.
‫Então importe.
‫Reserve o tour da faixa.
‫Então, como sempre, vamos selecionar nosso elemento na página da web.
‫Portanto, o botão de livro é = para documentar. pegue o elemento por ID, e
‫o ID, lembre-se, tour do
‫livro, eu acredito.
‫Então, sim, esse
‫é o ID que acabamos de adicionar antes do ID do livro.
‫E agora podemos adicionar esse manipulador de eventos a ele.
‫Portanto, se houver um botão de livro,
‫então bookBtn. addeventlistener, esperando
‫por um clique, então precisamos do
‫evento também, e agora precisamos obter o
‫ID do tour a partir desse botão, então isso é
‫tourid =, e agora quando eu
‫selecionar aqui que é e. alvo, e
‫talvez você esteja familiarizado
‫com isso, então, evento. target é basicamente o elemento que foi
‫clicado, então aquele que acionou este listener de evento
‫aqui a ser disparado, certo?
‫E então esse será, naturalmente, este botão.
‫Então, temos o ID do
‫tour, e
‫em JavaScript, que será
‫chamado de tour, então, deixe-me escrever.
‫Assim, o ID do
‫tour, sempre que
‫houver um -, ele será convertido
‫automaticamente para esta notação CamelCase.
‫OK?
‫Então e. alvo. conjunto de dados. tourid.
‫Mas agora, como este nome é exatamente igual a este, podemos
‫simplesmente usar a estruturação nele.
‫Então, mais uma vez, usando este belo truque.
‫E então chamamos de tour de livro com esse ID de tour.
‫E outra coisa legal que podemos
‫fazer aqui, é mudar o texto do botão
‫para algo como processamento, e então vamos fazer
‫de novo e. alvo.
‫Novamente o elemento que foi clicado, esse
‫é o botão. textcontent que
‫usamos antes de ouvir, então,
‫para alterar o texto
‫em um elemento, vamos mudar isso para processamento,
‫ok?
‫E
‫com isso acho que temos tudo conectado corretamente.
‫Então, clicamos nesse botão,
‫alteramos o texto nesse botão, obtemos o ID
‫do tour a partir do atributo
‫de dados que está no botão
‫e chamamos o tour do livro com esse ID,
‫certo?
‫E então esse ID será passado para esta
‫URL, que por sua vez deve retornar uma sessão de
‫checkout, certo?
‫E então vamos dar uma
‫olhada nisso, assim.
‫Agora, neste ponto, não criaremos
‫o formulário de checkout ainda, então
‫vamos deixá-lo para a última etapa deste vídeo.
‫Mas, por enquanto, quero dar uma olhada
‫nisso, vamos apenas
‫ver se parcel ainda está em execução
‫aqui em segundo plano, agrupando todos
‫os nossos scripts juntos,
‫e parece que está, então não vamos realmente testar isso.
‫Então, estamos logados,
‫vamos tentar estacionar o campista.
‫Aqui embaixo, clique neste botão.
‫E parece que não recebemos nenhum erro, então
‫isso é bom, agora vamos
‫dar uma olhada em nosso
‫console, e temos um objeto, e
‫isso é o resultado dessa chamada de axios,
‫então axios sempre cria um objeto como este
‫, onde há um objeto chamado dados, que é
‫a resposta real.
‫E aqui você vê que realmente temos nossa sessão.
‫Então você vê que temos o
‫e-mail do cliente, temos o ID
‫do passeio atual, agora vamos ver se temos, (resmunga) Então,
‫aqui
‫temos alguns dados sobre o passeio.
‫E agora tudo parece correto aqui.
‫Tudo bem?
‫Então, vamos encerrar isso e,
‫agora, como última etapa, vamos
‫criar basicamente o formulário de checkout e debitar no
‫cartão de crédito.
‫Tudo bem?
‫E, na verdade, vamos envolver tudo isso
‫aqui em um bloco try catch.
‫Porque é claro que temos algumas chamadas assíncronas aqui, e
‫ambas têm mais uma por
‫segundo, portanto, é uma boa prática.
‫Para ter um bloco try catch.
‫Tudo bem?
‫Mas não vamos perder muito tempo com esses erros.
‫Mas ainda vou mostrar na verdade um alerta
‫caso haja um erro,
‫então por exemplo com essa chamada de API,
‫ok?
‫Para que o usuário basicamente possa
‫ver que algo deu errado.
‫Então, vamos simplesmente pegar essa importação de alertas.
‫Tudo bem?
‫E diga Mostrar alerta, especificando que
‫é um erro, e
‫apenas o próprio erro como a mensagem basicamente.
‫Tudo bem?
‫De qualquer forma, para podermos fazer essa última etapa, na
‫verdade é muito, muito simples, tudo o
‫que temos que fazer é aguardar.
‫listra. redirectTocheck para
‫fora, deixe-me ver se
‫entendi errado e deixe-me
‫ver se entendi certo, então redirecione para verificar.
‫Tudo bem?
‫E então opções, mas apenas uma
‫opção, que é o ID da sessão, e
‫isso virá da sessão, e lembre-se de como
‫a sessão estava dentro dos dados, então
‫havia um objeto de dados criado lá por axios,
‫lembre-se e para que é então toda resposta em si.
‫E aí temos uma sessão. identificação.
‫E é isso,
‫ok?
‫E agora vem a maior parte
‫de tudo, que é realmente verificar se isso funciona.
‫Ainda estamos logados, vamos carregar
‫isso mais uma vez.
‫Clique em um botão e aguarde.
‫E de fato chegamos à nossa página de checkout, e
‫também temos essa bela imagem aqui, pegamos
‫todo o logotipo da Nature aqui, pegamos aqui
‫todos os ícones, então todas
‫as coisas que especificamos antes, temos o
‫preço que também especificamos em nosso
‫sessão de checkout,
‫e realmente todos os outros detalhes.
‫Portanto, o nome, o resumo e,
‫claro, a imagem.
‫Isso é realmente incrível, certo?
‫Então aqui está outra grande coisa que mencionei antes, é
‫que o endereço
‫de e-mail já está pré-preenchido automaticamente, então
‫esse é outro recurso muito bom.
‫E agora aqui tudo o
‫que precisamos fazer é colocar essas informações de cartão
‫de crédito, e então fazemos a distribuição quando estamos testando o
‫número do cartão de crédito é apenas quatro dois quatro dois
‫quatro dois quatro dois e assim por diante até terminarmos , OK?
‫Então aqui qualquer mês e qualquer ano funcionam,
‫então vamos colocar dois dois dois.
‫Então, alguma coisa no futuro, certo?
‫Então, se você está assistindo a este curso depois de fevereiro
‫de 2022, essa data não vai
‫funcionar, então coloque algo depois,
‫ok?
‫Até que qualquer número funcione bem,
‫aqui qualquer nome também funciona,
‫vamos colocar Laura, o país
‫claro também não importa muito, as pessoas preenchem automaticamente
‫com base na localização do seu IP, então estou
‫em Portugal,
‫e então é isso que eu ganho.
‫E agora você vê este botão verde legal aqui,
‫e ele tem um efeito legal,
‫e agora quando
‫clicamos nele, ele está processando e pronto.
‫Ótimo, então este é realmente o URL de sucesso que
‫também especificamos em nossa sessão de checkout, certo?
‫Assim, definimos que, em
‫caso de sucesso,
‫voltamos para este URL inicial.
‫E vamos mudar isso um
‫pouco mais tarde, mas por enquanto isso é realmente
‫o que queríamos e funcionou perfeitamente bem.
‫Bem, pelo menos espero que
‫sim, então vamos dar uma olhada em todos os pagamentos agora.
‫E, de fato,
‫este é o que acabamos de fazer.
‫Portanto, recebemos com sucesso este pagamento em
‫nossa conta agora.
‫Assim, você vê o endereço de e-mail, o
‫nome e, na verdade, o Camper Tour do parque que acabamos de comprar.
‫Ótimo, isso é realmente incrível.
‫Aqui você pode ver as taxas que o stripe cobra, então
‫é claro que eles também precisam ganhar dinheiro e,
‫portanto, eles recebem um corte,
‫que eu acho que é como 2. 9% ou algo parecido, mas é claro
‫todas essas coisas que você pode verificar no
‫site deles.
‫Então você também tem a forma de pagamento aqui, então
‫os dados que acabamos
‫de inserir, e você obtém alguns dados interessantes
‫sobre a sessão, e provavelmente ela também deve aparecer aqui nos seus clientes.
‫E sim, de fato aqui está ela, E
‫então sim, acho
‫que está fazendo muito sucesso agora.
‫Ah, e outra coisa que esqueci de
‫mencionar é que seus usuários também
‫receberão automaticamente um e-mail.
‫Portanto, acho que esse deve ser o padrão aqui em
‫recibos de e-mail, então vá
‫para suas configurações de recibos de
‫e-mail e aqui você terá clientes de e-mail
‫sobre pagamentos bem-sucedidos.
‫E isso também é um
‫recurso muito bom, o que significa que não temos que enviar
‫e-mails manualmente sempre que um usuário comprou um tour com sucesso, certo?
‫Então, mais uma coisa que o stripe tira de nós,
‫Fantástico, então vamos agora apenas tomar um rápido minuto para recapitular todo
‫o processo que acabamos de passar.
‫Então, começamos criando esta sessão de checkout, que
‫precisa como entrada o ID do tour,
‫para que possamos armazenar um monte de detalhes sobre o
‫tour naquela sessão.
‫Então, coisas sobre o
‫nome do passeio, o resumo e as imagens de preços.
‫Então, todas essas coisas que queremos mostrar
‫na página de
‫checkout, mas também em nosso painel.
‫Em seguida, também incluímos o e-mail para que o
‫usuário não precise preenchê-lo no check-out e,
‫em seguida, vários outros dados.
‫Portanto, lembre-se desse ID de referência do cliente,
‫que fará muito mais
‫sentido quando realmente começarmos a usá-lo.
‫Então, criamos essa sessão sempre
‫que alguém acessa essa rota de sessão de check-out, certo?
‫E isso é exatamente o que fazemos em nossa extremidade dianteira,
‫bem aqui na faixa. js.
‫Então, obtemos nossa sessão aqui
‫e, a partir daí, criamos um check-out e
‫cobramos o cartão de crédito
‫usando tarja. redirectTocheckout, e
‫o objeto stripe
‫aqui está simplesmente usando a biblioteca
‫stripe com nossa chave pública, certo?
‫Agora, de onde vem esse tour ID?
‫Bem, está armazenado aqui mesmo no botão onde o
‫usuário clica para reservar um novo tour.
‫Esse ID é então lido aqui mesmo no índice. js, sempre que
‫alguém aperta o botão de reserva, certo?
‫Então, armazenamos isso no ID
‫do tour e passamos para o
‫tour do livro, que novamente é esta função aqui,
‫que se encarrega de realmente processar os pagamentos
‫no front end.
‫E então o resultado de
‫tudo isso é o
‫que acabamos de ver onde o usuário realmente
‫recebe uma cobrança no cartão de
‫crédito, e compra o tour, tão perfeito.
‫O que está faltando
‫aqui é que, na verdade, sempre que houver uma
‫nova reserva, queremos criar um novo documento de reserva em nosso banco de dados.
‫Assim como discutimos há muito tempo, quando
‫falamos sobre todos os
‫modelos de dados neste aplicativo, certo?
‫E então, para esse fim,
‫vamos criar o modelo de reservas
‫logo no próximo
‫vídeo, ordená-lo
‫depois disso, podemos criar novos
‫passeios sempre que houver uma compra bem-sucedida.