HandyPay

Como aceitar pagamentos em um site: Um guia completo

Aceitar pagamentos em um site requer integrar um processador de pagamento que lida com as transações de cartão de forma segura. Este guia abrange as abordagens técnicas, etapas de implementação e considerações para adicionar a funcionalidade de pagamento ao seu site.

Quer esteja a construir uma loja de e-commerce, a aceitar donativos ou a recolher pagamentos para serviços, a compreensão das suas opções ajuda-o a escolher a abordagem certa.

Visão geral das opções de pagamento do site

Os sites podem aceitar pagamentos através de vários métodos:

Páginas de pagamento hospedadas redirecionar os clientes para uma página segura de um provedor de pagamento. Após o pagamento, os clientes retornam ao seu site. Isto requer um trabalho técnico mínimo.

Formulários de pagamento incorporados exibir campos de pagamento diretamente em seu site usando a biblioteca JavaScript do provedor. Os dados do cartão são tratados com segurança sem tocar nos seus servidores.

Integração completa API dá controle completo sobre o fluxo de pagamento. Seu servidor se comunica diretamente com o pagamento API para criar e gerenciar transações.

Ligações de pagamento pode ser incorporado em sites como botões ou incluídos em e-mails de confirmação. Os clientes clicam para concluir o pagamento em uma página hospedada.

Cada abordagem envolve trocas entre simplicidade e controle.

Páginas de Pagamento Hosted

Páginas de pagamento hospedadas são a maneira mais simples de aceitar pagamentos em um site.

Como funciona:

  1. Cliente clica em um botão de pagamento em seu site
  2. O cliente é redirecionado para a página hospedada do provedor de pagamento
  3. Cliente entra detalhes do cartão na página hospedada segura
  4. Após o pagamento, o cliente é redirecionado de volta para o seu site
  5. Seu servidor recebe um webhook confirmando o pagamento

Vantagens:

  • Desenvolvimento mínimo necessário
  • O prestador de pagamento lida com todos os requisitos PCI
  • Funciona com qualquer plataforma de website
  • Otimizado para telemóvel por omissão

Desvantagens:

  • Cliente sai do seu site durante o checkout
  • Personalização limitada da aparência da página de pagamento
  • Pode aumentar o abandono do carrinho devido ao redirecionamento

Fases de execução:

  1. Criar uma conta com um provedor de pagamento
  2. Configurar as suas configurações de saída hospedadas
  3. Adicionar um botão de pagamento ou link para o seu site
  4. Configurar redirecionamento URLs para sucesso e cancelamento
  5. Implementar o tratamento do webhook para confirmar pagamentos

Formulários de pagamento incorporados

Formulários de pagamento incorporados mantêm os clientes em seu site enquanto coletam detalhes do cartão com segurança.

Como funciona:

  1. Sua página carrega a biblioteca JavaScript do provedor de pagamento
  2. A biblioteca renderiza campos de entrada seguros para detalhes do cartão
  3. Cliente entra informações do cartão nos campos incorporados
  4. JavaScript tokeniza os dados do cartão com o provedor de pagamento
  5. Seu servidor usa o token para completar o pagamento via API

Vantagens:

  • Cliente fica em seu site
  • Aparência personalizável para combinar com sua marca
  • Melhores taxas de conversão do que redirecionamentos
  • Os dados do cartão nunca tocam nos seus servidores

Desvantagens:

  • Requer integração JavaScript
  • Mais trabalho de desenvolvimento do que páginas hospedadas
  • Deve lidar com vários estados de entrada de cartão e erros

Exemplo de implementação:

<!-- Include the payment provider's JavaScript -->
<script src="https://js.paymentprovider.com/v1/"></script>

<form id="payment-form">
  <div id="card-element">
    <!-- Payment fields render here -->
  </div>
  <button type="submit">Pay</button>
  <div id="error-message"></div>
</form>

