Como integrar pagamentos Stripe à Hostinger Horizons

O Stripe é uma plataforma de pagamentos que permite aceitar pagamentos online e gerenciar assinaturas com segurança. Integrar o Stripe a uma aplicação web do Hostinger Horizons oferece um sistema completo de assinaturas do lado do servidor, sem que você precise escrever código de back-end.

Para integrar o Stripe à sua aplicação web do Hostinger Horizons, siga estas etapas:

1. Prepare um banco de dados para armazenar os dados dos usuários e das assinaturas.
2. Adicione os recursos de cadastro e login para as contas dos usuários.
3. Crie uma conta no Stripe.
4. Crie um produto de assinatura e copie suas chaves de API.
5. Configure os webhooks do Stripe.
6. Armazene suas chaves como variáveis de ambiente.
7. Linke o Stripe ao seu projeto do Horizons.
8. Teste o fluxo de pagamento.
9. Adicione um portal do cliente para que os assinantes possam gerenciar seus planos.
10. Entre em operação para aceitar pagamentos reais.

Antes de começar

Antes de adicionar o Stripe, conecte sua aplicação web a um domínio personalizado. O Stripe exige um domínio ativo na hora de configurar webhooks e colocar o site no ar, então essa etapa é essencial.

Vamos criar um modelo de assinatura recorrente em que os usuários pagam uma taxa mensal fixa para acessar conteúdo premium. As mesmas etapas se aplicam a qualquer caso de uso baseado em assinatura, incluindo sites de assinatura, ferramentas SaaS e comunidades restritas.

1. Configure o banco de dados para o seu projeto

O criador de aplicativos com IA da Hostinger inclui um banco de dados integrado que você pode acessar diretamente do editor usando o botão Dados. Antes de conectar o Stripe, certifique-se de que seu projeto tenha um banco de dados configurado para armazenar dados de usuários e assinaturas.

Você não precisa configurar nada manualmente. Descreva o que precisa no chat do Horizons, e a IA configura as coleções de banco de dados necessárias para você.

Abra seu projeto no Horizons e use um comando como:

Adicionar contas de usuário ao meu projeto.

Depois de enviar, seu painel de dados aparece no editor. Você pode ver e gerenciar os dados em tempo real depois de publicar seu projeto.

2. Adicione funcionalidades de cadastro e login

Com assinaturas, os usuários precisam de contas para que o status da assinatura fique vinculado à identidade deles. Adicione a autenticação antes de conectar o Stripe.

No chat do Horizons, usa um comando tipo:

Adicionar fluxos de cadastro e login ao meu projeto com autenticação segura.

Se você já adicionou a autenticação, confere se tá tudo configurado certo com:

Verifica se os fluxos de cadastro e login estão totalmente e seguramente integrados ao banco de dados. Pretendo usar o Stripe para assinaturas, então garante que as contas dos usuários sejam gerenciadas corretamente.

3. Crie uma conta no Stripe

Para começar a aceitar pagamentos, você vai precisar de uma conta no Stripe: assim que sua conta for criada, você será redirecionado para o modo Stripe Sandbox, um ambiente de teste que permite simular pagamentos antes de entrar em operação.

1. Acesse a página de cadastro do Stripe e crie sua conta gratuita.
2. Insira seu e-mail, senha e dados do negócio ou pessoais.
3. Dá uma olhada na sua caixa de entrada e confirma seu e-mail para ativar a conta.

Se quiser configurar sua conta do Stripe em produção desde o início, clica em Mudar para conta em produção no canto superior direito do painel do Stripe e conclui o processo de cadastro.

4. Crie um produto de assinatura e obtenha suas chaves de API

Um produto de assinatura define quanto os usuários pagam e com que frequência, e suas chaves de API permitem que o Horizons se comunique com o Stripe. Primeiro, crie o produto:

1. Acesse o Catálogo de produtos no seu painel do Stripe.
2. Clique em + Adicionar um produto e insira os detalhes:
   • Nome. Insira um nome claro, como Plano Pro.
   • Modelo de preço. Selecione “Recorrente”.
   • Valor. Para testar, defina como $0 para que você possa passar por todo o fluxo de compra sem ser cobrado; depois, atualize o preço antes de colocar o produto no ar.
   • Período de cobrança. Escolha “Mensal” ou ajuste conforme suas necessidades.
