Razorpay (gateway de pagamento indiano)
- Sergio Santos (Unlicensed)
- Nicola Occhipinti
Esta demonstração mostra passo a passo como construir um miniaplicativo do zero. Razorpay é um provedor de serviços de pagamento na Índia. Esta demonstração criará uma ação "Criar link de pagamento" e um gatilho "Pagamento pago". Veja a documentação aqui: Razorpay Docs .
Visão geral do processo
Passos | O que fazer |
|---|---|
| Registre-se no Razorpay e obtenha uma chave API |
| Crie o aplicativo |
| Configurar informações básicas do aplicativo |
| Configurar autenticação de aplicativo |
| Adicione a ação "criar link de pagamento" e edite as informações e entradas da ação |
| Edite o subfluxo da ação e obtenha resultados da ação |
| Editar resultados de ação |
| Instale o aplicativo de rascunho e teste-o |
| Adicione um URL único para receber o resultado do pagamento |
10. Gatilhos | Adicione um gatilho para enviar o resultado do pagamento |
11. Teste | Teste novamente |
Registro
Primeira coisa, registre uma conta Razorpay e obtenha sua chave de API em Configurações - Chave de API :
Criar
No seu painel, siga as etapas 1 a 7 na captura de tela acima para criar um aplicativo da versão 2 e entrar no construtor de aplicativos.
Configurações
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.
Autenticação
De acordo com Razorpay Auth Document e key_idsão key_secretexigidos com autenticação Basic Auth .
Na seção Auth , selecione Api Key como Auth Type e clique em Edit para adicionar as 2 entradas de autenticação.
Clique em Salvar quando terminar de adicionar key_ide key_secret:
Ações - Entradas
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 na 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 são obrigatórios, que tipos de valores são e se são obrigatórios ou opcionais.
Clique em Adicionar itens na seção Entradas :
Tenha sua documentação e o NicoChat lado a lado e copie e cole as informações de acordo.
Para parâmetros opcionais, desmarque Obrigatório? alterne e forneça um valor padrão se necessário.
Sugerimos que você preencha primeiro as Entradas e deixe as Saídas após finalizarmos o subfluxo desta ação.
Coloque a descrição e as orientações necessárias e verifique a seção de visualização de suas contribuições.
Lembre-se sempre de clicar em Salvar em vez de cancelar antes de sair da edição da ação.
Depois de editar as informações e entradas da ação, crie um subfluxo para ser executado quando os usuários chamarem esta ação:
Fluxos
Vá para a seção Fluxos e insira o subfluxo que acabamos de criar:
No caso de criação de link de pagamento, uma solicitação externa deverá ser suficiente:
Siga as etapas 3 a 5 na 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 POSTo tipo, cole o URL, selecione Body- raw- JSONe copie os 2 parâmetros, valor e moeda.
Substitua 1000e INRpelos campos do aplicativo valor e moeda pressionando o </>botão no lado direito. No pop-up, pesquise o campo por nome e clique para selecionar:
Quando você insere campos de aplicativo, o "Conteúdo do corpo de teste" é exibido. É para especificar valores de teste para os campos. Sem valor de teste, o teste pode falhar . Vamos definir o valor 1000e a moeda como AUD:
DICA - Ao {{chamar um campo, certifique-se de que não haja nenhum caractere como "logo atrás dele. Veja a imagem abaixo.
Para autenticação, mencionamos que a API Razorpay está usando autenticação básica :
Selecione Autenticação básica , preencha os campos do aplicativo e lembre-se de fazer seu teste key_ide teste key_secret.
Parece tudo bem agora, aperte o 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 o payment_link_idque payment_linkprecisamos dos dados de resposta.
payment_link_idé um ID para rastrear um link de pagamento e payment_linkarmazena o próprio link.
Tente visitar o link de pagamento:
Perfeito! Agora como retornamos o link de pagamento e o ID para o chatbot? Não se esqueça de que ainda não definimos os Resultados da Ação !
Salve e publique seu subfluxo, então vamos voltar para a seção Ações :
Ações - Resultados
Adicione as 2 saídas e clique em 2 botões Salvar para salvar não apenas a edição da saída, mas também a edição da ação.
Teste
No seu painel, siga as capturas de tela abaixo para instalar seu aplicativo na versão rascunho, pois 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, 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 envio de mensagem para lidar com 2 situações diferentes:
Imprima o resultado e coloque também o link de pagamento em um botão URL.
Visualize a etapa de ação e você verá esta mensagem enviada ao seu Messenger:
Clique no botão Pagar e você verá que a página de pagamento do Razorpay mostra um pagamento de US$ 99,99:
e se a mensagem não for recebida?
Você pode não receber esta mensagem porque alguns links de pagamento podem ser bloqueados automaticamente pelo Facebook. Você pode querer escolher alguns serviços de encurtamento de URL, como Bitly, etc. (o aplicativo Bitly está disponível na loja de aplicativos NicoChat)
Caso a mensagem não seja recebida no Facebook, verifique no Live Chat :
DICA - Quando uma mensagem é exibida na conversa do Live Chat , significa que o sistema a enviou.
A ação parece funcionar muito bem!
URLs únicos
Seu aplicativo está quase lá! Aguarde, o pagamento é feito no site da Razorpay, como posso saber se o pagamento foi pago ou falhou? Bem, os provedores de pagamento geralmente fornecem um parâmetro chamado URL de retorno :
De acordo com a documentação, callback_urlé para onde a Razorpay devolve o resultado do pagamento. Isso significa que precisamos dar ao Razorpay um callback_url, informando para onde enviar as informações de volta.
Um URL único pode ser usado como URL de retorno de chamada aqui.
Siga as etapas 1 a 5 na captura de tela acima para criar e editar o URL único.
Vamos abrir outra página do aplicativo antes de entrar na página de edição única de URL.
Vá para a ação "Criar link de pagamento" na página 2 e adicione os 2 parâmetros à seção do corpo:
Ouça a carga útil para um teste ao vivo. Observe que o URL de teste precisa ser colado em "Conteúdo do corpo do teste" em vez de "Conteúdo do corpo":
Ao terminar, clique em Testar e você receberá um link de pagamento como já viu antes. Acesse o link de pagamento e faça um pagamento de teste:
Use um cartão de teste para simular o processo de pagamento.
Forneça um código OTP aleatório e envie .
Por fim, clique em Concluído e você verá os dados que precisamos quando um pagamento real for pago:
Terminamos agora a primeira seção, parâmetros, em um "One Time Url".
Web Forms visa coletar informações extras por meio de um formulário web, o que não é obrigatório para o caso. Vamos direto ao design de nossa página da Web :
Parece legal. Na parte inferior, forneça um intervalo de expiração para o URL único. Por padrão, o link expira em 10 minutos. A etapa final para One Time Url é especificar um subfluxo a 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 único estará pronto:
Depois de configurar o URL único, vamos adicioná-lo à ação Criar link de pagamento :
No subfluxo Criar link de pagamento , adicione uma ação Obter URL ú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.
Gatilhos
O aplicativo agora pode receber resultados de pagamento do Razorpay, vamos enviar o resultado de volta ao chatbot por meio de um gatilho.
Siga as etapas 1 a 6 na 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 ambos payment_statuse todo o payment_resultJSON.
Depois disso, podemos disparar o gatilho no subfluxo que o URL único executa quando o pagamento é recebido:
Teste
DICA - Como seu aplicativo ainda está na versão de rascunho, quaisquer alterações feitas no aplicativo também serão atualizadas para todos os aplicativos instalados. Basta atualizar a página da web para obter a versão mais atualizada do aplicativo.
Nada para editar no fluxo anterior do chatbot, mas o gatilho precisa ser configurado na Automação antes de testar o processo de pagamento novamente:
Siga as etapas 1 a 4 na 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 imprimir os dados que recebemos:
Tudo bem agora, vamos publicar o subfluxo e voltar ao subfluxo anterior para visualizar novamente a etapa de ação :
Outro link recebido, clique em Pagar e utilize novamente o cartão de teste para processar o pagamento:
A página da web projetada mostra conforme o esperado:
Ding! Uma mensagem também foi recebida no Messenger:
🚀 Parabéns!! Você fez seu primeiro aplicativo! 😍