<script>
  // Initialize the payment library
  const provider = PaymentProvider("your_public_key");
  const elements = provider.elements();
  const cardElement = elements.create("card");
  cardElement.mount("#card-element");

  // Handle form submission
  document
    .getElementById("payment-form")
    .addEventListener("submit", async (e) => {
      e.preventDefault();

      const { token, error } = await provider.createToken(cardElement);

      if (error) {
        document.getElementById("error-message").textContent = error.message;
      } else {
        // Send token to your server to complete payment
        await fetch("/api/charge", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: token.id, amount: 5000 }),
        });
      }
    });
</script>

Integração completa API

A integração completa API proporciona o máximo controle sobre a experiência de pagamento.

Como funciona:

  1. Seu servidor cria uma intenção de pagamento via API
  2. O API devolve um segredo de cliente para a interface
  3. Sua frontend coleta detalhes do cartão e confirma o pagamento
  4. Seu servidor recebe notificações webhook do status de pagamento
  5. Você atualiza seu banco de dados e cumpre a ordem

Vantagens:

  • Controle completo sobre o fluxo de pagamento
  • Suporte para cenários complexos (assinaturas, mercados)
  • Pode criar experiências de checkout personalizadas
  • Acesso total aos recursos do prestador de pagamento

Desvantagens:

  • Requer um esforço significativo de desenvolvimento
  • Deve lidar com casos de erro e condições de borda
  • Manutenção contínua como APIs evolui

Exemplo de implementação do lado do servidor:

// Create a payment intent on your server
app.post("/api/create-payment", async (req, res) => {
  const { amount, currency, description } = req.body;

  const response = await fetch("https://api.paymentprovider.com/v1/payments", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SECRET_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      amount,
      currency,
      description,
    }),
  });

  const payment = await response.json();

  res.json({
    clientSecret: payment.clientSecret,
    paymentId: payment.id,
  });
});

// Handle webhook notifications
app.post("/api/webhooks", async (req, res) => {
  const signature = req.headers["x-payment-signature"];

  // Verify webhook signature
  const isValid = verifySignature(
    req.body,
    signature,
    process.env.WEBHOOK_SECRET,
  );

  if (!isValid) {
    return res.status(400).send("Invalid signature");
  }

  const event = req.body;

  if (event.type === "payment.succeeded") {
    // Update order status, send confirmation email, etc.
    await fulfillOrder(event.data.paymentId);
  }

  res.json({ received: true });
});

API Gestão de Chaves

A integração segura API requer gerenciamento adequado de chaves.

Chaves públicas (também chamadas de chaves publicáveis) são seguras para incluir no código do lado do cliente. Eles identificam sua conta, mas não podem realizar operações sensíveis.

Chaves secretas deve ser mantido no seu servidor e nunca exposto no código frontend. Eles autenticam pedidos que criam encargos, emitem reembolsos e acessam dados sensíveis.

Melhores práticas:

  • Guardar as chaves secretas nas variáveis de ambiente, não no código
  • Use chaves diferentes para ambientes de teste e produção
  • Rodar as teclas periodicamente e após qualquer compromisso suspeito
  • Restrinja permissões de chave apenas para o que é necessário

Webhook Implementação

Webhooks notificar o seu servidor de eventos de pagamento assincronicamente.

Por que os webhooks importam:

  • Pagamentos podem ter sucesso após o cliente sair do seu site
  • Problemas de rede podem impedir que seu frontend receba confirmação
  • Webhooks fornecer notificação confiável dos resultados do pagamento

Segurança Webhook:

  • Verificar assinaturas do webhook para confirmar a autenticidade
  • Utilizar apenas os parâmetros de avaliação HTTPS
  • Responder rapidamente (dentro de 5 segundos) para evitar intervalos de tempo
  • Implementar a indemnidade para lidar com entregas duplicadas

Eventos comuns do webhook:

  • payment.succeeded - Pagamento concluído com sucesso
  • payment.failed - A tentativa de pagamento falhou
  • payment.refunded - O pagamento foi reembolsado
  • dispute.created - Cliente contestado uma taxa

