No passado, os sites estáticos geralmente apresentavam imagens e descrições de produtos, levando os clientes a fazer pedidos por e-mail ou telefone. Hoje, no entanto, os clientes esperam uma experiência mais dinâmica com funcionalidades robustas de eCommerce. Isso simplifica o processo de compra, incentivando os usuários a concluir as transações no seu site em vez de explorar as opções dos concorrentes.

Adicionar um gateway de pagamento e checkout ao seu site estático é bastante simples. As interfaces de programação de aplicativos (APIs) e as arquiteturas sem servidor permitem que você incorpore recursos de eCommerce em sites estáticos, possibilitando que sua empresa aceite transações diretamente.

Este tutorial explora a adição dos gateways de pagamento PayPal e Stripe ao site estático de uma loja de entrega de flores. Siga as etapas para saber como adicionar essas funções ao seu site e abrir novas oportunidades para impulsionar as vendas on-line.

Primeiros passos

Antes de avançarmos nos passos para integrar um gateway de pagamento e checkout ao seu site estático, vamos estabelecer a base para uma execução tranquila e bem-sucedida.

  1. Baixe e implemente este exemplo de código de site estático na hospedagem de site estático da Kinsta.
  2. Registre-se em uma conta do PayPal, optando por uma conta comercial, pois ela é mais adequada para este tutorial. Esse tipo de conta é necessário para testar os botões que você integrar. Depois de se inscrever, adicione suas informações comerciais e vincule uma conta bancária. Após a verificação da sua conta, você poderá obter credenciais de API no portal do desenvolvedor do PayPal para uso posterior.
  3. Crie uma conta do Stripe, inserindo seus dados comerciais e bancários. O Stripe oferece ativação rápida da conta, o que é vantajoso para este projeto. Quando sua conta estiver ativa, você poderá acessar imediatamente o painel do Stripe. É aqui que você recupera sua chave de API, um componente crucial necessário nas etapas subsequentes.

Analise o site estático de amostra

Este tutorial usa um site estático pré-existente para mostrar a integração dos recursos de checkout do PayPal e do Stripe. Apesar de seu conteúdo estático, o site de amostra imita uma floricultura on-line.

A infraestrutura de hospedagem de site estático da Kinsta fornece um ambiente eficiente para implantar e testar os recursos de checkout do PayPal e do Stripe para criar um site estático mais sofisticado e envolvente.

Depois de implantar seu site na Kinsta, vá para a página inicial. Clique no botão ORDER INQUIRY.

Exemplo de página inicial do site com um botão ORDER INQUIRY.
Exemplo de página inicial do site com um botão ORDER INQUIRY.

Selecione um produto disponível na página do catálogo de flores – a rosa turca.

Exemplo de página de catálogo do site com várias opções de flores.
Exemplo de página de catálogo do site com várias opções de flores.

Essa ação leva você à página de detalhes do produto, onde os botões de pagamento do PayPal e do Stripe estão implementados.

Exemplo de página de produto do site.
Exemplo de página de produto do site.

Como integrar o checkout do PayPal em seu site estático

A adição de um checkout do PayPal oferece aos seus clientes um método de pagamento seguro e confiável e simplifica o processo de transação, aprimorando a experiência do usuário. Essa integração pode aumentar significativamente a funcionalidade do seu site e a satisfação do cliente.

Veja como integrar o checkout do PayPal em seu site estático:

  1. Faça login no Painel do desenvolvedor do PayPal.
  2. No painel, navegue até a seção Apps & Credentials. Ative o modo Sandbox e clique em Create App.
  3. No formulário, dê um nome ao seu aplicativo (por exemplo, Kinsta Gateway Demo). Selecione Merchant como o tipo e clique em Create App.

    Formulário Criar aplicativo do PayPal.
    Formulário Criar aplicativo do PayPal.

  4. Copie o Client ID da seção de API credentials para depois criar um botão de checkout do PayPal.

    Credenciais do aplicativo do PayPal.
    Credenciais do aplicativo do PayPal.

  5. Role para baixo na página do aplicativo para revisar outras configurações. Os padrões estão corretos para este tutorial. Clique em Save Changes.

    Recursos do aplicativo do PayPal.
    Recursos do aplicativo do PayPal.

  6. Em seguida, integre o checkout do PayPal em seu site estático. Crie um botão de checkout usando o SDK JavaScript de método de pagamento alternativo (APM) do PayPal. Ele permite que você integre vários métodos de pagamento em um site estático sem configurar um aplicativo de backend. Adicione o seguinte código JavaScript ao arquivo product.html logo antes da tag de fechamento </body>. Substitua YOUR_CLIENT_ID pelo seu ID de cliente do PayPal. Você também pode precisar substituir a moeda USD pela moeda que sua conta do PayPal aceita. 
    <!-- PAYPAL BUTTON SCRIPT-->