3. Clique em Adicionar produto para salvar.

4. Abra o produto, clique no ícone de três pontos ao lado do preço e selecione Copiar ID do preço.

Anota esse ID de preço. Você vai precisar dele mais tarde, e ele tem o formato price_….

Em seguida, copie suas chaves de API:

1. Acesse a página Chaves de API no seu painel do Stripe.
2. Na seção Chaves padrão, copie as duas:
   • A chave pública, que começa com pk_live_… (pk_test_… no modo Sandbox).
   • A chave secreta, que começa com sk_live_… (sk_test_… no modo Sandbox).

5. Configure os webhooks do Stripe para o seu projeto

Os webhooks são como o Stripe se comunica com o seu projeto. Eles mantêm os status das assinaturas sincronizados, por exemplo, quando um pagamento é aprovado, falha ou quando um usuário cancela seu plano.

Primeiro, peça ao Horizons para criar um endpoint de webhook. O Horizons usa um servidor de API Express para a lógica do lado do servidor, então use um prompt como este para adicionar a rota da API que recebe os eventos de webhook do Stripe:

Crie uma rota de API no servidor que exponha uma URL de endpoint para lidar com os webhooks do Stripe. Você pode chamá-la de stripe-webhook. Não faça nenhuma outra alteração no projeto!

O Horizons gera uma URL de endpoint de webhook. Copie-a, pois você vai precisar dela na próxima etapa.

Depois, crie o webhook no Stripe:

1. Vá para Desenvolvedores → Webhooks no seu painel do Stripe.
2. Clique em + Adicionar destino.
3. Na primeira etapa, selecione seu/sua conta, depois procure e selecione estes três eventos:
   • checkout.session.completed.
   • customer.subscription.updated.
   • customer.subscription.deleted.
4. Clique em Continuar.

5. Na próxima etapa, seleciona Endpoint do webhook e clica em Continuar.
6. Insere o nome do destino:
   • Nome do destino: insere algo como “Webhook do Horizons para assinaturas”.
   • URL do endpoint: cola a URL gerada pelo Horizons na etapa anterior.
7. Conclui a configuração.

Depois de concluir a configuração, o Stripe fornece um segredo de assinatura que começa com whsec_…. Copie e salve esse segredo, pois você vai precisar dele na próxima etapa.

6. Salve suas chaves do Stripe como variáveis de ambiente

Para manter sua chave secreta e o segredo de assinatura do webhook protegidos, salve-os como variáveis de ambiente no servidor da API do Horizons. Isso evita que eles apareçam no seu código front-end.

No chat do Horizons, use este comando, substituindo os valores de preenchimento por suas chaves reais das etapas 4 e 5:

Adicione as seguintes variáveis de ambiente ao servidor da API:

STRIPE_SECRET_KEY = sk_live_…
STRIPE_WEBHOOK_SECRET = whsec_…

Não faça nenhuma outra alteração no projeto!

7. Conecte o Stripe ao seu projeto no Horizons

A solicitação abaixo conecta com segurança sua assinatura do Stripe ao seu projeto, cuidando do checkout, dos webhooks, do produto de assinatura e do controle de acesso em uma única etapa.

Antes de enviar, substitua os valores dos espaços reservados por:

• Seu ID de preço (da etapa 4), que tem o formato price_….
• Sua chave publicável (da etapa 4), que tem o formato pk_live_….
• Seu domínio real no lugar de your-domain.

Quero integrar o Stripe de forma segura para vender assinaturas no meu projeto Hostinger Horizons.

Já salvei minhas chaves do Stripe como variáveis de ambiente no servidor da API:

Chave secreta: STRIPE_SECRET_KEY
Segredo de assinatura do webhook: STRIPE_WEBHOOK_SECRET

Passo 1: Sessão de checkout e webhooks

