Pagamentos com a Stripe com PHP

1. Introdução: bem-vindo a esta classe sobre a integração de pagamentos de greve com PHP. Autenticação segura de clientes, pagamentos recorrentes pagamentos únicos, carteiras digitais em mais para começar. Você quer baixar esse conjunto de instruções e ter certeza de que você tem PHP ganhando localmente e, em seguida, baixar o código de exemplo que irá passar enquanto passamos por esta classe. Vamos começar. 2. Como o Stripe?: nesta lição terá uma visão geral de como o stripe funciona, então você provavelmente já está familiarizado com o stripe. Mas eles são um dos maiores processos de pagamento do mundo. Permite que você leve cartões de crédito e débito e métodos de pagamento acima em seu site. Está disponível na América do Norte, Europa, Europa, alguns do Leste Asiático, e eles continuam a expandir-se. E é usado por sites, incluindo reserva ponto com sobre drama, entrega de folga, UNICEF, UNICEF, monte de grandes empresas internacionais e provedores de greve com um monte de ferramentas para o nosso site. Então eles têm o A P I, com o qual interagimos no back-end. Eles têm greve check out, que é totalmente hospedado. Confira a solução em sua plataforma. Então você apenas enviá-los fora para stripe e então eles voltam tem strike Js, que é a biblioteca de script Java front-end que faz toda a magia acontecer. E então temos elementos listras que são componentes pré-construídos que você pode encaixar em seu site para tornar sua vida mais fácil. Nós vamos olhar para todos estes ao longo deste curso, então há dois fluxos principais que você iria usar vai começar o primeiro é uma saída de pista e , em seguida, neste caso. O que acontece é que construímos uma sessão contendo o nosso carrinho de compras. Então, tudo no nosso cesto que nos juntamos, enviamos uma mensagem para o Stripe dizendo que vamos enviar um cliente que tem todas essas coisas na cesta. Em seguida, usamos listras script Java para realmente enviar o usuário para essa página no site listrado para completar, colocando seus detalhes do cartão incompletos e, em seguida, greve redireciona o uso de volta para o nosso site após o pagamento é concluído. Então pense nisso é como o papal funciona. Quando você quiser fazer um pagamento, você envia o usuário para o PayPal. Eles fazem o pagamento que voltar. Tudo é hospedado por stripe, então há muito pouco para nós fazer. É fácil e rápido configurar todos os novos recursos striper lançando o automaticamente relacionado ao check-out. Agora o segundo fluxo, que eu chamei de fluxo de jazz stripe. Embora nós realmente usamos a biblioteca Javascript strike em ambos os fluxos. Mas neste tudo está hospedado em nosso site. Então, como fazemos isso sem fazer o nosso site PC? I compatível porque tudo acontece com os scripts Java do usuário insere que os detalhes do cartão de crédito no que é a nossa página da Web, mas que nunca é postado no back-end que é enviado via script Java para stripe servidores para fazer o pagamento. Então o fluxo aqui é que nós construímos uma página de check-up em nosso próprio site em. Nós provavelmente colocaríamos um campo de cartão de crédito lá usando elementos listras de pré construídos, coisas realmente agradáveis olhando que chegarão a mais tarde. E, em seguida, quando o usuário coloca seus detalhes de cartão de crédito na faixa, biblioteca Js envia seus detalhes de cartão de crédito para os servidores stripe para dizer, Aqui estão os detalhes do cartão. Queremos fazer um pagamento aqui, no qual Point stripe autorizará esse cartão e nos enviará de volta um token. Esta é apenas uma série de números e letras que podemos usar para processar esse pagamento. Então, uma vez que temos esse token de volta, então podemos enviar o formulário de pagamento do usuário em nosso próprio site. Desconsiderar que os detalhes do cartão de crédito nunca foram salvá-los em nosso servidor porque não queremos que a conformidade com o PC I. Tudo o que precisamos é que token do que quando o usuário volta para o nosso back-end, Nós, em seguida, enviar para atacar um pedido P I A em nosso back-end dizendo que isso é o quanto queremos construir o usuário. E aqui está o nosso símbolo para dizer qual cartão de crédito nós queríamos construir esses dois fluxos disponíveis, e nós vamos olhar para ambos neste curso, começando com check out e, em seguida, indo para a integração mais profunda, Então vamos começar. 3. Clonagem do repo: para este projeto. Criei um código de exemplo de medo. Então isso vai começar e você pode facilmente clonar isso. Então está ligado. Obter esperança em seu chamado Bookshop PHP. Vou colocar este u R l na seção de recursos, mas você só precisa ir aqui e até mesmo pegar o clone git. Ou você também pode baixar o zip. Se isso é fácil para você em seu e em algum lugar no seu computador, você só quer se soprar pastoso. Você está realmente em que vai baixar todo o código de exemplo que você precisa uma vez que você tenha ido, que precisamos fazer é executar uma instalação compositor e eu vou apenas tirar um momento naquela loja de terra . Toda a dependência que precisamos, como um projeto normal de Petri. Uma vez que fizemos isso, então temos tudo o que precisamos para começar e assumindo que temos o cli sinfonia que podemos obter a partir do Symphony Service start e isso vai iniciar sinfonias, servidor Web interno. Parece bom. Então podemos ir ao Teoh anfitrião local 8000 e aqui temos o projeto de amostra de corrida. Então nós temos todos esses livros que podemos adicionar cesta de livraria eles aparecem aqui, tem uma pequena cesta. Podemos esvaziar isso e devolver ao lar para a idade. Podemos começar a adicionar livros novamente. Quem tem o sistema básico? Além disso, podemos construir nosso check-out e processamento de pagamentos. Então obtenha o código de exemplo baixado. Começa a correr e depois passaremos para a próxima lição. 4. Registrando uma conta Stripe: A próxima coisa que você quer fazer é estar pronto. Uma conta de stripe disse. Para fazer isso, basta fazer uma greve. Mas vamos lá e aperte o botão Iniciar agora e depois preencha todos os seus dados. Você pode até configurar como uma empresa se você tiver registrado objetos da empresa. Como indivíduo, tecnicamente, você não precisa de uma conta de stripe. Se você estiver configurando isso para o nome de outra pessoa, você pode usar a conta stripe dela, e você nem precisa de acesso, desde que ela forneça as chaves certas. Mas isso definitivamente ajuda a ter um, porque então você pode verificar tudo o que estamos fazendo e ver as transações passando em stripe. Uma vez que você tem nada vieira, você deve chegar ao painel em. É tudo o que precisamos por agora. Então vamos cobrir todo o resto na próxima lição. 5. Acessando suas chaves da API: Uma vez que você está em sua conta stripe, então você precisará obter suas chaves A P I para fora para fazer isso. Podemos ir até este Desenvolvedores com chaves P I aqui. Esta é a nossa chave pública aqui que incluirá no front-end. E também temos a chave secreta que o Egito apertou este botão de revelação que lhe dará uma chave privada que usamos no back-end. Agora, ao fazer isso, você quer ter certeza de que você alterou esses dados de tarefas de visualização porque nós vamos querer usar nossas chaves de vida na vida, obviamente. Mas para fins de desenvolvimento, tol horas para saber, realmente processar quaisquer pagamentos e usar o teste de greve Guardas vai querer estar usando os dados de teste , então certifique-se de que você pegar essas chaves teste um P I. Se você estiver usando a conta stripe de outra pessoa, você pode apenas fazer com que eles retirem esses dados para você. Por isso, eu recomendo ter sua própria conta que ele contestar com porque e você pode ver as transações que vêm através 6. Instalando a biblioteca Stripe: para fazer uso fora da faixa. AP eu precisarei realmente obter a listra A p I código Onda podemos facilmente levantar-se do pacote ist. Ele está indo apenas para stripe Stripe PHP? Não. No código de exemplo que lhe dei aqui, já está incluído. Então, se formos até os pacotes, já temos a biblioteca direta instalada. Mas se você está trabalhando em seu novo projeto, seu próprio projeto, ele só precisa lidar com a instalação do compositor fora deste pacote PHP strike e isso vai dar você ou a funcionalidade A p I que vamos usar ao longo deste curso. 7. Cartões de teste de Stripe: outra coisa que seria dedo do pé super útil tem como passamos por este curso é alguns cartões de teste. Então, quando estamos testando os pagamentos, não queremos usar nossos cartões de crédito reais no provedor de greve. cartões de teste fora da Siri, que nós apenas os cartões de teste de greve do Google, é a maneira mais fácil de encontrá-lo. Em Sob esta seção de testes, temos um monte de cartões diferentes. Então aqui está um monte de exemplos de todos os provedores de cartões diferentes também tem cartões internacionais , e quando começamos a ver um pagamento, há cartões para testar isso também. Então é ótimo ter esses documentos à mão. Além disso, se você usar qualquer tipo de sistema de gerenciamento de cartões fora, até mesmo seu navegador ou seu gerenciador de senhas, você pode até instalar um desses cartões no. Isso é o que eu faço. E então eu só permito que preencha todas as vezes, qualquer um para usar isso como cartas. Então mantenha esta página à mão. Basta saber que estes cartões estão disponíveis. Poderíamos usá-los mais tarde 8. Usando o código exemplo: à medida que passarmos será criar todo o código que precisamos juntos. Mas se você preferir apenas assistir os vídeos e depois codificar mais tarde e não quiser ter que pausar constantemente o vídeo e digitar um pouco, ou apenas chegar ao final de um projeto e algo não está funcionando, então todo o código que vamos criar já está no repo get que você deu. Então vamos para a raiz aqui. Nesta pasta Exemplos, você pode encontrar todos os ajudantes e modelos do controlador que vamos criar juntos já em sua forma concluída. Então, se você conseguir algo e não funcionar, então um bom lugar para ir estrela é apenas compará-lo com o que está nos exemplos. Depois de cloná-los, eles estarão disponíveis localmente também. Então, nos exemplos, algo não está funcionando. Basta trazer o código, e você pode compará-lo com o que você fez em D. C. Espero que solucione e veja onde o problema está 9. Verificação de stripe: neste módulo. Vamos nos integrar com o check-out listrado. Então, apenas Teoh recap O que strike check out é tudo sobre é que é uma página de check-out hospedada por Stripes ou semelhante ao PayPal. Nós estamos indo para enviar o usuário fora para listrar com um monte de variáveis para dizer-lhes quanto nós queremos cobrar. Vão aceitar o pagamento do cliente e enviá-los de volta. Se você quiser ir direto para uma integração completa com greve onde quer que as coisas sejam mantidas em nosso site, então sinta-se livre para pular este módulo. Mas se você quiser ver como isso funciona primeiro, então para continuar assim o fluxo é que vamos construir uma sessão contendo o cesto de usuários . Vamos enviar isso para o Stripe no back-end. Nós vamos então obter token de volta do stripe e usá-lo para redirecionar o usuário para a página de check-out em listras para que o strike saiba quem eles são e o que devemos estar exibindo para eles. Strike, em seguida, tomar o pagamento e redirecionar o usuário de volta para o nosso site, momento em que podemos dizer algum tipo de ordem completa página. Então vamos começar a implementar este 10. Criando uma sessão de checkout: Vamos começar a criar este check-out para que possamos roubar este código do controlador cesto e criar um novo controlador chamado Check out Control. E teremos essa função de check-out mapeada. Teoh o cheque para fora o seu tudo e nós vamos precisar trazer algumas das bibliotecas listras aqui. Então vamos usar o comandante e vamos usar a sessão de check-out também. Quando usarmos isso mais adiante, vamos nos livrar desse código existente. Ok, ótimo. Então agora podemos começar a escrever nosso casaco. A primeira coisa que vamos precisar fazer é definir o nosso Que privado Vamos fazer isso. Então, a chave do FBI, vamos tirar isso de um invariável que vamos para a chave privada de listra de carvão. Vamos preparar isto. Já está meio configurado em um minuto, mas vamos voltar e configurar na próxima lição, e então começamos a construir nossos objetos de sessão que a maneira que vamos fazer é criar um objeto de sessão para de todos os dados em. Então vamos mandar para o Stripe. Então, quando o usuário pousa no site listrado, ele sabe o que precisa. Então isso vai ser um objeto. Vamos dizer ao Stripe que queremos que os usados paguem com cartão. Vamos criar matriz vazia para itens de linha porque irá preencher que dele. Mais para baixo. Eu não tive sucesso. Você também é Este é o lugar onde o usuário será redirecionado de volta para em uma das coisas que greve nos dá é a capacidade de ser sessão I D ou remetentes a sessão I d volta para que possamos colocar Lane é um espaço reservado, e greve vai saber o que fazer isso em. Vamos também ter um conselho seu se eles usarem é cancelar. Eu quero que eles voltem para a tela do cesto que nós nos importamos. Então, a próxima coisa que queremos fazer é realmente dizer stripe em que produtos estavam. Então, para fazer isso quando um loop através dos itens da cesta, por favor, retire cada livro sobre o que é adicionado aos itens de linha, vamos adicionar um novo objeto aqui, dizer o nome. Ouça como uma descrição do título do livro que está passando o nome do autor, o valor. Então, quando eles fazem algo um pouco diferente aqui e vamos tomar o preço que é armazenado em nosso pequeno banco de dados como um preço decimal. Então, por exemplo, 99 vezes em curso por 100 porque sempre que passamos uma quantidade para stripe, ele precisa estar no denominador mais baixo. Então, em dólares, estamos falando enviado algo com euros com libras. Estamos a falar de enviar moedas de um centavo. Então, se você tem algo orgulhoso preço $9,99 nós precisamos enviar mais 999 galinhas estavam indo para dizer o preço armazenado em nosso banco de dados e vezes por 100 e passou a moeda em. Neste caso, vamos usar libras em finalmente quantidade, e isso vai ser definido no dedo um. Então, desenvolvemos esses dados de sessão e, adicionalmente, criamos toda a lista de produtos também. Finalmente, temos toda a informação que precisamos. E então, neste ponto, podemos chamar um FBI para criar a sessão no dia. Vamos renderizar isso para um modelo em. A única coisa que precisamos passar para baixo para este modelo é a sessão que eu d que obtemos de stripe. Ok, isso parece bom. Então, agora temos o nosso controlador, mas precisamos obter um modelo e precisamos resolver essas chaves também 11. Instalando as chaves API: no controlador de check-out. Usamos esta variável ambiental para obter são chave de faixa privada em. Nós vamos fazer uma coisa semelhante no front-end em nosso modelo. Na verdade, isso já está ligado, pronto para ser usado. Então precisamos definir isso porque isso será diferente para cada um de nós quando o arquivo dot m já criou essas variáveis aqui. Mas porque não queremos que essas chaves sejam comprometidas, eu recebo o repo porque elas serão diferentes por ambiente em segredo. Então talvez nós não todos tendo acesso a eles que queremos fazer é criar um ponto m ponto arquivo local e nós precisamos fazer em Aqui é esta é uma linha de comentário na cópia e colar essas duas linhas aqui e, em seguida, basta colar suas chaves reais depois deles aqui em assume você fizer isso, eles estarão prontos e disponíveis para usar assim criado ponto m ponto chaves de pastelaria local em e você não 12. Redirecionar para o checkout: com grande nosso controlador. Mas agora precisamos criar esse modelo que vamos realmente renderizar os redirecionamentos. Vamos fazer isso. Agora faça isso quando você estiver indo para usar o diretório templates. Eu era como copiar e colar código para torná-lo mais fácil, mas seria realmente tudo isso em Chamamos este check-out e a primeira coisa que vamos fazer é incluir o código Js stripe para que você possa copiar e colar isso do site strike. Mas é bem simples. A menina e nós estamos indo para ir em frente em criar bloco de script onde vamos colocar nosso código em um par de coisas que fazemos aqui é criar stripe Instance aqui eu preciso colocar ah stripe para mas Kian que nós criamos como uma variável ambiental. Então esta é a nossa chave pública no código de controle terrestre que o usuário não vê que estavam usando uma chave privada. Não misture esses dois e tudo o que faremos é chamar a função de redirecionamento. Andi aqui só precisamos passar na sessão eu d que renderizamos em nosso controlador e isso é literalmente ou precisamos fazer para que check-out, redirecionar. Então vamos salvar isso como um modelo em. Lá vamos nós. Vamos ver o que acontece. 13. Executar a jornada: Estamos quase prontos para fazer esta jornada. Nós ralamos tão última coisinha, que precisamos fazer isso. Ele renomeou este controlador, que eu perdi antes. Assim que fizermos isso, podemos ter nosso serviço sinfônico morto. Então eu já tenho minha manhã aqui. Mas se não, é apenas sinfonia espaço servidor de dois pontos iniciar e que vai ficar manhã superior no host local 8000. Você também deve ter acesso aqui. Onda. Podemos criar cestas. Eu já tenho dois livros em mente, mas nós poderíamos ir e ter alguns diferentes. Isso é neste e este que tem um par de livros Steinback. Agora, quando formos verificar, devemos ser redirecionados para stripe. Está bem, Perfeito. Ótima. E temos os nossos livros listados com o Price e a oferta. Então vamos preencher alguns detalhes. Vamos pegar um cartão de teste de ataque. Este caso é um MasterCard e podemos usar qualquer data com ele e apenas inventar alguns números . Nós poderíamos fazer uma proposta get tão bem hit pay, e espero que isso deve cobrar e nos enviar de volta para a página de sucesso que nós temos apenas criando uma pequena livraria Ok, ótimo. Então, lá temos. É certamente centra-se atrás. Já fez a transação? Bem, vamos dar uma olhada. Vamos para o painel de greve. Temos testado também ativado e iria atualizar a página. Sim, e depois temos 18 98. Ela é a transação que acabamos de fazer. Fizemos um pagamento com sucesso no. Neste ponto, nós nos integramos com sucesso com Stripe Jack fora, o que é ótimo. Se você quer uma integração simples do que já foi feito em módulos futuros, vai olhar para algumas das integrações mais avançadas que podemos fazer. 14. Stripe.js e API: este módulo, Vamos olhar uma integração mais profunda com faixa em que construímos nossa própria página de check-out em nosso próprio site e usar greve Js e strike a p I para integrar isso. E nós usamos essas duas coisas na jornada de check-out também. Mas vamos usá-los muito. Mawr aqui com esta profunda integração. Então, tudo vai estar no nosso site. Mas porque não queremos que nosso site Teoh tenha que ser PC, eu concordo. Vamos enviar os detalhes do cartão de crédito para listrar com os jatos de greve deles. biblioteca JavaScript no fluxo será algo parecido com isso. Então nós construímos essa página de verificação em nosso próprio site vai cair em um formulário de cartão de crédito de elementos stripe em quando o uso que preenche os detalhes do cartão de crédito que stripe Js enviará esses detalhes de cartão de crédito para stripe servidores sem que eles tenham que ser processado pelo nosso servidor. Tudo acontece no front-end em javascript strike. Em seguida, envie-nos de volta um token de autorização de pagamento que será enviado para o nosso back-end. Então tudo o que temos é um token e, em seguida, fazemos uma chamada para AP listrado I para dizer que eu vou cobrar você uso deste valor e aqui está o meu token para dizer que o usuário me deu autorização para usar este cartão de crédito, e strike então irá cobrar. O pagamento vai saber que eles fizeram isso e, portanto, podemos mostrá-los para a página de sucesso do pedido sem que o usuário nunca tenha que sair do nosso site. Então vamos começar a integrar isso. 15. Criando um verificação esqueleto: neste módulo vamos criar check out que está completamente integrado em nosso site. Então, para começar, vamos começar criando um esqueleto para que selecione Leve nosso controlador existente em. Vamos chamar isso de local. Confira o Controlador ligado. Ainda vamos precisar de listras, mas aqui, mas aqui, vamos usar carga de listras em vez disso. Ainda vou querer o Teoh. Na verdade, vamos nos livrar de todo esse código por enquanto. Linguagem. Ele vai seguir em frente e registrar o que está acontecendo Este traço local check-out Tudo o que este controlador vai fazer é Bridget é renderizar este modelo entre eles. O controlador também. Está bem. Parece bom para May, então. A mesma coisa aqui. Vamos criar eu modelo de check-out local. Aquele que estamos nos referindo aqui. Andi, você diz isso em modelo. Ok, ótimo. Ainda vou dar uma olhada. Vamos nos livrar desse código. Então, agora, se conseguirmos um check-out local, temos uma página esqueleto onde podemos começar a integrar. Eu iria conferir 16. Elementos de faixa: mesmo que nós estamos criando todo o processo de pagamento em nosso próprio site ainda seria greve para fazer alguns dos trabalhos pesados para nós em termos de criar o pequeno formulário real onde as pessoas colocam seus detalhes de cartão em. E para fazer isso, vamos usar elementos listrados que você pode ver em seu site aqui. Isso só nos dá alguns formulários pré-construídos que realmente agradável e fácil de preencher, então as pessoas apenas colocar seu número de cartão nele, vai reconhecer o cartão. Ele vai apenas pelo seu ícone correto, ouvir que dura a eles para colocar seu código postal ou CEP em, e isso realmente apenas torna super fácil. Então você olha para isso, por exemplo, está no número do Rial, mas como importamos que reconhece que é um visto. Reconhece os Americanas Guardas Americanasque nos pediram o fecho e também lida com algumas das coisas mais avançadas e seguras que faremos mais tarde. Então, é um componente super útil, e esta é realmente a maneira de greve para pedir às pessoas que se integrem agora é usando esses elementos pré-construídos . Então vamos pegar isso e soltá-lo em nossa página 17. Adição de elementos de Stripe: Vamos em frente e soltar elementos de greve em Ah, confira. Então nós temos ao redor para verificar a página aqui e por um minuto, o código, nosso modelo aqui. E nós apenas começamos por criar nós não vamos usar um realmente precisa de um método em de criar alguns CSS pré-construído, então nós vamos ter a classe check-out. Você pode verificar isso no aplicativo dot CSS Apenas uma pequena coisa para torná-lo um pouco mais bonito quando começamos. Quando damos um i d para e dentro do formulário, vamos encontrar esse lugar elemento mais velho vai chamar elemento cartão. Sim, fica bonito. Vamos criar uma grande queimadura eu mesmo. Enviar pagamento. Ótima. Nós já temos o nosso script aqui em Vamos trazer esse código que inicialize é stripe o A P I também. E então vamos em frente inicializar isso então vamos dizer elementos distantes iguais e , em seguida, vamos criar cartão em. Uma vez que eu fui elementos criar Deus. E finalmente, vamos montar isso no nosso elemento de cartão. Tudo bem,coisas adoráveis. Tudo bem, Então, para recapitular, criamos um pequeno formulário com este elemento de espaço reservado. Inicializamos um FBI listrado chamado “Elements a p I “com um grande elemento de descarte. E agora, se você atualizar a página para Lucky, temos este bom pré construído elementos listras em um grande botão de pagamento enviar. Não faz nada ainda, então vamos ligar isso. 18. Validação da entrada: a próxima coisa que queremos fazer é lidar com erros. Então, se algo está errado aqui, queremos ser capazes de exibir isso para o usuário. Então vamos. E nesse festival agora, isso é adicionar outro elemento de espaço reservado. Erros de cartão Collis. E então vamos ligar isso. Então pegue o nosso elemento cartão irá adicionar um monitor de ouvinte de eventos para a mudança. Então aqui dentro, vamos obter nossos objetos de erros de cartão. E se houver um evento de erro, defina o conteúdo deste para exibir o sempre e se não, vamos certificar-nos de que limpamos qualquer erro porque, por exemplo, por exemplo, eles poderiam ter sido um erro e, em seguida, o usuário está corrigi-lo, então não queremos continuar a exibir a era. Ótimo. Então agora, sempre que houver uma mudança que vai verificar aqueles estreitos e se assim for, vai preencher esta pequena caixa para exibir o árabe abaixo. Agora vamos passar para realmente obter este pagamento 19. Criando um simbólica: discutiu a forma como tomamos o pagamento com listra é pedimos a listra a p i para um token e exaltado no lado do cliente para que as informações do cartão de crédito nunca tenha que tocar no nosso servidor. Portanto, não precisamos ser compatíveis com o PC I. Vamos em frente. E por que isso agora? Então, selecionamos nosso elemento de formulário. Chamamos o formulário de pagamento no topo. Vamos adicionar um ouvinte de eventos aqui neste é para enviar. Então isso seria chamado quando o usuário atinge que enviar pagamento, impedir a ação padrão, e então nós vamos chamar a faixa ap I Então nós vamos chamar, criar token, passá-lo o objeto cartão quando a primeira coisa que vai fazer é verificar se há um erro. Se houver, reutilizaremos nossos erros de cartão por meio de um amplo. Isto agora é, se recebermos a mensagem de erro, ela vai enfiá-la em seus pressupostos. O usuário começa a digitar e editá-lo. Então ele pode se livrar dele, que é o código que fizemos anteriormente. Mas se não, então estamos todos bem. Isso significa que temos um token. E então nós queremos lidar com essa aparência homossexual A última coisa que precisamos aqui é escrever esta função que vai lidar com o token. Devemos receber um bem sucedido para fazer isso na tomada? Ao criar elemento, você vai ser um tipo de mercado de entrada como oculto nome dado off token. Passe-lhe o símbolo que eu dei e nós vamos desmantelá-lo. Forma Teoh. E então, finalmente, nunca enviamos formulário. Então estamos fazendo aqui. É obter este token de volta como resultado dentro criar entrada oculta neste formulário aqui que adicionamos nosso token inter para que seria enviado através de quando o formulário é postado em DWI. Em seguida, poste o formulário em agora ser enviado para o back-end e na próxima lição, vamos processar o que acontece no back-end. 20. Testando nosso simbólico: Nós conectamos nosso código para pedir uma ficha de greve. Mas funcionou? Bem, vamos descobrir. Então atualize a página. Se você ainda não o fez, só para ter certeza que você tem o menos um em. Em seguida, abra o console do desenvolvedor. Vou até a escuta da rede. Agora ele vai enviar o formulário se for bem sucedido, e nós não queremos que ele faça isso. Então vamos ativar preservar log on para que possamos ver as solicitações anteriores em. Vamos em frente e pegar alguns detalhes do cartão de teste. Coloque-os dentro, invente isso e ele é. Poderia, eu sei que são nove e eles saíram e vamos ir em frente e limpar isso e, em seguida, enviar o pagamento. Ótima. Então, ele fez com sucesso postar para check-out local. Vamos ver se encontramos isso. Lá vamos nós. Há o nosso pedido sobre e nos dados do formulário. Ele enviou nosso token, e agora podemos usar esse token para fazer um pagamento no back-end. Então vamos fazer isso 21. Como processar pagamentos com Tokens: Agora que temos nosso token, vamos usá-lo para receber um pagamento. Então vamos para um check out local e aqui vamos verificar se o pedido é um post. Então ele é Method post, e se assim for, então vamos saber que estamos tentando processar o pagamento. Então vamos começar por arrancar Ah, propriedade de greve. Vamos enfiar isso aí. E também queremos obter o token depois da nossa missão. Fato, vamos fazer isso primeiro. Ok, Anexar vai precisar de uma cesta e podemos saltar através dela para calcular o preço. Mas o que vai ser mais fácil é se usarmos esta cesta de forma útil. Eu criei Então um listers é que passamos em nossa variável de sessão e nos dá um pouco de saúde, um método como obter o preço total obter no preço bruto que lembre-se que precisamos vezes tudo por 100. Porque se o preço de 9 99 precisamos enviar 999 para stripe, e também será condensado para baixo a lista de livros em uma string. Então nos damos uma boa descrição também. Então nós diamos de volta para o check-out local Estamos passando os dados da sessão em que nos dará essa ajuda de esforços, e então nós vamos criar uma carga. Então, antes de fazermos isso, vamos arrumar isso. Certifica-te de que estamos a importar isso, e depois voltamos. Eu estou OK. Esta carga. Então vamos ligar para a classe de carga, que já trouxemos. Aparecem em nós vamos dizer, criar e passá-lo no objeto. Ótimo. Ok. E então preencha isso. Então, para a quantidade, foi chamado. Legal. Pegue arroz cru. Ajudando o esforço. Ordens de moeda. Corte duro. £2 por enquanto. Descrição novamente. Você chama isso de legal? Ajude-o. Esforço, Andi. Finalmente, vamos usar nossa ficha, que temos que passar por nós. Fonte. Vamos chamar token gank de perder. Então vamos Uma vez que isso tenha sido bem sucedido, vamos limpar a cesta. Porque uma vez que eles usam bola, os livros provavelmente não querem comprá-los novamente. E então vamos redirecionar para a mesma página de sucesso para a qual enviamos o usuário no check-out. Ok, isso parece bom para mim. Vamos continuar na próxima lição. 22. Executar a jornada: Agora nós conectamos nosso check-out para que ele use token para carregar listra. Vamos em frente e verificar se funciona. Então vamos começar adicionando alguma cesta de livraria que é tomar Cannery Row em 1984 Onda, mudar este botões jaqueta então agora vai para uma nova página de check-out local. Mas você também pode apenas digitar o poço. Vamos em frente na bomba estes detalhes do cartão de testes em hit enviar pagamento e temos a página de sucesso. Ótimo, isso também vai fazer stripe e verificar os pagamentos Venha por aqui, aqui vamos 1984 e Cannery Row. O pagamento tem processo de bean com sucesso. Então, se você está acompanhando os parabéns, agora você integrou com sucesso pagamentos de greve em seu site local. 23. Autenticação segura do cliente (SCA): neste módulo. Vamos olhar para os pagamentos S EA. O que exatamente eles são? É um bom ponto de partida, o que significa autenticação segura do cliente e sua iniciativa da União Europeia para tentar cortar fraudes. Por isso, é introduzido em 2019 e está gradualmente a ser lançado. Agora, como acontece com a maioria das coisas no setor bancário, eles levam muito tempo para entrar e autenticação multifator. Então você pode ter visto Freedy seguro onde quando você vai para um check-out, você é redirecionado para o seu banco para inserir uma pequena senha ou cada vez mais agora, especialmente com S E A, você recebe um código especial enviado por SMS para usar em seu celular, e você tem que inserir isso no site. Então você procurou todos os detalhes do seu cartão. Você tenta processar o pagamento. Seu landsend bancário você atacar dizendo ter certeza que este é você e você tem que entrar no site antes que você possa concluir a transação. Agora, se você não implementar pagamentos S e A do que cabe ao banco, quer eles aceitem ou recusam Andi ao longo do tempo, eles vão começar a diminuir cada vez mais. Então agora é bastante relaxado alguns pagamentos que você pode passar sem isso. Mas com o passar do tempo, o provável caiu mais e mais transações. Isto não é um problema para a América do Norte no momento. É especificamente para a Europa, mas isso inclui todos os países dos objetos Ain na União Europeia. No DSO, se você acha que terá clientes na Europa do que vale a pena, implementar isso e é totalmente compatível com todos os outros também. Então, é melhor fazê-lo desta forma, então, é fazê-lo da maneira mais simples, na minha opinião, porque não há muita complexidade adicional para fazer isso. Se eu vir um rolo até a América do Norte e em outros lugares do mundo, então você estará se testando no futuro, então vamos ver como fazê-lo. 24. Criando uma página de checkout SCA: Vamos em frente e transformar nossa implementação básica em algo pronto . Então temos nosso controle local aqui. Vamos em frente e criar uma cópia disso. Vamos chamá-lo de S C H. Eu conto controlador sobre o que muda você doente para ver um check-out também. E isso foi Pedir a ele para renderizar este arquivo SCH de novo. Vamos levar o cheque local, Michael. Basta fazer uma cópia dele. Chama-se S E A. Diga isso aí. E depois nas nossas cestas. Lá está ele. Vamos mudar que os Greats que estão trabalhando ainda conectado como uma integração básica, é claro. Mas agora vamos em frente e transformá-lo em uma implementação desagradável e compatível. 25. API paymentIntent: Vamos abrir. Ah, SC A check-out Controlador Andi, quando não vai mais ser usado, A carga ap I vez, vamos usar o pagamento em 10 AP. Eu estou com intenção de pagamento em fazer tudo na frente. Então vamos precisar reorganizar as coisas. Primeiro de tudo, entrando na cesta por aqui, vamos precisar colocar a correia. Um p I também irá ignorar este livro por enquanto. E aqui em baixo, o que vamos fazer é criar uma intenção de pagamento. Sim, e vamos usar os mesmos esforços para ajudá-lo. Então nós dizemos, cesta, obter Royal Price enviado a moeda novamente. Vamos definir a descrição aqui em baixo. Isto vai dar ordens qualquer sinal. Chama-se “Segredo do Cliente”. Então nós já descrevemos o que é o pagamento, e nós enviamos para greve aqui, e então nós vamos renderizar isso para o script de trabalho, o que significa que quando o usuário realmente enviar o formulário, então todo o trabalho foi feito e os pagamentos foram processados para que possamos se livrar desta carga. E em vez disso, se é um post, podemos simplesmente limpar a cesta em redirecionar o usuário para esta página colete imediatamente, modo que parece tudo o que precisamos fazer aqui. Agora ele está indo para o front-end em modificar o JavaScript. 26. Usando a API PaymentIntent: nesta lição irá modificar o código frente e JavaScript para ser S e uma reclamação. Então, é abrir nossa página de check-out do SCH, e a maior parte disso vai continuar a mesma. Só algumas coisas que vamos mudar. Então não precisamos mais dessa função token handle, e não vamos mais usar o token de criação. Em vez disso, vamos usar algo chamado “Confirmar pagamento com cartão”. E o primeiro argumento que vamos passar é aquele token que temos quando criamos a intenção de pagamento e vamos passar-lhe algumas opções, bem como dizer método de pagamento, vamos passá-lo cartão. Isto se refere a este objeto cartão aqui em então tudo o que precisamos fazer é lidar com o resultado. Então vamos fazer o evento de novo. Não vou dizer se isso seria resultado. Faz mais sentido. Andi, se for um sucesso, precisamos fazer um pouco de intenção extra de pagamento de rastreamento porque pode demorar um pouco. Então, novamente, vamos enviar um formulário se você se lembrar de tudo o que fazemos quando enviamos o formulário é limpar a cesta e redirecionar para esta página em excesso porque estamos criando um token com faixa aqui para o que queremos cobrar. E então, no front-end, o usuário insere os detalhes do cartão, e isso acompanha o token que criamos para dizer o pagamento que queremos nas ordens fora das listras têm ao mesmo tempo. Então, espero que seja tudo o que precisamos fazer. Não vamos testá-lo. 27. Executar a jornada: Nós reescrevemos. Eu chequei para B S E um compatível usando listras pagamento em 10 FBI. Então, agora vamos ter certeza que tudo funciona. Então vamos começar checando apenas um cartão normal e certificando-se de que não quebramos nada. Tenho reserva de uma cesta ir livre para check-out em vai apenas tomar o mesmo cartão de teste que temos vindo a usar. OK, perfeito. Fui atrás de você. Vamos passar pelo processo de novo. Então vamos adicionar mais alguns livros à cesta e vamos voltar para verificar. E se formos a esta faixa de páginas cicatrizadas enfraquecer, ver mais abaixo. Temos esses cartões que representam coisas com as quais contestamos, vê? A Então, neste caso, vai pedir verificação. Então veremos o que isso significa novamente. Preencha o cartão. Um pagamento desta vez. O banco pediu ao usado para verificá-lo, Então isso pode estar pedindo a eles para inserir senha. Pode enviar um código de acesso único para aquele telefone ligado. Eles teriam que entrar que tudo isso é tratado por listras aqui. Então, em vez de apenas uma grande reivindicação completa fora, mas e pode ser apenas isso, mas pode ser algo mais complicado, mas o usuário faria isso sozinho e, em seguida, apenas completar autenticação no banco. Temos sucesso lá também. Tão grande. Agora, sempre que o banco quiser autorização adicional quer que este S e uma autenticação segura de cliente irá lidar com isso também. Perfeito. 28. Carteiras digitais: neste módulo. Vamos integrar carteiras digitais na aplicação. Mas se você não está claro o que carteiras digitais são, são coisas como Apple pagar Google pagar nós chap um visto, confira mestre passar esses tipos de formas virtuais de pagar que acabou de acontecer no navegador ou no seu dispositivo móvel. Então não estamos falando de transações do mundo real aqui, mas estamos falando de sem um cartão físico. Então, por exemplo, Apple paga. Você pode acessar sites. Basta bater esse pagamento com o Apple Babe em e em um desktop, você começa um pouco pop up como o que estamos vendo neste Mac e em um dispositivo móvel, você teria um pouco pop up como na direita. E é a mesma coisa com o Google Pay e muitas dessas carteiras digitais. A forma como stripe faz isso é que nos dá um botão unificado, então nós inserimos este botão em nosso processo de check-out, e quando ele usou hits que eles vão obter o pequeno pop-up relevante. Então, se eles estão no safari que recebem maçã, pagam no cromo, eles recebem o Google Pay. Seja qual for o suporte do dispositivo, ele irá aparecer aquela pequena janela. Então vamos ver como integrá-lo 29. Criando um controlador de carteira digal: Vamos começar criando um controlador para a nossa carteira digital, então vamos começar com o nosso controlador de check-out CH que será uma boa base. Isso é copiar e colar que salvar, ele pediu. Sua carteira controlou a gripe? Para isso é praticamente o mesmo que um S e um pagamento usando o pagamento por sua vez, AP I. Então, há apenas alguns ajustes que precisamos fazer, e isso é para enviar alguns dos frutos descrição. Porque em vez de enviar as informações para o processador de pagamento para o extrato do cartão de crédito , também precisamos dizer a eles o que está acontecendo quando eles recebem a notificação em seu telefone ou dispositivo para dizer isso fazendo um pagamento. Então isso é nestas variáveis para o front-end. Usaremos o nosso ajudante de cesta. Vou enviar uma descrição. Nós enviaremos o preço para você também, e essa é a única mudança que precisamos fazer para o controlador. Em seguida, podemos ir para o front-end no make são mudanças. Lá 30. Montar um botão de solicitação de pagamento: Agora que temos nosso controlador de carteira digital, podemos fazer as mudanças no front-end. Então vamos levar a CIA. Confira modelo em Basta salvar os olhos. Modelo de carteira digital em e vamos chegar ao nosso controlador em. Mudei para você. Cadastre-se A carteira digital em que mudou. Você está bem da Ella, e finalmente está na cesta. Vamos mudá-lo para uma carteira digital e então podemos começar a fazer mudanças aqui, e há muitas mudanças aqui. Então, em vez de ter um cardeal no nosso botão, que vai colocar este botão de pedido de pagamento, não precisamos do CSS Eva Stunning. Os erros do cartão ainda precisam trazer em stripe, mas há muitas mudanças para permanecer aqui, então a primeira coisa que vamos fazer é criar um pedido de pagamento e o país aqui que você deseja passar no código de país de dois dígitos ice eso. Precisa estar em letras maiúsculas ou amar o tempo como moeda. Nós dobradiças, mais em minúsculas, mas temos este código de país. Ele precisa ser passado em maiúsculas e para o rótulo Territo, vamos usar essa propriedade de descrição que nós fast-food e nós também vamos pressionar o valor através do preço superior. Chamámo-lo e nós Andi, vamos pedir algumas informações do A P I também. Então, se quisermos usar seu nome e e-mail se registrou no dispositivo, podemos. E uma vez que criamos ah objeto de solicitação de pagamento, então precisamos trazer elementos listrados que temos um par não esperar, e então queremos criar botão de solicitação de pagamento para que vamos fazer elemento criar Eles duram para a solicitação de pagamento e a solicitação de pagamento será o objeto de solicitação de pagamento que acabamos de criar em seguida. Queremos verificar se funciona. Então, muitos navegadores e dispositivos não terão uma carteira digital configurada. E há um A P I para isso, então podemos ligar, podemos fazer pagamentos caixas de mísseis Wever se ele está disponível ou não. Então podemos dizer se é verdade, então vamos montar aquele Putin. Então este é o elemento vazio que temos um par de pagamento através Putin estavam dizendo se o usuário tem esse suporte em seus arcos de ou dispositivo, em seguida, mostrá-lo e se não. Vamos dar a eles uma mensagem que diz “Desculpe agora” em um sistema completo. O que fazemos aqui é voltar a um cheque normal aqui. Então, se eles podem carregar o botão de solicitação de pagamento, nós mostraríamos que, se não, então nós apenas dar-lhes um estilo de formulário tradicional. Mas para fins de depuração aqui, quero que vejamos quando não está funcionando. Por isso estamos incluindo a mensagem lamentável. Mas normalmente você poderia dar a eles um cheque da velha escola com uma entrada de cartão aqui. Isso são batatas fritas. Livre-se desse código que não precisamos. Até agora, montamos a bala, recebemos uma mensagem. Se não, vamos para a próxima lição. Vamos ver como realmente fazemos esse pagamento. 31. Como processar pagamentos com o botão: Nós montamos nosso pagamento nascido na UI mas agora nós precisamos realmente lidar com Ele é um clique sobre ele e fazer um pagamento. Então vamos fazer isso agora. Vamos começar adicionando um ouvinte que está escutando o método de pagamento. Certo, Certo, ligue de volta para lidar com isso. Vai chamar de pagamento com cartão confirmado, e precisamos passar uma fiança suas opções para isso. Então, primeiro de tudo, vamos passar o segredo do cliente que geramos a partir do controlador no back-end para que o usuário não possa mexer com nada. Então vamos definir o método de pagamento baseado no objeto que temos. Finalmente, vamos definir essa opção chamada manipular ações igual a false on. A razão pela qual estamos definindo como falso é que vamos escrever nosso próprio código para lidar com o que está acontecendo aqui. Portanto, não queremos que o código de ataque padrão faça nada porque vamos escrever o código agora mesmo. Este é o código que nunca precisamos ligar de volta. Vamos tomar este resultado confirmado que vai voltar de chamar isso Se houver uma era , em seguida, quando uma marca este pedido de pagamento como completo, mas uma falha e que irá dizer ao navegador Teoh, levá-los de volta para o tela de pagamento porque o pagamento falhou e se não marcar como um sucesso, e que irá dizer ao navegador para prosseguir porque tudo correu bem. E então, se for um sucesso, então nesse ponto precisamos ligar para o pagamento de cartão confirmado novamente, porque neste ponto vamos deixar Stripe realmente pegar o dinheiro neste momento, quando precisamos fazer é passar o segredo do cliente novamente, e, em seguida, torna-se como um pagamento regular. Então, digamos que se houver uma era, vamos receber os erros do cartão, que é o mesmo que usamos esse selo de tempo todo na mensagem, e se não, então enviaremos o formulário. Então vamos repassar isso. Então, neste ponto, se o pagamento confiável solicitado, estamos chamando isso com o Então estamos chamando a faixa de P I com este pagamento confirmado com cartão , e isso é como, por exemplo, no seu telefone, a pequena janela aparece dizendo, Você quer fazer um pagamento em que a alavanca funciona ou não vai se ele não funcionar inicialmente. Em seguida, por exemplo, os pagamentos falharam no dispositivo e assim o usuário poderia tentar novamente. Ele precisa tentar um cartão diferente ou precisa preencher algo, caso em que informará o dispositivo que falhou naquela fase. Se assim for, podemos comercializar está completa e esconder o pequeno pop-up no dispositivo. Mas só porque fizemos isso não significa que aceitamos o pagamento. Então precisamos entrar em contato com a greve Baby. Eu novamente para dizer que o dispositivo aceitou este pagamento, e agora queremos tentar cobrá-los. Ele poderia então ir para o banco e eles poderiam rejeitá-lo, caso em que irá colocar a mensagem de erro para cima. Mas se não, então tudo deve ficar bem. Então essa é a teoria por trás disso. Vamos ver se funciona. Vamos carregar um site com som de livro. Pegue uma cesta e pegue. Confira em. Não temos nada. Então vamos depurar isso na próxima lição. 32. Servir por HTTPS: executamos nosso código de script de trabalho para nossa carteira digital. Não funcionou inicialmente porque eu salvei o arquivo. Mas agora a metade. E se você está acompanhando, você deveria receber esta mensagem dizendo: “ Desculpe”. Seu navegador não suporta carteiras digitais. Agora depende de qual navegador e dispositivo você está usando. Mas estou no cromo bem aqui. E assim deveria. Então, o que está acontecendo aqui? Bem, o problema é que as carteiras digitais só funcionam por causa do ódio, o que não estamos executando aqui, que está executando http normal. Felizmente, sinfonia tem um projeto de lei em solução para isso, e nós poderíamos apenas ir a um servidor sinfonia, ver uma instalação, e isso irá instalar um certificado local para nós para que possamos ter válido, espero ser s sobre o host local. Se você não está correndo na sinfonia, comece você pode usar algo chamado M K, senhor, que fará uma coisa semelhante. Mas é um pouco mais chato configurar. Então, espero que você está seguindo junto com pilha Symphony. E então tudo o que precisamos fazer é reiniciar nosso servidor. Se o atualizarmos processado, redirecionamento será automaticamente. Sim. Então você tem o cadeado que vamos bater em você para ser perguntado no botão parece perfeito. Então agora temos nosso botão de pagamento. Vamos testá-lo na próxima lição. 33. Testando sua carteira digital no Chrome: Agora que temos o botão funcionando, vamos fazer um teste. E a maneira mais fácil de fazer isso é no cromo. Se nós apenas ir para preferências em ir para baixo aqui para métodos de pagamento e widgets pode adicionar um novo. Andi, vamos tirar alguns dos cartões de teste de listras de novo. Vamos levar este deve bater guarda. Poupe agora de volta. Check out página. Temos que pagar. Agora temos o pagamento do Google, podemos escolher este cartão de teste que acabamos de criar. Então aqui podemos ver que temos um livro, preço de cor azul. E nós temos ah, método de pagamento. É isso. Pay pode atingir qualquer CVC aqui em. Será que vai confirmar? Ok, ótimo. Temos a nossa página de maior sucesso. Parece ter pago através do Google pay. Vamos entrar na placa de poeira de refrescante listras. Sim. Lá vamos nós. Temos em você pagamento Mefford. Ele está automaticamente pegando nosso endereço de e-mail. Tem a descrição. O preço também está bem. Então, se as carteiras digitais foram integradas com sucesso na arte, confira o processo 34. Passos adicionais para o Apple Pay: Bem, nós fizemos até agora. Dá-nos uma carteira digital para uma variedade de diferentes. Então Microsoft pagar Google pagar Mestre passar o único Ele não funciona para sua Apple Bay porque a Apple gosta de ser difícil. Então, para que a Apple Pay funcione, precisamos fazer tudo o que fizemos até agora. Mas há alguma configuração adicional também. E isso acontece em nossos painéis de distribuição que vamos descer, acertar duas configurações, vamos obter métodos de pagamento. E hey, nós temos Apple Pay. Eu vou para esta configuração, e nós temos o Apple Pay. Precisamos de uma lista branca que todos os domínios estavam usando. Então vamos aparecer no domínio em colocará vivo ou um domínio de teste aqui. E precisamos fazer isso para cada um dos domínios que queremos usar. A próxima coisa que precisamos fazer é obter este arquivo de verificação. Então este é você apenas clicar aqui e os downloads de arquivos sobre isso precisa estar disponível no site neste local. Então, basta baixar o arquivo e colocá-lo em seu diretório público. Então vamos fazer isso agora. Precisa estar neste ponto Bem conhecido, por vezes, localizador ou gerenciador de arquivos, onde quer que o sistema de frenagem usando eram engraçados sobre um ponto tecelão direto em. Então, se você conseguir esse problema, nós podemos facilmente, o Egito ir para a linha de comando em irá para o diretório público, e nós vamos torná-lo nosso fato elétrico bem conhecido já fez isso neste caso. Então, se não tivéssemos feito isso, apenas dê para isso. E então nós só queremos fazer direto, também. Bem, de vez em quando temos o arquivo do desenvolvedor da Apple. A menos que os jatos movam isso para o diretório, ele ia para lá e checar. Está ali. Ok, ótimo. - Sim. E isso é apenas corrigir esse problema também. Ok, ótimo. Então os arquivos lá , estão em nosso diretório público. Precisamos fazer isso para cada um dos domínios estavam colocando aqui sobre aqueles dos passos adicionais que você precisa fazer para obter o pagamento da maçã funcionando 35. Criando um clube de livros: neste módulo. Vamos criar um clube do livro que as pessoas podem se inscrever para fazer pagamentos recorrentes para Andi Para começar, vamos chips criar esqueleto rápido. Então vamos tomar o nosso S e um controlador porque esta é a coisa mais próxima Teoh o que precisamos para dio em. Vamos mudar o nome para um controlador de prescrição. Não vamos precisar do cesto para nos livrarmos da sessão e isso mudou este ano. Al para assinatura. Bem, estou indo. Isto pode sair por enquanto. E então renderizaremos uma página chamada de assinatura. Deixe-nos saber por enquanto. Ok, parece bom. Agora vamos criar um modelo básico. Não é. É aberto se eu ver um check-out mais cópia e colar isso em uma assinatura perpétua em Vamos mudar isso para dizer mas assinatura clube e vamos se livrar de todo este cartão para o momento. E isso é apenas grande forma pouco que permite que o usuário insira alguns detalhes. Então pergunte o nome deles. Bem, isso é para o endereço de e-mail. O homem é um tipo de e-mail, por isso faz a impressão de gravata no celular. Chame de e-mail também. Ah, fora da variável oculta. Diga o que está acontecendo? Então, criando cliente em Finalmente um grande botão diz, Junte-se ao clube. Ok, ótimo. Vamos verificar o que está renderizando. Ok. E a resposta é não. Tenho o nome do modelo errado. Ok, vamos resolver isso na próxima lição. 36. API de configuração: Então parece que cometi um pequeno erro de ortografia aqui. Já que corrigimos isso, agora temos uma bela forma. Então vamos lidar com o que aconteceu. Quando o usuário envia, isto é, vamos entrar em nosso controlador de assinatura no que não faria é criar um método para lidar com a criação de um cliente. Lá vamos nós. Então, a maneira como isso vai funcionar é que nós vamos dizer stripe para criar objeto personalizado. Temos os dados que temos e, em seguida, vamos pegar o método de pagamento que estamos subindo e vamos anexá-lo a esse cliente para que possamos construir esse cliente sempre que precisarmos dedo e aqui, conecte a tira A p I k. Estou dizendo costume em criar em pessoa os valores. Então estamos aqui, vamos mudar. Então, vamos usar o cliente. Vamos usar a intenção de definir listras. Fale sobre isso em um minuto. Então aqui criamos um objeto de cliente, e neste ponto, podemos criar um Nintendo. Agora, poderíamos criar uma intenção de pagamento aqui, que nos permitiria criar um cliente imediatamente e marcá-lo como um cliente para faturamento recorrente. Mas nos casos em que não queremos construí-los imediatamente. Queremos construí-los quando a assinatura começar. Podemos usar a configuração em 10, que é muito parecido com o FBI. Mas isso significa que não precisamos construí-los agora. Vamos pegar o objeto do cliente Wicket aqui. Nós vamos pegar o I d. Nós vamos dizer, anexar este pagamento em prazo que nós estamos fazendo o seu por sua vez neste caso para este cliente . Nós dissemos que é cartão. Muito bem, coisas adoráveis. E então nós vamos soletrar corretamente desta vez quase desta vez, nós temos um segredo de cliente porque nós acabamos de criar essa intenção. Agora tudo o que precisamos fazer é realmente chamar esta função. Então, vamos até aqui. Está cortada de volta. Não precisamos mais dessa intenção. Quando o suspiro Se tivermos ação. Oh, digite, crie cliente. Então vamos voltar. Passar um pedido. Agora vai acontecer. É quando o usuário envia o formulário que ele vai acertar isso. Ele vai ter este grande cliente e ele vai renderizar o modelo com este cliente secreto lotes pecado vai. Modifique o modelo para manipular esse 37. Configuração de cartão de confirmação: fizemos nossas mudanças de back-end. Então vamos modificar o front-end para lidar com este tipo de passo dois. Mas isso é uma lógica para dizer, se temos um segredo de cliente. Sim, e se não, então renderizaremos o primeiro passo da jornada. E aqui nós mais queremos colocar um check out clássico. Vamos começar pegando essa garota do ensaio e depois modificaremos como ele fez. Então você colocou um extra que muito nascido aqui só para deixar claro o que está acontecendo. Deus, envie o cartão de pagamento. Erica está bem. Ainda preciso ligar para a faixa. FBI definiu nossos erros de código, mas então teremos que modificar esta aposta. Então, em vez desse pagamento confirmado com cartão, precisamos fazer algo um pouco diferente. Então vamos chamar o cartão confirmado de Mefford. Vamos passar os segredos da planta que a maioria dos códigos ainda vai parecer muito parecida. E, em seguida, que é lidar com o resultado deste cartão configurado. Então, novamente, provavelmente apenas copie e cole isso aqui. Livre-se disso. Então, se obtivermos um resultado, pergunte ao Burt antes de colocarmos o resultado nesta caixa de flechas card em vai mudar. Isso carregou um pouco também. Então vamos dizer olhando um acordo em resposta Satis queremos tomar que conseguiu. caso afirmativo, não vamos enviar o formulário. Vamos continuar com isso na próxima lição. 38. Executar a jornada: quando a alteração final que precisamos fazer é uma vez que os usuários enviar o pagamento, precisamos fazer algo no backend, neste caso, irá redirecionar para este excesso de página cheques. Ação de novo. Poderia ter feito isso mais graciosamente em um interruptor. Mas bem vai dizer: Se isso aconteceu, então faça o velho redirecionamento. Ótima. Então vamos testar o que acontece. Esse é o ponto. Alguns detalhes do cliente bateu, juntou-se. Virar e ótimo. Agora temos um pagamento com cartão. Isso é copiar e colar na tarefa são detalhes bater, enviar pagamento e temos a página de sucesso. Ok, isso parece bom. Agora vamos para o nosso painel de distribuição em O que devemos ter é um cliente. Ok, ótimo. E entre e eles têm um cartão anexado à conta deles. Então é ótimo. Então agora podemos entrar e adicionar um pagamento através do painel aqui e do FBI ou podemos colocá-los em um plano de assinatura também. Então, se queremos Teoh recorrente conta eles. No entanto, queremos fazer isso, agora temos como cliente configurado com um cartão que podemos cobrar a qualquer momento 39. Considerações finais: bem feito em fazê-lo até o final desta classe. Esperemos que você tenha seguido ao longo já construiu um post de integração de stripe os detalhes do link ou do código de exemplo no projeto. Seção em Deixe que todos vejam o que você fez. Vejo-te em breve.