Como Integrar um Gateway de Pagamento e Checkout ao seu Site Estático

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.

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

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.

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.

   

4. Copie o Client ID da seção de API credentials para depois criar um botão de checkout 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.

   

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.

   

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

   

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.

   

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.

   

7. Clique em Create link.

   

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

   

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.

   

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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 ;).

• LinkedIn