1 00:00:01,130 --> 00:00:03,770 ‫Narrador: Nesta última parte da seção, 2 00:00:03,770 --> 00:00:06,160 ‫agora vamos aceitar pagamentos com 3 00:00:06,160 --> 00:00:08,770 ‫cartão de crédito em nosso aplicativo 4 00:00:08,770 --> 00:00:12,233 ‫usando Stripe para permitir que nossos usuários comprem passeios. 5 00:00:14,080 --> 00:00:16,320 ‫E então, vamos abrir uma nova guia aqui 6 00:00:18,160 --> 00:00:21,730 ‫e ali na faixa aberta. com. 7 00:00:21,730 --> 00:00:25,080 ‫Portanto, o Stripe é a melhor, mais popular e 8 00:00:25,080 --> 00:00:27,910 ‫também a mais fácil plataforma de 9 00:00:27,910 --> 00:00:30,810 ‫software para integrar pagamentos a qualquer website. 10 00:00:30,810 --> 00:00:34,210 ‫E muito mais sobre como realmente funciona um pouco 11 00:00:34,210 --> 00:00:38,040 ‫mais tarde, mas por enquanto vamos começar criando nossa conta gratuita. 12 00:00:38,040 --> 00:00:40,540 ‫Portanto, clique aqui na conta 13 00:00:40,540 --> 00:00:43,303 ‫gratuita e abra sua própria conta gratuita. 14 00:00:44,510 --> 00:00:46,810 ‫E depois de fazer login 15 00:00:46,810 --> 00:00:49,990 ‫com êxito, você verá um painel semelhante a este. 16 00:00:49,990 --> 00:00:52,210 ‫Portanto, quando você abre uma nova 17 00:00:52,210 --> 00:00:55,150 ‫conta, inicialmente sempre estará no modo de teste. 18 00:00:55,150 --> 00:00:59,250 ‫Então é isso que você pode ver aqui com os dados de teste. 19 00:00:59,250 --> 00:01:01,380 ‫Agora, assim que você realmente 20 00:01:01,380 --> 00:01:04,250 ‫quiser começar a aceitar pagamentos reais envolvendo 21 00:01:04,250 --> 00:01:07,530 ‫dinheiro real de clientes reais, você terá que ativar 22 00:01:07,530 --> 00:01:08,960 ‫sua conta Stripe. 23 00:01:08,960 --> 00:01:11,350 ‫E, para isso, você terá que fornecer 24 00:01:11,350 --> 00:01:14,220 ‫ao Stripe um monte de dados sobre o seu negócio. 25 00:01:14,220 --> 00:01:15,580 ‫Mas é claro 26 00:01:15,580 --> 00:01:18,360 ‫que neste projeto não faremos isso, então sempre trabalharemos 27 00:01:18,360 --> 00:01:21,680 ‫apenas neste tipo de modo de desenvolvimento de teste, certo? 28 00:01:21,680 --> 00:01:24,010 ‫Caso contrário, basta clicar aqui 29 00:01:24,010 --> 00:01:26,940 ‫para iniciar ou ativar sua conta aqui. 30 00:01:26,940 --> 00:01:29,980 ‫Agora, este painel é realmente fácil e super intuitivo 31 00:01:29,980 --> 00:01:31,890 ‫de usar, na minha opinião. 32 00:01:31,890 --> 00:01:35,660 ‫Portanto, aqui você pode ver seus pagamentos, o que novamente 33 00:01:35,660 --> 00:01:37,360 ‫é muito fácil, e 34 00:01:37,360 --> 00:01:40,280 ‫lembre-se de que são todos dados de teste. 35 00:01:40,280 --> 00:01:42,270 ‫Portanto, todos esses valores aqui são, 36 00:01:42,270 --> 00:01:44,110 ‫é claro, apenas valores falsos. 37 00:01:44,110 --> 00:01:46,460 ‫Mas de qualquer maneira, você pode ver o seu 38 00:01:46,460 --> 00:01:48,463 ‫cliente aqui, você pode ver o valor. 39 00:01:49,490 --> 00:01:52,440 ‫E ao abri-los, você obtém ainda mais informações, como 40 00:01:52,440 --> 00:01:55,670 ‫a forma de pagamento aqui, o número do cartão de crédito. 41 00:01:55,670 --> 00:01:58,640 ‫E, a propósito, nunca obtemos acesso ao número 42 00:01:58,640 --> 00:02:01,420 ‫real do cartão de crédito do cliente. 43 00:02:01,420 --> 00:02:04,230 ‫Portanto, veremos sempre apenas esses quatro últimos dígitos, 44 00:02:04,230 --> 00:02:07,630 ‫mas nunca o número real do cartão de crédito, certo? 45 00:02:07,630 --> 00:02:09,620 ‫Em seguida, você também terá uma 46 00:02:09,620 --> 00:02:12,110 ‫visão geral sobre o que foi realmente comprado. 47 00:02:12,110 --> 00:02:14,630 ‫Então, por exemplo, The Snow Adventurer Tour. 48 00:02:14,630 --> 00:02:16,360 ‫E tudo isso aqui 49 00:02:16,360 --> 00:02:18,410 ‫foi, claro, de quando eu estava 50 00:02:18,410 --> 00:02:21,133 ‫construindo o aplicativo Natours pela primeira vez, certo? 51 00:02:22,000 --> 00:02:24,570 ‫Portanto, todas essas são apenas compras de teste. 52 00:02:24,570 --> 00:02:27,420 ‫Então, também podemos ver nosso saldo total, 53 00:02:27,420 --> 00:02:30,150 ‫basicamente todo o dinheiro que recebemos. 54 00:02:30,150 --> 00:02:33,610 ‫E, novamente, tudo isso são apenas dados de teste. 55 00:02:33,610 --> 00:02:37,060 ‫Então, temos nossos clientes com uma bela lista de todos eles. 56 00:02:37,060 --> 00:02:39,653 ‫E, sim, tudo isso funciona muito bem. 57 00:02:40,650 --> 00:02:42,500 ‫Antes de começarmos, 58 00:02:42,500 --> 00:02:44,830 ‫precisamos definir algumas configurações sobre 59 00:02:44,830 --> 00:02:46,400 ‫nossa conta. 60 00:02:46,400 --> 00:02:48,867 ‫Portanto, em sua nova conta, você deverá 61 00:02:48,867 --> 00:02:52,120 ‫ver algo como "Conta sem nome" ou algo parecido aqui. 62 00:02:52,120 --> 00:02:55,740 ‫E então, você também deve ter, como um ícone de caneta ou 63 00:02:55,740 --> 00:02:59,010 ‫algo onde você possa criar um nome para a conta. 64 00:02:59,010 --> 00:03:02,160 ‫E então, por favor, chame isso de "Natours" ou outra coisa. 65 00:03:02,160 --> 00:03:04,700 ‫E se você tiver mais empresas, 66 00:03:04,700 --> 00:03:08,690 ‫poderá adicionar uma conta para cada uma dessas empresas, certo? 67 00:03:08,690 --> 00:03:11,510 ‫Ou se você não tiver o ícone de lápis aqui, 68 00:03:11,510 --> 00:03:13,220 ‫também podemos ir para as 69 00:03:13,220 --> 00:03:15,570 ‫configurações e, em seguida, informações da conta. 70 00:03:15,570 --> 00:03:18,030 ‫E aqui é onde você deve 71 00:03:18,030 --> 00:03:20,610 ‫colocar o nome desse tipo de negócio. 72 00:03:20,610 --> 00:03:23,150 ‫Também podemos definir algumas outras configurações, então vamos 73 00:03:23,150 --> 00:03:25,350 ‫definir a marca aqui, o que fará 74 00:03:25,350 --> 00:03:27,390 ‫com que as páginas do Stripe Checkout 75 00:03:27,390 --> 00:03:29,233 ‫correspondam à nossa marca, basicamente. 76 00:03:30,470 --> 00:03:32,383 ‫Então, vamos adicionar nossas imagens. 77 00:03:35,880 --> 00:03:39,850 ‫Então, público, imagem e, em seguida, para o ícone, vamos 78 00:03:39,850 --> 00:03:41,163 ‫usar este. 79 00:03:43,830 --> 00:03:46,140 ‫E também podemos fazer upload de 80 00:03:46,140 --> 00:03:49,033 ‫um logotipo, e para isso, vamos usar este. 81 00:03:51,310 --> 00:03:53,913 ‫Ah, e agora precisamos de nossa senha para continuar. 82 00:03:56,220 --> 00:03:59,033 ‫E agora também vamos mudar nossa cor aqui. 83 00:04:00,180 --> 00:04:03,640 ‫Abra o arquivo CSS em público e encontre 84 00:04:04,510 --> 00:04:07,150 ‫o nosso verde típico, que é 85 00:04:07,150 --> 00:04:08,663 ‫este aqui. 86 00:04:12,000 --> 00:04:13,623 ‫Então isso parece um pouco melhor. 87 00:04:15,570 --> 00:04:16,950 ‫Agora vamos salvá-lo 88 00:04:19,200 --> 00:04:22,150 ‫aqui e, com isso, estamos prontos para prosseguir. 89 00:04:22,150 --> 00:04:25,130 ‫A seguir, vamos dar uma olhada em nossas chaves de API. 90 00:04:25,130 --> 00:04:27,660 ‫Então, clique aqui nas chaves de API e se 91 00:04:27,660 --> 00:04:29,550 ‫o site parecer um pouco 92 00:04:29,550 --> 00:04:31,690 ‫diferente no momento em que você estiver 93 00:04:31,690 --> 00:04:35,113 ‫assistindo a este vídeo, talvez as chaves estejam aqui nos desenvolvedores. 94 00:04:36,180 --> 00:04:41,180 ‫Então aqui você também tem algo chamado chaves de API, ok? 95 00:04:41,840 --> 00:04:45,860 ‫De qualquer forma, existe uma chave publicável e uma chave secreta. 96 00:04:45,860 --> 00:04:48,270 ‫E então esta é basicamente uma 97 00:04:48,270 --> 00:04:50,820 ‫chave pública que podemos usar no front-end, 98 00:04:50,820 --> 00:04:54,430 ‫e uma chave secreta é aquela que é necessária no back-end. 99 00:04:54,430 --> 00:04:56,020 ‫E mais sobre 100 00:04:56,020 --> 00:04:58,420 ‫isso assim que começarmos a implementá-lo. 101 00:04:58,420 --> 00:05:00,310 ‫E, por fim, também 102 00:05:00,310 --> 00:05:04,120 ‫gostaria de dar uma olhada rápida junto com você na documentação. 103 00:05:04,120 --> 00:05:05,940 ‫E isso está aqui em cima, 104 00:05:05,940 --> 00:05:07,390 ‫e na verdade o 105 00:05:07,390 --> 00:05:09,470 ‫Stripe é conhecido por sua excelente documentação. 106 00:05:09,470 --> 00:05:11,700 ‫É realmente fácil encontrar o que você 107 00:05:11,700 --> 00:05:13,170 ‫procura nesta documentação. 108 00:05:13,170 --> 00:05:15,470 ‫Mas é claro que, quando você está 109 00:05:15,470 --> 00:05:17,740 ‫apenas começando, é muito difícil saber o 110 00:05:17,740 --> 00:05:19,830 ‫que você está procurando, certo? 111 00:05:19,830 --> 00:05:21,550 ‫E é por isso 112 00:05:21,550 --> 00:05:25,270 ‫que estamos implementando esse recurso de pagamento juntos aqui, certo? 113 00:05:25,270 --> 00:05:28,530 ‫Então, vamos usar os recursos de pagamento do Stripe 114 00:05:28,530 --> 00:05:31,000 ‫e eles têm algumas opções diferentes. 115 00:05:31,000 --> 00:05:33,630 ‫Agora, na web, podemos usar Stripe 116 00:05:33,630 --> 00:05:36,820 ‫Checkout, que basicamente usa uma página de Checkout pré-formativa. 117 00:05:36,820 --> 00:05:39,170 ‫E então este é o que 118 00:05:39,170 --> 00:05:41,800 ‫vamos usar, ou você também pode usar 119 00:05:41,800 --> 00:05:42,633 ‫elementos Stripe 120 00:05:42,633 --> 00:05:46,400 ‫quando realmente quiser construir sua própria experiência de Checkout, ok? 121 00:05:46,400 --> 00:05:48,640 ‫Mas usaremos apenas este Checkout, que é 122 00:05:48,640 --> 00:05:50,110 ‫realmente novo e, 123 00:05:50,110 --> 00:05:52,633 ‫portanto, à prova de futuro neste ponto. 124 00:05:53,990 --> 00:05:56,060 ‫Essas são as duas opções para a 125 00:05:56,060 --> 00:05:59,850 ‫web, mas você também pode usar o Stripe no iOS, Android e 126 00:05:59,850 --> 00:06:01,563 ‫em qualquer outra plataforma. 127 00:06:02,700 --> 00:06:05,840 ‫Então, no Checkout, podemos realmente usá-lo 128 00:06:05,840 --> 00:06:10,223 ‫apenas no cliente ou junto com o servidor, ok? 129 00:06:11,070 --> 00:06:13,593 ‫Então aqui embaixo há alguma comparação. 130 00:06:14,610 --> 00:06:17,600 ‫E quando o usamos apenas no lado do cliente, 131 00:06:17,600 --> 00:06:20,000 ‫não precisamos nem mesmo de um servidor. 132 00:06:20,000 --> 00:06:22,890 ‫Mas essa maneira de usar o Stripe é apenas, 133 00:06:22,890 --> 00:06:25,060 ‫realmente, para lojas muito, muito pequenas, 134 00:06:25,060 --> 00:06:27,600 ‫onde você só tem um punhado de produtos 135 00:06:27,600 --> 00:06:29,420 ‫que nunca mudam seu preço 136 00:06:29,420 --> 00:06:31,040 ‫e onde você realmente 137 00:06:31,040 --> 00:06:34,730 ‫tem que adicionar todos esses produtos manualmente aos seus painéis do Stripe. 138 00:06:34,730 --> 00:06:37,250 ‫E então queremos algo um pouco 139 00:06:37,250 --> 00:06:41,460 ‫mais complexo e para isso usamos a integração de servidores, ok? 140 00:06:41,460 --> 00:06:43,160 ‫E então, é claro que 141 00:06:43,160 --> 00:06:45,010 ‫ainda precisamos fazer algo no lado do 142 00:06:45,010 --> 00:06:48,720 ‫cliente, mas a maior parte do código estará na verdade no lado do servidor. 143 00:06:48,720 --> 00:06:52,220 ‫Ok, então você vê que realmente há muito 144 00:06:52,220 --> 00:06:56,930 ‫o que fazer com o Stripe e podemos até fazer muito mais. 145 00:06:56,930 --> 00:07:01,210 ‫Então, poderíamos ter faturamento onde temos assinaturas, onde temos faturas 146 00:07:01,210 --> 00:07:04,050 ‫e todas essas coisas boas. 147 00:07:04,050 --> 00:07:06,040 ‫Então, realmente, você poderia 148 00:07:06,040 --> 00:07:09,330 ‫construir um grande negócio em cima do Stripe e aceitar 149 00:07:09,330 --> 00:07:11,350 ‫assinaturas, salvar clientes em bancos de 150 00:07:11,350 --> 00:07:13,543 ‫dados e tudo isso integrado ao Stripe. 151 00:07:14,940 --> 00:07:16,850 ‫Mas, novamente, o que vamos 152 00:07:16,850 --> 00:07:19,040 ‫fazer aqui é simplesmente usar o Checkout, 153 00:07:19,040 --> 00:07:21,090 ‫mas a versão mais completa dele 154 00:07:21,090 --> 00:07:22,963 ‫usando o servidor Checkout. 155 00:07:24,640 --> 00:07:27,130 ‫Tudo bem, mas agora, antes de 156 00:07:27,130 --> 00:07:29,690 ‫realmente começarmos a integrar o produto Stripe 157 00:07:29,690 --> 00:07:31,210 ‫Checkout em nosso 158 00:07:31,210 --> 00:07:34,353 ‫aplicativo, eu só queria fazer o layout de todo 159 00:07:34,353 --> 00:07:37,920 ‫o fluxo de trabalho que vamos implementar nos próximos vídeos. 160 00:07:37,920 --> 00:07:40,200 ‫Então, tudo começa no 161 00:07:40,200 --> 00:07:42,850 ‫back-end, onde vamos implementar uma rota 162 00:07:42,850 --> 00:07:45,600 ‫para criar uma chamada sessão Stripe Checkout. 163 00:07:45,600 --> 00:07:48,170 ‫E esta Sessão irá conter um monte 164 00:07:48,170 --> 00:07:50,970 ‫de dados sobre o objeto que pode ser comprado. 165 00:07:50,970 --> 00:07:53,070 ‫E em nosso exemplo, esse é o tour. 166 00:07:53,070 --> 00:07:55,480 ‫Portanto, a Sessão conterá o preço do passeio, 167 00:07:55,480 --> 00:07:59,640 ‫o nome do passeio, uma imagem do produto e também alguns outros detalhes 168 00:07:59,640 --> 00:08:01,450 ‫como o e-mail do cliente. 169 00:08:01,450 --> 00:08:04,530 ‫Então, veremos isso no próximo vídeo. 170 00:08:04,530 --> 00:08:07,370 ‫Então, no front-end, vamos criar uma função para 171 00:08:07,370 --> 00:08:10,580 ‫solicitar a Sessão de Check-out do servidor assim que 172 00:08:10,580 --> 00:08:13,120 ‫o usuário clicar no botão comprar. 173 00:08:13,120 --> 00:08:14,550 ‫Assim, quando atingirmos o 174 00:08:14,550 --> 00:08:16,350 ‫ponto final que criamos no 175 00:08:16,350 --> 00:08:19,360 ‫back-end, isso criará uma Sessão e a enviará de 176 00:08:19,360 --> 00:08:20,720 ‫volta ao cliente. 177 00:08:20,720 --> 00:08:22,590 ‫Então, com base nessa sessão, 178 00:08:22,590 --> 00:08:26,010 ‫o Stripe criará automaticamente uma página de checkout para nós, 179 00:08:26,010 --> 00:08:28,640 ‫onde o usuário pode inserir todos os detalhes, 180 00:08:28,640 --> 00:08:32,670 ‫como número do cartão de crédito, data de validade e tudo isso. 181 00:08:32,670 --> 00:08:34,760 ‫Então, novamente, usando a 182 00:08:34,760 --> 00:08:37,360 ‫sessão, finalmente cobraremos o cartão de crédito. 183 00:08:37,360 --> 00:08:39,700 ‫E, para isso, precisaremos da chave pública, 184 00:08:39,700 --> 00:08:41,830 ‫aquela que acabamos de ver. 185 00:08:41,830 --> 00:08:44,270 ‫Portanto, a chave secreta de que precisaremos no 186 00:08:44,270 --> 00:08:46,330 ‫servidor, como você verá lá 187 00:08:46,330 --> 00:08:49,820 ‫na primeira etapa, e a chave pública será usada no front-end. 188 00:08:49,820 --> 00:08:51,730 ‫E o que é realmente importante 189 00:08:51,730 --> 00:08:53,180 ‫notar aqui é 190 00:08:53,180 --> 00:08:54,930 ‫que é realmente Stripe, que 191 00:08:54,930 --> 00:08:57,480 ‫junto com The Session, cobrará o cartão de 192 00:08:57,480 --> 00:09:00,720 ‫crédito e, portanto, os detalhes do cartão de crédito nunca 193 00:09:00,720 --> 00:09:03,800 ‫chegam ao nosso servidor, o que torna nossas vidas como 194 00:09:03,800 --> 00:09:05,870 ‫desenvolvedores muito mais fáceis porque então não 195 00:09:05,870 --> 00:09:08,500 ‫temos que lidar com todo o material de 196 00:09:08,500 --> 00:09:12,000 ‫segurança relacionado ao gerenciamento e armazenamento de cartões de crédito, certo? 197 00:09:12,000 --> 00:09:14,450 ‫Então, o Stripe tira tudo 198 00:09:14,450 --> 00:09:18,030 ‫isso de nós, basicamente usamos sua API assim. 199 00:09:18,030 --> 00:09:21,840 ‫De qualquer forma, uma vez que o cartão de crédito tenha sido 200 00:09:21,840 --> 00:09:24,460 ‫cobrado com sucesso, podemos usar algo chamado 201 00:09:24,460 --> 00:09:28,210 ‫Stripe Webhooks em nosso back-end, a fim de criar novas reservas. 202 00:09:28,210 --> 00:09:30,090 ‫Agora, esta parte do fluxo 203 00:09:30,090 --> 00:09:32,710 ‫de trabalho só funcionará para sites implantados, ou 204 00:09:32,710 --> 00:09:35,900 ‫seja, sites que já estão sendo executados em um servidor. 205 00:09:35,900 --> 00:09:37,770 ‫E essa parte do 206 00:09:37,770 --> 00:09:39,690 ‫fluxo de trabalho, só seremos capazes 207 00:09:39,690 --> 00:09:42,830 ‫de implementar até o final da próxima seção, ok? 208 00:09:42,830 --> 00:09:44,310 ‫Mas, por enquanto, 209 00:09:44,310 --> 00:09:46,270 ‫vamos encontrar uma solução temporária para 210 00:09:46,270 --> 00:09:47,770 ‫isso, que não é muito 211 00:09:47,770 --> 00:09:50,870 ‫segura, mas vai funcionar muito bem por enquanto, ok? 212 00:09:50,870 --> 00:09:54,060 ‫Portanto, mantenha este diagrama em mente e também o conceito 213 00:09:54,060 --> 00:09:57,410 ‫de que realmente usamos The Session para cobrar um cartão 214 00:09:57,410 --> 00:09:59,940 ‫de crédito e não fazemos isso diretamente. 215 00:09:59,940 --> 00:10:01,803 ‫Então, até o próximo vídeo.