Cria uma rota de API no servidor que lide com as sessões de checkout do Stripe. Quando um usuário iniciar o fluxo de compra da assinatura, cria com segurança uma sessão de checkout do Stripe usando minha chave secreta armazenada e retorna a URL da sessão para redirecionar o usuário.

Ao criar a sessão do Stripe Checkout, passe tanto o success_url quanto o cancel_url. Certifica-te de que essas URLs usem o domínio do meu site: seu-domínio.

Cria um cliente no Stripe e salva o stripe_customer_id gerado no banco de dados.

Para qualquer atualização recebida do webhook do Stripe, usa o stripe_customer_id para localizar e atualizar o registro correto do usuário no banco de dados.

Passo 2: Produto de assinatura

Adicione meu produto de assinatura do Stripe ao projeto Horizons.

ID de preço do produto no Stripe: price_…
Chave publicável do Stripe: pk_live_…

Adicione um botão “Atualizar” no projeto que acione o fluxo de compra da assinatura.

Garanta que a assinatura esteja totalmente linkada ao banco de dados de usuários.

Só usuários com uma assinatura ativa podem acessar os recursos premium.

Passo 3: Controle de acesso

Conceda acesso premium aos usuários assim que eles comprarem.

Verifique o status da assinatura em tempo real quando os usuários fizerem login, criarem uma conta ou tentarem acessar recursos premium.

Passo 4: Segurança e correção

Garanta que a integração seja segura e não exponha chaves secretas para o front-end.

Lide com toda a comunicação do Stripe no lado do servidor por meio do servidor de API.

Dá um tempinho pro Horizons processar e aplicar as alterações.

8. Teste a integração de pagamentos

Seu aplicativo web já deve estar pronto para aceitar pagamentos de teste. Você não pode testar a integração com o Stripe usando o painel de visualização no Horizons, porque a visualização ao vivo é executada dentro de um iframe em ambiente de teste (sandbox) que restringe redirecionamentos por motivos de segurança.

1. Clique em Publicar no canto superior direito do painel do projeto para lançar seu aplicativo.
2. Acesse sua aplicação web pelo seu domínio personalizado e tente fazer uma assinatura.
3. Na página de checkout do Stripe, use estes detalhes de teste:
   • Número do cartão. 4242 4242 4242 4242.
   • Data de validade. Qualquer data futura.
   • CVC. Qualquer número de 3 dígitos (4 dígitos para cartões de teste da Amex).
   • Nome, e-mail, país. Quaisquer valores.

Se o pagamento for bem-sucedido, você será redirecionado de volta para o seu aplicativo com o acesso premium ativado. Você também pode conferir a assinatura no seu painel do Stripe, na seção Clientes.

9. Adicione um portal do cliente para gerenciamento de assinaturas

Quando o fluxo de assinaturas estiver funcionando, dê aos usuários a possibilidade de gerenciar suas próprias assinaturas pelo portal do cliente integrado ao Stripe, onde eles podem atualizar formas de pagamento, ver faturas ou cancelar.

1. Vá para Configurações → Faturamento → Portal do cliente.
2. Encontre a seção Abrir o portal do cliente com um link.
3. Clique em Ativar link para habilitar o portal.

Depois, volta pro Horizons e usa essa instrução:

Cria uma nova rota de API no servidor que gere, de forma segura, um link para o Portal do Cliente do Stripe para o usuário conectado.

Depois, adiciona um botão “Gerenciar assinatura” ao meu projeto. Esse botão deve ficar visível só para usuários pagos. Ao clicar nele, os usuários devem ser redirecionados para o Portal do Cliente do Stripe, onde podem gerenciar suas assinaturas.

10. Mude para o modo ativo

Depois de testar sua aplicação web e estar pronto para aceitar pagamentos de verdade, mude para o modo ativo no Stripe.

1. No seu painel do Stripe, clique em Crie sua conta ativa na parte superior da página e conclua o processo de cadastro, que inclui inserir os dados da sua empresa e as informações da sua conta bancária.

