Razorpay (gateway de pagamento indiano)
Esta demonstração mostra, passo a passo, como construir um NicoApp do zero. O Razorpay é um provedor de serviços de pagamento na Índia. Nesta demonstração vamos criar uma ação "Criar link de pagamento" e um gatilho "Pagamento pago".
Antes de tudo, registre uma conta no Razorpay e obtenha sua chave de API em Configurações - Chave de API:
No seu painel, siga as etapas 1 a 7 da captura de tela acima para criar um aplicativo da versão 2 e entrar no construtor de aplicativos.
Na seção de configurações, clique em Editar para editar as informações do aplicativo, incluindo nome, descrição, logotipo e imagem da capa do aplicativo.
Os usuários podem visualizar as informações do seu aplicativo antes de baixá-lo.
De acordo com o Razorpay Auth Document, key_id e key_secret são exigidos com autenticação Basic Auth.
Na seção Autenticação, selecione Chave da API como Tipo de Autenticação e clique em Editar para adicionar as 2 entradas de autenticação.
Clique em Salvar quando terminar de adicionar key_id e key_secret:
Agora que configuramos a parte de autenticação do seu aplicativo, vamos adicionar ações!
API usada: Criar link de pagamento.
Siga as etapas 1 a 6 da captura de tela acima para criar a ação e começar a editá-la.
Seguindo a documentação da API, você pode ver quais parâmetros existem, que tipos de valores eles recebem e se são obrigatórios ou opcionais.
Clique em Adicionar itens na seção Entradas:
Deixe a documentação e o NicoChat lado a lado e copie e cole as informações correspondentes.
Para parâmetros opcionais, desative a chave Obrigatório? e forneça um valor padrão, se necessário.
Sugerimos preencher primeiro as Entradas e deixar as Saídas para depois de finalizarmos o subfluxo desta ação.
Escreva a descrição e as orientações necessárias e confira a seção de visualização das suas entradas.
Depois de editar as informações e as entradas da ação, crie um subfluxo para ser executado quando os usuários chamarem esta ação:
Vá para a seção Fluxos e abra o subfluxo que acabamos de criar:
No caso da criação de link de pagamento, uma solicitação externa deve ser suficiente:
Siga as etapas 3 a 5 da captura de tela acima para começar a editar a solicitação externa. Não sabe como adicionar uma etapa de ação? Não se preocupe: tente clicar com o botão direito do mouse.
Selecione o tipo POST, cole o URL, selecione Body - raw - JSON e copie os 2 parâmetros, valor e moeda.
Substitua 1000 e INR pelos campos do aplicativo valor e moeda pressionando o botão </> do lado direito. No pop-up, pesquise o campo pelo nome e clique para selecioná-lo:
Quando você insere campos do aplicativo, aparece o "Conteúdo do Corpo de Teste". É nele que se especificam os valores de teste dos campos. Sem valor de teste, o teste pode falhar. Vamos definir o valor como 1000 e a moeda como AUD:
{{ para chamar um campo, certifique-se de que não haja nenhum caractere como " logo depois dele. Veja a imagem abaixo.
Para a autenticação, já mencionamos que a API do Razorpay usa autenticação básica:
Selecione Autenticação básica, preencha os campos do aplicativo e lembre-se de informar o seu key_id de teste e o seu key_secret de teste.
Parece estar tudo certo. Clique no botão Testar:
Siga as etapas 1 a 8 para salvar o resultado do teste nos campos do aplicativo e clique em Salvar.
Excelente! A solicitação foi concluída e obtivemos nos dados de resposta o payment_link_id e o payment_link de que precisamos.
payment_link_id é o ID que identifica um link de pagamento, e payment_link armazena o próprio link.
Tente visitar o link de pagamento:
Perfeito! Agora, como devolvemos o link de pagamento e o ID ao chatbot? Não se esqueça de que ainda não definimos as Saídas da Ação!
Salve e publique o subfluxo. Depois, vamos voltar à seção Ações:
Adicione as 2 saídas e clique nos 2 botões Salvar, para salvar não só a edição da saída, mas também a edição da ação.
No seu painel, siga as capturas de tela abaixo para instalar o aplicativo na versão rascunho, já que ele ainda não foi publicado:
Preencha suas credenciais e salve:
Atualize suas credenciais aqui, se precisar:
Escolha qualquer um dos seus chatbots — por exemplo, o chatbot do Facebook:
Crie uma etapa de ação, vá para Integrações e selecione a ação do seu aplicativo.
Preencha as entradas, configure as saídas e clique em Salvar:
Adicione mais 2 etapas de Mensagem para lidar com 2 situações diferentes:
Mostre o resultado e coloque também o link de pagamento em um botão de URL.
Visualize a partir da etapa de ação e você verá esta mensagem chegar no seu Messenger:
Clique no botão Pagar e você verá a página de pagamento do Razorpay exibindo um pagamento de US$ 99,99:
Você pode não receber esta mensagem porque alguns links de pagamento são bloqueados automaticamente pelo Facebook. Nesse caso, vale usar um serviço de encurtamento de URL, como o Bitly, entre outros (o aplicativo do Bitly está disponível na loja de aplicativos do NicoChat).
Caso a mensagem não chegue no Facebook, verifique no Live Chat:
A ação parece funcionar muito bem!
Seu aplicativo está quase pronto! Mas espere: o pagamento é feito no site do Razorpay, então como saber se ele foi pago ou falhou? Os provedores de pagamento costumam oferecer um parâmetro chamado URL de retorno:
De acordo com a documentação, o callback_url é o endereço para onde o Razorpay envia o resultado do pagamento. Ou seja, precisamos informar ao Razorpay um callback_url dizendo para onde ele deve devolver as informações.
Um URL de Uso Único pode ser usado como URL de retorno aqui.
Siga as etapas 1 a 5 da captura de tela acima para criar e editar o URL de Uso Único.
Vamos abrir outra página do aplicativo antes de entrar na página de edição do URL de Uso Único.
Vá para a ação "Criar link de pagamento" na Página 2 e adicione os 2 parâmetros à seção do corpo:
Escute o payload para um teste ao vivo. Observe que o URL de teste precisa ser colado em "Conteúdo do Corpo de Teste", e não em "Conteúdo do Corpo":
Ao terminar, clique em Testar e você receberá um link de pagamento, como já viu antes. Acesse o link e faça um pagamento de teste:
Use um cartão de teste para simular o processo de pagamento.
Informe um código OTP aleatório e clique em Enviar.
Por fim, clique em Concluído e você verá os dados de que precisamos quando um pagamento real é feito:
Terminamos agora a primeira seção, parâmetros, do "URL de Uso Único".
Formulário Web serve para coletar informações extras por meio de um formulário web, o que não é obrigatório neste caso. Vamos direto ao design da nossa página da Web:
Ficou bom. Na parte de baixo, defina um intervalo de expiração para o URL de Uso Único. Por padrão, o link expira em 10 minutos. A etapa final do URL de Uso Único é especificar um subfluxo para ser executado quando esta página for aberta pelos usuários:
Não se esqueça de clicar em Salvar no canto superior direito, e o URL de Uso Único estará pronto:
Depois de configurar o URL de Uso Único, vamos adicioná-lo à ação Criar link de pagamento:
No subfluxo Criar link de pagamento, adicione uma ação Obter URL de Uso Único antes da solicitação externa (clique e arraste para mover).
Salve o novo URL gerado em um campo de aplicativo e edite a solicitação externa para inserir o campo:
Salve a edição e publique o subfluxo.
O aplicativo já consegue receber os resultados de pagamento do Razorpay. Agora vamos enviar o resultado de volta ao chatbot por meio de um gatilho.
Siga as etapas 1 a 6 da captura de tela acima para criar um gatilho e começar a editá-lo:
Aqui é onde você especifica quais dados enviar de volta ao chatbot. Neste caso, enviamos tanto o payment_status quanto todo o JSON payment_result.
Depois disso, podemos disparar o gatilho no subfluxo que o URL de Uso Único executa quando o pagamento é recebido:
Não há nada a editar no fluxo anterior do chatbot, mas o gatilho precisa ser configurado em Automação antes de testar o processo de pagamento novamente:
Siga as etapas 1 a 4 da captura de tela acima para adicionar o gatilho e nomear 2 campos personalizados para salvar os dados no NicoChat:
Crie um novo subfluxo para este gatilho. O subfluxo será executado assim que o chatbot receber os dados do aplicativo:
No subfluxo, basta exibir os dados que recebemos:
Tudo certo. Vamos publicar o subfluxo e voltar ao subfluxo anterior para visualizar novamente a partir da etapa de ação:
Recebemos outro link. Clique em Pagar e use novamente o cartão de teste para processar o pagamento:
A página da web que projetamos aparece como esperado:
Ding! Uma mensagem também chegou no Messenger:
🚀 Parabéns!! Você criou o seu primeiro aplicativo! 😍