<script    
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
	createOrder: function(data, actions) {
	// Set up the transaction
	return actions.order.create({
		purchase_units: [{
		amount: {
			value: '1.00'
		}
		}]
	});
	},
	onApprove: function(data, actions) {
	// Capture the funds from the transaction
	return actions.order.capture().then(function(details) {
		// Show a success message to the buyer
		alert('Transaction completed by ' + details.payer.name.given_name);
	});
	}
}).render('#paypal-button-container');
</script>
<!-- PAYPAL BUTTON SCRIPT-->

    A função paypal.Buttons define duas funções:

    • createOrder – Configura os detalhes da transação, como o valor da compra (1,00 USD, neste caso).
    • onApprove – Trata da aprovação da transação, capturando os fundos e exibindo uma mensagem de sucesso para o comprador. No código acima, estamos usando a função alert().

    Por fim, a função render especifica que o botão do PayPal deve ser renderizado dentro do site <div> existente com o ID paypal-button-container.

    Agora você tem o PayPal integrado ao seu site estático.

Como integrar o Stripe Checkout em seu site estático

O Stripe é uma plataforma tecnológica amplamente utilizada que oferece soluções de processamento de pagamentos para empresas de todos os tamanhos. Veja como você pode adicionar o pagamento do Stripe ao seu site estático:

  1. Antes de adicionar o botão de checkout do Stripe, você pode gerenciar produtos e preços por meio de uma API ou do painel do Stripe. Para usar o painel, selecione o Test mode e clique em Product Catalog.

    Página do catálogo de produtos do Stripe.
    Página do catálogo de produtos do Stripe.

  2. Clique no botão + Add Product para abrir o formulário Add a product.

    Página Add a product do Stripe.
    Página Add a product do Stripe.

  3. Digite os detalhes do seu produto nos campos a seguir:
    • Nome: Rosa turca
    • Descrição: Essa é uma linda rosa turca
    • Imagem: (Faça o upload da amostra imagesturkishrose.png)
    • Modelo de pagamento: Único
    • Valor: $1.00
    • Moeda: USD (ou a moeda que você escolher)
  4. Clique em Add product.
  5. Na lista da página Product catalog, selecione o produto Turkish Rose.

    Detalhes do catálogo de produtos Stripe.
    Detalhes do catálogo de produtos Stripe.

  6. Na seção de preços dos produtos, clique em Create payment link. Revise as opções do produto e verifique se a quantidade é 1.

    Detalhes do produto Stripe para a rosa turca.
    Detalhes do produto Stripe para a rosa turca.

  7. Clique em Create link.

    Detalhes de pagamento do produto Stripe.
    Detalhes de pagamento do produto Stripe.

  8. Na página PAYMENT LINK, clique no botão Buy.

    Detalhes da página do LINK DE PAGAMENTO do Stripe.
    Detalhes da página do LINK DE PAGAMENTO do Stripe.

  9. Quando o painel do botão Buy for exibido, você poderá visualizar o código gerado para o botão de checkout. Escolha o layout do botão, ative a opção Change button text e digite “Buy with Stripe” no botão Change. Em seguida, clique em Save changes and copy code para copiar o código gerado para a área de transferência do seu sistema operacional.

    Formulário do Stripe para você criar um botão de compra.
    Formulário do Stripe para você criar um botão de compra.

  10. Cole o código copiado no arquivo product.html do código de amostra antes da tag de fechamento </body> (entre os comentários STRIPE BUTTON BEGIN e STRIPE BUTTON END ), semelhante ao PayPal. 
    <!-- STRIPE BUTTON BEGIN -->
<script> async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button>
  buy-button-id="BUY_BUTTON_ID"
  publishable-key="PUBLISHABLE_KEY"
>
</stripe-buy-button>
<!-- STRIPE BUTTON END -->

Quando você tiver concluído a implementação dos botões de checkout do PayPal e do Stripe, implante o código do site estático no ambiente de hospedagem de sites estáticos da Kinsta.

Teste o processo de checkout

Abra a página de detalhes do produto do site de demonstração estático. Verifique se os botões do PayPal e do Stripe são exibidos corretamente.

Exemplo de página de produto do site com botões de checkout para PayPal e Stripe.
Exemplo de página de produto do site com botões de checkout para PayPal e Stripe.