2. Volte para o Catálogo de produtos e crie um novo produto com seus preços reais em produção.
3. Vá para Chaves de API e copie sua chave pública de produção (pk_live_…) e sua chave secreta de produção (sk_live_…).
4. Configure um novo endpoint de webhook apontando para o seu domínio ativo (repita a etapa 5 usando a URL do seu domínio ativo).
5. No Horizons, atualize suas variáveis de ambiente com as chaves ativas (repita a etapa 6 com os valores ativos).

Use este comando para atualizar a integração com suas credenciais ativas:

Mudei o Stripe para o modo ativo. Você pode atualizar minha aplicação web com o ID do preço ativo e a chave de publicação? Aqui estão os detalhes:

ID do preço: price_…
chave de publicação: pk_live_…

Re-publique seu aplicativo assim que a Horizons terminar o processamento.

Por que integrar o Stripe na Hostinger Horizons?

Conectar o Stripe ao Hostinger Horizons oferece uma solução completa, do lado do servidor, para aceitar pagamentos recorrentes diretamente em suas aplicações web. O Horizons cuida do front-end e do back-end, enquanto o Stripe gerencia os pagamentos, então você tem:

• Cobrança recorrente em ciclos mensais, anuais ou personalizados
• Processamento de pagamentos no servidor, que mantém as chaves confidenciais fora do front-end.
• Acompanhamento de assinaturas por meio de webhooks, que mantém os status sincronizados automaticamente.
• Um portal do cliente para atualizar formas de pagamento, visualizar faturas e cancelar assinaturas.

Seja você dono de uma plataforma de assinaturas pagas, uma ferramenta SaaS ou um site de conteúdo premium, essa configuração oferece uma base sólida para monetizar sua aplicação web e fazê-la crescer com o tempo.

Casos de uso da integração com o Stripe

Uma assinatura recorrente é uma das várias formas de cobrar com o Stripe. Dois outros modelos comuns são as compras únicas por item e as doações do tipo “pague o quanto quiser”.

Compras por item

Para itens individuais ou produtos digitais, como e-books ou cursos, o Hostinger Horizons tem uma loja virtual integrada que lida com pagamentos únicos automaticamente, então você não precisa configurar o Stripe por conta própria.

Se preferir fazer isso manualmente, crie um produto para cada item no Stripe e defina um modelo de preço de pagamento único para processar transações individuais.

Depois, anote o ID de preço de cada produto e compartilhe-o com o Hostinger Horizons para que ele atualize o processo de pagamento de cada item. Veja um exemplo de solicitação:

Quero configurar os pagamentos via Stripe para os produtos a seguir. Aqui estão os IDs de preço deles:
price_abc123... para o “Produto 1”
price_xyz789... para o “Produto 2”

Doações e “pague o quanto quiser”

O modelo “pague o quanto quiser” permite que os usuários escolham quanto querem doar, o que é ideal para criadores de conteúdo, organizações sem fins lucrativos e outras aplicações web baseadas em doações.

No Stripe, vai em Links de pagamento → Criar link de pagamento e, em seguida, seleciona Os clientes escolhem quanto pagar como tipo de pagamento. Configura as outras opções e clica em Criar link.

Depois, copia o link gerado e compartilha com o Hostinger Horizons. Para adicionar um botão de doação, usa um texto tipo esse:

Quero adicionar um botão “Apoie-nos” que permita que os usuários contribuam com qualquer valor. Vincule-o ao [link de doação do Stripe].

Melhores práticas de segurança ao usar o Stripe em suas aplicações web

Ao integrar o Stripe em suas aplicações web, siga essas dicas para minimizar vulnerabilidades:

• Nunca exponha chaves secretas no código do front-end. As chaves secretas dão acesso total à sua conta do Stripe, então sempre armazene-as como variáveis de ambiente no lado do servidor, como mostrado na etapa 6.
• Valide as assinaturas dos webhooks no lado do servidor. O Stripe inclui uma assinatura em cada evento de webhook para comprovar sua autenticidade; por isso, use seu STRIPE_WEBHOOK_SECRET para verificá-la antes de processar qualquer evento.
• Use HTTPS para criptografar todos os dados entre os usuários e seu aplicativo. A Hostinger oferece SSL grátis para a sua aplicação web, e a página de checkout do Stripe é servida por HTTPS por padrão.
• Mantenha os ambientes de teste e de produção separados. Ao migrar para a produção, mude para as chaves do modo de produção, atualize os endpoints dos webhooks para as URLs de produção e mantenha os dados de teste separados das transações reais.

