‫Narrador: Nesta última parte da seção,
‫agora vamos aceitar pagamentos com
‫cartão de crédito em nosso aplicativo
‫usando Stripe para permitir que nossos usuários comprem passeios.
‫E então, vamos abrir uma nova guia aqui
‫e ali na faixa aberta. com.
‫Portanto, o Stripe é a melhor, mais popular e
‫também a mais fácil plataforma de
‫software para integrar pagamentos a qualquer website.
‫E muito mais sobre como realmente funciona um pouco
‫mais tarde, mas por enquanto vamos começar criando nossa conta gratuita.
‫Portanto, clique aqui na conta
‫gratuita e abra sua própria conta gratuita.
‫E depois de fazer login
‫com êxito, você verá um painel semelhante a este.
‫Portanto, quando você abre uma nova
‫conta, inicialmente sempre estará no modo de teste.
‫Então é isso que você pode ver aqui com os dados de teste.
‫Agora, assim que você realmente
‫quiser começar a aceitar pagamentos reais envolvendo
‫dinheiro real de clientes reais, você terá que ativar
‫sua conta Stripe.
‫E, para isso, você terá que fornecer
‫ao Stripe um monte de dados sobre o seu negócio.
‫Mas é claro
‫que neste projeto não faremos isso, então sempre trabalharemos
‫apenas neste tipo de modo de desenvolvimento de teste, certo?
‫Caso contrário, basta clicar aqui
‫para iniciar ou ativar sua conta aqui.
‫Agora, este painel é realmente fácil e super intuitivo
‫de usar, na minha opinião.
‫Portanto, aqui você pode ver seus pagamentos, o que novamente
‫é muito fácil, e
‫lembre-se de que são todos dados de teste.
‫Portanto, todos esses valores aqui são,
‫é claro, apenas valores falsos.
‫Mas de qualquer maneira, você pode ver o seu
‫cliente aqui, você pode ver o valor.
‫E ao abri-los, você obtém ainda mais informações, como
‫a forma de pagamento aqui, o número do cartão de crédito.
‫E, a propósito, nunca obtemos acesso ao número
‫real do cartão de crédito do cliente.
‫Portanto, veremos sempre apenas esses quatro últimos dígitos,
‫mas nunca o número real do cartão de crédito, certo?
‫Em seguida, você também terá uma
‫visão geral sobre o que foi realmente comprado.
‫Então, por exemplo, The Snow Adventurer Tour.
‫E tudo isso aqui
‫foi, claro, de quando eu estava
‫construindo o aplicativo Natours pela primeira vez, certo?
‫Portanto, todas essas são apenas compras de teste.
‫Então, também podemos ver nosso saldo total,
‫basicamente todo o dinheiro que recebemos.
‫E, novamente, tudo isso são apenas dados de teste.
‫Então, temos nossos clientes com uma bela lista de todos eles.
‫E, sim, tudo isso funciona muito bem.
‫Antes de começarmos,
‫precisamos definir algumas configurações sobre
‫nossa conta.
‫Portanto, em sua nova conta, você deverá
‫ver algo como "Conta sem nome" ou algo parecido aqui.
‫E então, você também deve ter, como um ícone de caneta ou
‫algo onde você possa criar um nome para a conta.
‫E então, por favor, chame isso de "Natours" ou outra coisa.
‫E se você tiver mais empresas,
‫poderá adicionar uma conta para cada uma dessas empresas, certo?
‫Ou se você não tiver o ícone de lápis aqui,
‫também podemos ir para as
‫configurações e, em seguida, informações da conta.
‫E aqui é onde você deve
‫colocar o nome desse tipo de negócio.
‫Também podemos definir algumas outras configurações, então vamos
‫definir a marca aqui, o que fará
‫com que as páginas do Stripe Checkout
‫correspondam à nossa marca, basicamente.
‫Então, vamos adicionar nossas imagens.
‫Então, público, imagem e, em seguida, para o ícone, vamos
‫usar este.
‫E também podemos fazer upload de
‫um logotipo, e para isso, vamos usar este.
‫Ah, e agora precisamos de nossa senha para continuar.
‫E agora também vamos mudar nossa cor aqui.
‫Abra o arquivo CSS em público e encontre
‫o nosso verde típico, que é
‫este aqui.
‫Então isso parece um pouco melhor.
‫Agora vamos salvá-lo
‫aqui e, com isso, estamos prontos para prosseguir.
‫A seguir, vamos dar uma olhada em nossas chaves de API.
‫Então, clique aqui nas chaves de API e se
‫o site parecer um pouco
‫diferente no momento em que você estiver
‫assistindo a este vídeo, talvez as chaves estejam aqui nos desenvolvedores.
‫Então aqui você também tem algo chamado chaves de API, ok?
‫De qualquer forma, existe uma chave publicável e uma chave secreta.
‫E então esta é basicamente uma
‫chave pública que podemos usar no front-end,
‫e uma chave secreta é aquela que é necessária no back-end.
‫E mais sobre
‫isso assim que começarmos a implementá-lo.
‫E, por fim, também
‫gostaria de dar uma olhada rápida junto com você na documentação.
‫E isso está aqui em cima,
‫e na verdade o
‫Stripe é conhecido por sua excelente documentação.
‫É realmente fácil encontrar o que você
‫procura nesta documentação.
‫Mas é claro que, quando você está
‫apenas começando, é muito difícil saber o
‫que você está procurando, certo?
‫E é por isso
‫que estamos implementando esse recurso de pagamento juntos aqui, certo?
‫Então, vamos usar os recursos de pagamento do Stripe
‫e eles têm algumas opções diferentes.
‫Agora, na web, podemos usar Stripe
‫Checkout, que basicamente usa uma página de Checkout pré-formativa.
‫E então este é o que
‫vamos usar, ou você também pode usar
‫elementos Stripe
‫quando realmente quiser construir sua própria experiência de Checkout, ok?
‫Mas usaremos apenas este Checkout, que é
‫realmente novo e,
‫portanto, à prova de futuro neste ponto.
‫Essas são as duas opções para a
‫web, mas você também pode usar o Stripe no iOS, Android e
‫em qualquer outra plataforma.
‫Então, no Checkout, podemos realmente usá-lo
‫apenas no cliente ou junto com o servidor, ok?
‫Então aqui embaixo há alguma comparação.
‫E quando o usamos apenas no lado do cliente,
‫não precisamos nem mesmo de um servidor.
‫Mas essa maneira de usar o Stripe é apenas,
‫realmente, para lojas muito, muito pequenas,
‫onde você só tem um punhado de produtos
‫que nunca mudam seu preço
‫e onde você realmente
‫tem que adicionar todos esses produtos manualmente aos seus painéis do Stripe.
‫E então queremos algo um pouco
‫mais complexo e para isso usamos a integração de servidores, ok?
‫E então, é claro que
‫ainda precisamos fazer algo no lado do
‫cliente, mas a maior parte do código estará na verdade no lado do servidor.
‫Ok, então você vê que realmente há muito
‫o que fazer com o Stripe e podemos até fazer muito mais.
‫Então, poderíamos ter faturamento onde temos assinaturas, onde temos faturas
‫e todas essas coisas boas.
‫Então, realmente, você poderia
‫construir um grande negócio em cima do Stripe e aceitar
‫assinaturas, salvar clientes em bancos de
‫dados e tudo isso integrado ao Stripe.
‫Mas, novamente, o que vamos
‫fazer aqui é simplesmente usar o Checkout,
‫mas a versão mais completa dele
‫usando o servidor Checkout.
‫Tudo bem, mas agora, antes de
‫realmente começarmos a integrar o produto Stripe
‫Checkout em nosso
‫aplicativo, eu só queria fazer o layout de todo
‫o fluxo de trabalho que vamos implementar nos próximos vídeos.
‫Então, tudo começa no
‫back-end, onde vamos implementar uma rota
‫para criar uma chamada sessão Stripe Checkout.
‫E esta Sessão irá conter um monte
‫de dados sobre o objeto que pode ser comprado.
‫E em nosso exemplo, esse é o tour.
‫Portanto, a Sessão conterá o preço do passeio,
‫o nome do passeio, uma imagem do produto e também alguns outros detalhes
‫como o e-mail do cliente.
‫Então, veremos isso no próximo vídeo.
‫Então, no front-end, vamos criar uma função para
‫solicitar a Sessão de Check-out do servidor assim que
‫o usuário clicar no botão comprar.
‫Assim, quando atingirmos o
‫ponto final que criamos no
‫back-end, isso criará uma Sessão e a enviará de
‫volta ao cliente.
‫Então, com base nessa sessão,
‫o Stripe criará automaticamente uma página de checkout para nós,
‫onde o usuário pode inserir todos os detalhes,
‫como número do cartão de crédito, data de validade e tudo isso.
‫Então, novamente, usando a
‫sessão, finalmente cobraremos o cartão de crédito.
‫E, para isso, precisaremos da chave pública,
‫aquela que acabamos de ver.
‫Portanto, a chave secreta de que precisaremos no
‫servidor, como você verá lá
‫na primeira etapa, e a chave pública será usada no front-end.
‫E o que é realmente importante
‫notar aqui é
‫que é realmente Stripe, que
‫junto com The Session, cobrará o cartão de
‫crédito e, portanto, os detalhes do cartão de crédito nunca
‫chegam ao nosso servidor, o que torna nossas vidas como
‫desenvolvedores muito mais fáceis porque então não
‫temos que lidar com todo o material de
‫segurança relacionado ao gerenciamento e armazenamento de cartões de crédito, certo?
‫Então, o Stripe tira tudo
‫isso de nós, basicamente usamos sua API assim.
‫De qualquer forma, uma vez que o cartão de crédito tenha sido
‫cobrado com sucesso, podemos usar algo chamado
‫Stripe Webhooks em nosso back-end, a fim de criar novas reservas.
‫Agora, esta parte do fluxo
‫de trabalho só funcionará para sites implantados, ou
‫seja, sites que já estão sendo executados em um servidor.
‫E essa parte do
‫fluxo de trabalho, só seremos capazes
‫de implementar até o final da próxima seção, ok?
‫Mas, por enquanto,
‫vamos encontrar uma solução temporária para
‫isso, que não é muito
‫segura, mas vai funcionar muito bem por enquanto, ok?
‫Portanto, mantenha este diagrama em mente e também o conceito
‫de que realmente usamos The Session para cobrar um cartão
‫de crédito e não fazemos isso diretamente.
‫Então, até o próximo vídeo.