Hoje em dia, durante uma pandemia, a maioria das pessoas prefere pagamentos online não apenas por causa das precauções de segurança sem contato, mas também porque é rápido, fácil e confiável. Muitos aplicativos móveis incorporam pagamentos online, como Amazon, Uber e muitos mais.
Falando em pagamentos online, muitos desenvolvedores de aplicativos estão usando o Stripe em seus projetos React Native Android e iOS, porque o Stripe oferece uma forma de integrar um sistema de pagamento a este quadro. Temos duas opções para integrar o Stripe no React Native: PaymentSheet ou Elements.
O PaymentSheet é um painel de checkout pré-construído pelo Stripe no qual o usuário pode inserir os detalhes do cartão e prosseguir com o pagamento. Elements é um pouco mais complicado; você tem mais controle do processo, então posiciona os elementos do cartão e é responsável por prosseguir com o pagamento.
Neste artigo, discutirei minha preferência por PaymentSheet antes de mergulhar em um tutorial para obter um exemplo aplicativo de doação desenvolvido com React Native, Expo e PaymentSheet.
PaymentSheet versus o método tradicional de elementos
Aqui estão alguns motivos pelos quais eu acho que PaymentSheet é melhor do que Elements.
Primeiro, o Elements requer muita configuração. Como você é responsável pelo pagamento, você precisa gerenciar a forma de pagamento. Isso pode ser complexo, porque diferentes países têm diferentes configurações de cartão; por exemplo, os cartões na Índia não exigem um código postal, enquanto nos Estados Unidos. Você precisa considerar todas essas condições e gerenciá-las nos Elementos de acordo.
No PaymentSheet, no entanto, o Stripe já configurou a maioria dessas coisas para você. Portanto, se um número de cartão exigir um código postal, o usuário será automaticamente solicitado a adicionar um código postal. Além disso, se ativado, o PaymentSheet é compatível com Apple Pay e Google Pay.
Em segundo lugar, é necessário lidar com muitos erros com o Elements. O PaymentSheet, por outro lado, cuida do tratamento de erros para você e alerta os usuários sobre o que há de errado com seus métodos de pagamento, o que significa que você se preocupa menos com a coleta de fundos.
Por exemplo, se o cartão não for suficiente fundos, o Elements requer que você leia o erro e o exiba para os usuários. Mas quando você estiver usando o PaymentSheet, o usuário será avisado automaticamente pelo Stripe. Você só precisa lidar com os processos de pós-pagamento.
Finalmente, existem alguns requisitos legais ou de privacidade com o processamento de pagamentos que você pode perder ao usar o Elements. Por exemplo, você pode estar inadvertidamente armazenando dados que não deveria, como detalhes de pagamento de usuários.
Diferentes países têm diferentes leis sobre privacidade de dados e pode ser frustrante conhecer e seguir cada uma delas. O PaymentSheet garante que você não precise salvar nenhum dado em seus servidores, pois toda a comunicação necessária para o pagamento é feita diretamente com o Stripe. Isso protege você de violar acidentalmente as leis de privacidade de dados.
Construindo um aplicativo de doação
Hoje estaremos construindo um aplicativo de doação usando Expo e React Native com PaymentSheet para o processamento de pagamentos. Também exigiremos um servidor Node.js para lidar com as operações do Stripe, como iniciar um pagamento e detectar qualquer pagamento no servidor.
Aqui está o que você deve ter para acompanhar o projeto que estamos realizando para fazer hoje:
Nó instalado em sua máquina Um editor de código-eu prefiro a conta Visual Studio Code A Stripe O Stripe CLI instalado em sua máquina A extensão Stripe para Visual Studio Code Conhecimento prático de Node e React Native
Aqui está o link para repositório GitHub para o caso de você ficar preso e querer consultar o código.
Vamos começar a se divertir! Crie uma pasta de sua escolha (no meu caso, chamei-a de expo-stripe) para usar como nossa pasta de projeto.
A primeira etapa é construir um servidor Node, que nos ajudará a iniciar os pagamentos.
Criando um servidor Node.js
Na pasta expo-stripe que acabamos de criar, crie uma nova pasta chamada backend. É aqui que residirá nosso projeto de back-end do Node.
Inicialize um projeto do Node usando o seguinte comando e você terá um arquivo package.json pronto:
npm init-y
Execute o seguinte comando no terminal na pasta de backend para instalar algumas dependências que nos ajudarão com o servidor:
npm install express cors stripe dotenv
Express é usado para fazer facilmente uma API REST com Node. Ele suporta o uso de middleware e possui muitos recursos diferentes; além disso, é fácil de usar.
O pacote cors é usado com o Express para tornar a comunicação com nosso servidor mais fácil e garantir que nenhum erro CORS seja gerado ao enviar solicitações para nosso servidor.
O pacote stripe nos ajuda a nos comunicar com os serviços Stripe, como nossa conta Stripe, para inicializar o pagamento ou verificar o status do pagamento.
Finalmente, o pacote dotenv configura as variáveis de ambiente em nosso projeto para que não t tem que armazenar dados confidenciais, como a chave secreta Stripe em nosso código. Podemos mantê-lo em um arquivo.env separado.
Você agora pode iniciar o servidor usando o seguinte comando no terminal:
nodemon index
Se você não tiver o nodemon instalado, instale usando o seguinte comando:
npm install-g nodemon
Obtendo nossa chave secreta do Stripe
Antes de realmente lidarmos com as operações do Stripe, vamos obter nossa chave secreta do Stripe.
Abra o painel do Stripe e certifique-se de que Visualização de dados de teste esteja marcado na barra lateral. Em seguida, clique em Desenvolvedores e em Chaves de API para ver suas chaves de API.
Lembre-se de manter a chave secreta em segredo e não compartilhe-o com qualquer pessoa, pois isso dará acesso à sua conta do Stripe. Não precisamos da chave publicável por enquanto, mas vamos usá-la mais tarde em nosso aplicativo React Native.
Copie a chave secreta e volte para a pasta de back-end para criar um novo arquivo chamado.env. Mencione sua chave secreta no formato mostrado abaixo:
STRIPE_SECRET_KEY=(chave secreta aqui)
Inicializando um servidor Express e lidando com operações Stripe
Crie um novo arquivo na pasta de backend chamada index. js. Este será o arquivo onde a lógica principal do servidor será armazenada.
Primeiro, vamos criar um padrão básico do servidor:
require (“dotenv”). Config (); const express=require (“express”); const app=express (); const Stripe=require (“stripe”); const stripe=Stripe (process.env.STRIPE_SECRET_KEY); const cors=require (“cors”); const PORT=process.env.PORT || 5000; app.use (express.json ()); app.use (cors ()); app.listen (PORT, ()=> console.log (`Servidor rodando na porta $ {PORT}`));
No código acima, inicializamos o dotenv, que inicializa as variáveis de ambiente para nós. Em nosso caso, é a chave secreta do Stripe.
Em seguida, inicializamos um aplicativo Express para que possamos criar uma API REST e inicializamos o stripe para passar a chave secreta das variáveis de ambiente. Também importamos o CORS para que possamos usá-lo com o Express.
A seguir, criamos uma variável chamada PORT. Isso verifica se uma porta é fornecida nas variáveis de ambiente e, se não, é executado na porta 5000. Isso geralmente é usado com o Heroku porque o Heroku usa suas próprias portas.
Também implementamos app.use (express.json ()); para que nosso servidor possa aceitar dados JSON como carga útil nas solicitações.
Criando um PaymentIntent
Vamos criar uma rota POST (/doar) porque vamos precisar de alguns dados do usuário e estamos criando um PaymentIntent:
app.post (“/donate”, async (req, res)=> {try {//Obtendo dados do cliente let {amount, name}=req.body;//Validação simples if (! Montante ||! Nome) return res.status (400).json ({mensagem:”Todos os campos são obrigatórios”}); montante=parseInt (montante);//Iniciar pagamento const paymentIntent=esperar faixa.paymentIntents.create ({amount: Math.round (amount * 100), currency:”INR”, payment_method_types: [“card”], metadados: {name},});//Extraindo o segredo do cliente const clientSecret=paymentIntent.client_secret;//Enviando o segredo do cliente como resposta res.json ({mensagem:”Pagamento iniciado”, clientSecret});} catch (err) {//Capture qualquer erro e envie o erro 500 para clie nt console.error (err); res.status (500).json ({mensagem:”Erro interno do servidor”}); }});
No código acima, estamos obtendo o valor e o nome de nosso aplicativo e o validando. Se os dados não forem enviados, retornaremos um erro 400.
Então estamos convertendo o valor para inteiro, caso um número em forma de string seja enviado para o servidor. Isso ocorre porque só podemos passar valores inteiros para Stripe.
Em seguida, criamos um PaymentIntent e passamos o valor a ser pago (na denominação mais baixa), moeda (moro na Índia, para mim é INR; use a moeda que você definiu em sua conta do Stripe), a forma de pagamento e os metadados com o nome do usuário.
Quando verificamos a transação no painel do Stripe, você pode ver o usuário nome na seção de metadados. Isso é realmente útil se você deseja incluir algumas informações com o pagamento para que possa encontrá-lo mais tarde.
Estamos então extraindo o segredo do cliente do PaymentIntent, que ajuda a instância do Stripe em nosso aplicativo React Native reconheça o pagamento e prossiga com a confirmação.
Por fim, estamos enviando este segredo do cliente de volta ao nosso aplicativo, que agora poderá confirmar o pagamento.
Criando um webhook
Para testar os webhooks Stripe localmente, precisamos usar a extensão Stripe no código do Visual Studio para facilitar as coisas. Lembre-se, você deve ter o Stripe CLI instalado antes de prosseguir para esta seção!
Abra a extensão do Stripe na barra lateral e você deverá ver as seguintes opções na parte superior:
Clique em Encaminhar eventos para máquina local . Insira o URL do webhook como http://localhost: 5000/stripe ; vamos tratar da rota daqui a pouco. Se você for solicitado a fazer login no Stripe e autorizar a CLI, faça-o e repita o processo.
Se você der uma olhada no terminal, receberá uma chave secreta de teste do webhook. Copie e cole-o no seguinte formato no arquivo.env:
STRIPE_WEBHOOK_SECRET=(stripe webhook secret)
Agora vamos criar uma rota para lidar com as solicitações de webhook do Stripe. Em primeiro lugar, adicione a seguinte linha antes do analisador JSON que criamos antes (o Stripe precisa usar o corpo bruto):
app.use (“/stripe”, express.raw ({type:”*/*”} ));
Agora podemos prosseguir para lidar com a rota:
app.post (“/stripe”, async (req, res)=> {//Obtenha a assinatura dos cabeçalhos const sig=req.headers [“stripe-signature”]; let event; try {//Verifique se o evento é enviado do Stripe ou de terceiros//E analise o evento event=await stripe.webhooks.constructEvent (req.body, sig, process.env. STRIPE_WEBHOOK_SECRET);} catch (err) {//Lidar com o que acontece se o evento não for do Stripe console.log (err); return res.status (400).json ({message: err.message});}//Evento quando um pagamento é iniciado if (event.type===”payment_intent.created”) {console.log (`$ {event.data.object.metadata.name} initated payment!`);}//Evento quando um o pagamento foi bem sucedido se (event.type===”payment_intent.succeeded”) {console.log (`$ {event.data.object.metadata.name} teve sucesso no pagamento!`);//atendimento} res.json ({ ok: verdadeiro});});
Aqui, estamos obtendo a assinatura do Stripe dos cabeçalhos, porque precisamos primeiro verificar se a solicitação é feita pelo Stripe ou algum terceiro fingindo ser o Stripe.
Usaremos o constructEvent para verifique a assinatura em relação ao segredo do webhook que armazenamos nas variáveis de ambiente. Se a solicitação for de terceiros, um erro será gerado com o código de status 400.
Agora, se a solicitação for do próprio Stripe, o evento será armazenado no evento. E agora podemos verificar event.type e o status de pagamento de um usuário usando os metadados do PaymentIntent que fizemos antes. Se você tiver alguma ação de pós-pagamento, pode executá-la aqui.
Finalmente, adicionamos uma resposta para que Stripe saiba que recebemos sua solicitação.
Agora que nosso servidor está configurada, podemos finalmente passar para nosso aplicativo Expo and React Native.
Criando um aplicativo com Expo e React Native
Volte para a pasta do seu projeto (para mim é expo-stripe ) Se você ainda não tem o Expo CLI instalado, instale-o usando o seguinte comando:
npm install-g expo-cli
Agora você pode criar aplicativos React Native com Expo. Digite o seguinte comando no terminal:
expo init rn-app
Quando solicitado com as opções, selecione o primeiro, que é um aplicativo Expo em branco com fluxo de trabalho gerenciado. Isso criará uma nova pasta chamada rn-app que contém nossos arquivos React Native.
Vá para a pasta rn-app e digite o seguinte comando para iniciar as ferramentas do desenvolvedor em seu navegador da web:
npm start
Isso deve iniciar automaticamente seu navegador e você deve ver uma tela como esta:
Execute o aplicativo usando qualquer uma das opções na barra lateral esquerda. No meu caso, vou usar um simulador de iPhone. Se você estiver em uma máquina Windows, pode ser necessário usar um emulador Android ou um dispositivo físico real.
Após a execução, o simulador deve iniciar e você deve ver o aplicativo:
Agora, vamos instalar o pacote Stripe para Expo. A Expo facilitou a integração do Stripe no React Native sem mexer nos arquivos nativos do projeto.
Digite o seguinte comando no terminal para instalar Pacote Stripe React Native :
expo install @ stripe/stripe-react-native
Lembre-se de que estamos usando expo install e não npm install, porque Expo lida com a instalação para nós.
Configurando Stripe no React Native
Antes de configurar Stripe, eu recomendo fortemente instalar o Extensão ES7 Snippets para Visual Studio Code porque gera boilerplates de componentes em branco.
Crie uma nova pasta chamada components e um novo arquivo chamado Checkout.js. Comece a digitar rnfe, escolha o snippet e você terá um componente pronto. Salve o arquivo; vamos usá-lo em breve.
Vá para App.js e importe o componente Checkout e StripeProvider:
import {StripeProvider} from”@ stripe/stripe-react-native”; importar Checkout de”./components/Checkout”;
Agora, seu JSX deve ser semelhante a:
Lembre-se de colocar sua chave publicável do Stripe encontrada no painel do Stripe. Estamos envolvendo o componente Checkout dentro do StripeProvider para que possamos acessar os serviços Stripe.
Vá para Checkout.js e crie o estado para nome e quantidade. Também usaremos o gancho do Stripe para nos comunicarmos com o Stripe:
const [name, setName]=useState (“”); const [quantidade, setAmount]=useState (“1”); const stripe=useStripe ();
O nome padrão estará vazio e o valor padrão será INR.
Agora, vamos criar um layout básico e mapear os estados com as caixas de texto. Seu JSX deve ter a seguinte aparência:
Crie uma função chamada donate (), na qual trabalharemos em breve:
const donate=async ()=> {};
O layout gerado deve ser semelhante ao seguinte:
Em seguida, lidaremos com a função doar:
const donate=async ()=> {try {const finalAmount=parseInt (quantia); if (finalAmount 1) return Alert.alert (“Você não pode doar abaixo de 1 INR”); const response=await fetch (“http://localhost: 5000/donate”, {method:”POST”, headers: {“Content-Type”:”application/json”,}, body: JSON.stringify ({amount: finalAmount, name}),}); dados const=aguarda resposta.json (); if (! response.ok) {return Alert.alert (data.message); } const initSheet=await stripe.initPaymentSheet ({paymentIntentClientSecret: data.clientSecret,}); if (initSheet.error) {console.error (initSheet.error); retornar Alert.alert (initSheet.error.message); } const presentSheet=await stripe.presentPaymentSheet ({clientSecret: data.clientSecret,}); if (presentSheet.error) {console.error (presentSheet.error); return Alert.alert (presentSheet.error.message); } Alert.alert (“Doado com sucesso! Obrigado pela doação.”); } catch (errar) {console.error (errar); Alert.alert (“O pagamento falhou!”); }};
Primeiro, estamos convertendo os valores de strings em inteiros. Em seguida, verificamos se o valor é inferior a 1 $ INR. Nesse caso, o aplicativo emite um alerta e a transação é interrompida.
Em seguida, fazemos uma solicitação HTTP POST para nosso back-end do Node para obter o segredo do cliente. Se houver algum erro, nós os tratamos verificando response.ok.
Em seguida, inicializamos a PaymentSheet usando a função initPaymentSheet () e passamos a chave secreta do cliente que obtivemos no back end. Apresentamos a PaymentSheet usando presentPaymentSheet () novamente, fornecendo-lhe o segredo do cliente e verificando se há algum erro. Se encontrarmos algum, um alerta é enviado ao usuário.
Se não houver erros, você deve receber um alerta de “doação bem-sucedida”. Ao clicar no botão doar, você verá o seguinte:
Esta é a PaymentSheet, feita pelo Stripe. A partir daqui, tudo é tratado pelo Stripe e você não precisa se preocupar com o tratamento de erros.
Assim que o pagamento for bem-sucedido, você poderá vê-lo claramente com o nome do usuário no console que executa o servidor Node. Em ambientes de produção, você precisará criar manualmente um webhook no painel do Stripe e usar as chaves ativas em vez de chaves de teste.
O que vem a seguir?
Parabéns! Você integrou o PaymentSheet com sucesso em seu aplicativo Expo. Quero que você brinque com isso o máximo que puder. Talvez tente usar o Apple Pay e o Google Pay junto com o PaymentSheet, acho que seria um bom exercício!
Se você enfrentar algum desafio, pode sempre consultar o repositório Github vinculado anteriormente neste artigo.