Solução de problemas de integração com o Stripe

Mesmo com uma configuração correta, você pode encontrar alguns problemas. Aqui estão os mais comuns e como resolvê-los:

ID de preço ou chaves de API inválidas

Isso acontece quando as chaves do seu projeto não batem com as do seu painel do Stripe.

• Vá em Desenvolvedores → Chaves de API → Chaves padrão para encontrar a chave publicável correta.
• Para IDs de preço, vá para Catálogo de produtos, abra seu produto e clique no ícone de três pontos ao lado do preço.
• Peça à Horizons para atualizar as credenciais com os valores corretos.
• Verifique se há erros de digitação ou espaços a mais.

Webhook não está sendo acionado

Isso acontece quando o Stripe não pode acessar seu endpoint de webhook ou quando o endpoint não está processando os eventos corretamente.

• Verifique se a URL do seu endpoint de webhook está correta em Desenvolvedores → Webhooks.
• Veja as tentativas de webhook em Desenvolvedores → Eventos.
• Teste o webhook usando o testador de webhooks integrado do Stripe na aba Webhooks.
• Certifique-se de que sua variável de ambiente STRIPE_WEBHOOK_SECRET esteja definida corretamente no Horizons.

O status da assinatura não atualiza após o pagamento

Isso acontece quando o webhook não está atualizando o registro do usuário no banco de dados corretamente.

Tira uma captura de tela do problema e descreve o comportamento esperado para o Horizons:

Depois de concluir o fluxo de compra da assinatura, os usuários são redirecionados de volta para o projeto, mas o status da assinatura não é atualizado e os recursos premium não são desbloqueados. Garante que a assinatura seja verificada no retorno e que o usuário tenha acesso imediato aos recursos premium. Identifica e corrige o problema.

Falha no redirecionamento do checkout

Isso ocorre quando as URLs de sucesso e cancelamento não estão configuradas corretamente.

• Verifica se as URLs de sucesso e cancelamento correspondem ao seu domínio real.
• Verifica se há erros no console do navegador durante o redirecionamento.
• Certifica-te de que o domínio na tua sessão do Stripe Checkout corresponda à URL publicada do teu app.

Como criar um site de assinaturas

Um site de assinaturas se baseia no sistema de assinaturas do Stripe que você acabou de configurar, adicionando níveis de assinatura, conteúdo restrito e uma área de membros ao fluxo de cobrança.

A lógica de cadastro, login e assinatura já cuida da parte mais complicada, então o resto se resume basicamente à estrutura do conteúdo e às regras de acesso.

Aqui estão os passos para criar um site de assinaturas:

1. Defina seus níveis de assinatura. Decida quantos níveis você precisa, como um nível gratuito e um ou mais níveis pagos; depois, crie um preço no Stripe para cada um e conecte-o ao seu projeto da mesma forma que conectou seu primeiro produto de assinatura.
2. Restrinja o acesso ao conteúdo por nível. Amplie seu controle de acesso para que cada conteúdo verifique o nível ativo do usuário, e não apenas se ele tem alguma assinatura.
3. Adicione um painel de controle para membros. Ofereça aos membros um lugar único para verem seu nível, acessarem seu conteúdo e abrirem o portal do cliente do Stripe para gerenciar o faturamento.
4. Organize seu conteúdo exclusivo para membros. Agrupe suas páginas premium, downloads ou cursos para que cada nível veja apenas o que pagou.

Todo o conteúdo dos tutoriais deste site segue os rigorosos padrões editoriais e valores da Hostinger.

O autor

Ana Paula

Ana é formada em Línguas Estrangeiras Aplicadas às Negociações Internacionais pela Universidade Estadual de Santa Cruz, na Bahia. Atualmente atua como tradutora após 3 anos na equipe de Customer Success da Hostinger, completando 5 anos de empresa em 2026. Interessada por tecnologia, viagens, cinema e culinária.

Mais de Ana Paula