Clique no botão de checkout do PayPal. Ele deve abrir uma caixa de diálogo de login na qual o cliente se autenticará no PayPal para fazer a compra.

Fluxo do PayPal com opções para fazer login ou registrar-se.
Fluxo do PayPal com opções para fazer login ou registrar-se.

Se você encontrar problemas de login nesse estágio, isso pode ser devido ao teste com uma conta pessoal em vez de uma comercial.

Como alternativa, os clientes podem escolher o botão Debit ou Credit Card do PayPal. Clique nessa opção para exibir a caixa de diálogo. Digite alguns detalhes da conta.

Você verá o fluxo do PayPal com opções para usar um cartão de débito ou de crédito.
Você verá o fluxo do PayPal com opções para usar um cartão de débito ou de crédito.

O PayPal deverá apresentar os detalhes do pedido e da conta. Clique em Complete Purchase.

Você verá o fluxo do PayPal com a confirmação da compra.
Você verá o fluxo do PayPal com a confirmação da compra.

Quando o PayPal aprova a transação, o código JavaScript do cliente exibe um alerta informando a você que a transação foi concluída. Esse alerta é para fins de desenvolvimento e depuração – você não deve usá-lo no código de produção.

Fluxo do PayPal com um alerta de conclusão de transação.
Fluxo do PayPal com um alerta de conclusão de transação.

Para verificar essa transação, abra o painel do PayPal for Business. Clique em Activity > All Transactions para exibir uma lista detalhada de todas as transações recentes.

Detalhes da transação comercial do PayPal.
Detalhes da transação comercial do PayPal.

Na página product.html do site de flores, você também pode testar o fluxo de checkout do Stripe clicando no botão Buy with Stripe. Essa ação aciona a caixa de diálogo do Stripe que contém os detalhes do produto e as opções de pagamento, incluindo Google Pay, Link e pagamentos com cartão de crédito.

Opções de pagamento do Stripe.
Opções de pagamento do Stripe.

Para fins de demonstração, escolha Google Pay. Uma caixa de diálogo pedirá que você confirme a compra usando o Google Pay com um cartão da sua lista, como um Mastercard salvo.

Fluxo do Stripe quando você usa o Google Pay.
Fluxo do Stripe quando você usa o Google Pay.

Clique em PAY. Se bem-sucedido, o Stripe apresenta ao cliente a confirmação da compra.

Confirmação de compra do Stripe.
Confirmação de compra do Stripe.

No painel do Stripe, abra a aba Payments. Ela mostra os detalhes da transação concluída, incluindo o valor, moeda, descrição, cliente e data.

Página de detalhes de pagamento do Stripe.
Página de detalhes de pagamento do Stripe.

Como solucionar problemas no processo de checkout

Aqui estão algumas etapas de solução de problemas para diagnosticar e resolver erros encontrados durante o teste de checkout:

  • Corrija a configuração do gateway de pagamento.
  • Valide seu certificado SSL.
  • Verifique a compatibilidade do navegador do cliente.
  • Aplique o tratamento adequado de erros.
  • Teste o processo de checkout em vários ambientes.
  • Use técnicas de registro e monitoramento.

Resumo

Você acabou de integrar botões de checkout para os gateways de pagamento PayPal e Stripe em um exemplo de loja de flores on-line, hospedada na Kinsta. Essas técnicas também podem ser aplicadas para adicionar opções de pagamento em outros sites estáticos, motivando os clientes a adquirirem seus produtos e impulsionando as vendas.

O serviço de hospedagem de site estático da Kinsta oferece um ambiente perfeito para desenvolvedores explorarem o dinâmico universo do eCommerce e da integração de pagamentos. Sua infraestrutura robusta garante carregamento rápido das páginas, apoiando uma experiência de compra on-line suave.

Juntamente com o serviço de hospedagem de sites estáticos, a Kinsta também oferece um serviço de hospedagem de aplicativos projetado para aplicativos mais dinâmicos, como aplicativos web que precisam de processamento no lado do servidor, interações de banco de dados e outras funcionalidades complexas.

Transforme seu site estático em uma experiência mais dinâmica incorporando gateways de pagamento, como PayPal e Stripe. Você tem preferência por algum outro serviço ou possui experiência com algum? Compartilhe conosco nos comentários abaixo.

Jeremy Holcombe Kinsta

Editor de Conteúdo & Marketing na Kinsta, Desenvolvedor Web WordPress e Escritor de Conteúdo. Fora do universo WordPress, eu curto praia, golfe e filmes. Também enfrento problemas de gente alta ;).