Considerações sobre segurança

A integração de pagamento no site requer atenção à segurança.

PCI DSS conformidade aplica-se a qualquer cartão de gestão de negócios. Usar páginas de pagamento hospedadas ou formulários incorporados com tokenization minimiza o seu fardo de conformidade.

HTTPS é necessário para qualquer página coletando informações de pagamento. Obter um certificado SSL e configurar o seu servidor para usar HTTPS.

Nunca registe números de cartões ou armazená-los em sua base de dados. Use tokens fornecidos pelo seu processador de pagamento em vez disso.

Validar todas as entradas no cliente e no servidor. Nunca confie em dados da interface sem verificação.

Implemento CSRF sobre os parâmetros de pagamento para evitar ataques de falsificação de pedidos de acesso cruzado.

Testando sua integração

Teste cuidadosamente antes de aceitar pagamentos reais.

Usar o modo de teste fornecido pelo seu processador de pagamento. Teste API chaves processam transações sem mover dinheiro real.

Números dos cartões de teste simular vários cenários:

  • Pagamentos bem sucedidos
  • Cartões recusados
  • Fundos insuficientes
  • Cartões expirados
  • Autenticação segura 3D

Casos de borda de ensaio:

  • Falhas de rede durante o pagamento
  • Cliente que fecha o navegador a meio do pagamento
  • Submissões de formulários duplicados
  • Tratamento de entradas inválido

Escolher um Provedor de Pagamento

Considere estes fatores ao selecionar um provedor:

Cobertura geográfica - O fornecedor apoia os seus mercados-alvo?

Métodos de pagamento suportados - Cartões, carteiras digitais, transferências bancárias?

Preços - Taxas de transacção, custos mensais, taxas de instalação?

Experiência de desenvolvimento - Qualidade da documentação, SDKs, e suporte?

Características - Assinaturas, facturação, apoio ao mercado?

Os fornecedores populares incluem Stripe, PayPal, Square e opções regionais. HandyPay oferece links de pagamento e integração API para empresas do Caribe.

Considerações específicas da plataforma

Diferentes plataformas de sites têm diferentes abordagens de integração.

WordPress/WooCommerce - Usar plugins de gateway de pagamento para uma configuração rápida

Shopify - Processamento de pagamentos incorporado com Shopify Pagamentos

Páginas Web personalizadas - Integração directa API utilizando as abordagens acima

Locais estáticos - Use páginas de pagamento hospedadas ou funções sem servidor para chamadas API

Perguntas frequentes

Preciso de um desenvolvedor para aceitar pagamentos no meu site?

Páginas de pagamento hospedadas requerem habilidade técnica mínima. Formas incorporadas e integração API normalmente requerem assistência de desenvolvedores.

Quanto tempo leva para configurar pagamentos do site?

Páginas hospedadas podem ser operacionais em horas. A integração completa API pode levar dias a semanas, dependendo da complexidade.

Quais são as taxas para aceitar pagamentos on-line?

A maioria dos prestadores cobra 2,5% a 3,5% mais uma taxa fixa por transação. Podem ser disponibilizados descontos de volume.

Meu site PCI é compatível?

Usando páginas hospedadas ou formulários incorporados com tokenization lida com a maioria dos requisitos PCI. Consulte a documentação de conformidade do seu prestador de pagamento.

Posso aceitar pagamentos sem uma entidade empresarial?

Alguns provedores permitem contas individuais. Os requisitos variam de acordo com o fornecedor e a jurisdição.

Como faço para lidar com reembolsos?

A maioria dos pagamentos APIs incluem os objetivos de reembolso. As restituições normalmente devolvem fundos ao método de pagamento original dentro de 5-10 dias úteis.

Guias Relacionados

Ligações de pagamento vs Gateways de pagamento
Como aceitar pagamentos na Jamaica
Como aceitar pagamentos em Trinidad
Como aceitar pagamentos na Guiana