{"id":66663,"date":"2024-02-06T14:39:41","date_gmt":"2024-02-06T17:39:41","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=66663&preview=true&preview_id=66663"},"modified":"2024-02-08T05:36:02","modified_gmt":"2024-02-08T08:36:02","slug":"integracao-do-gateway-de-pagamento","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/integracao-do-gateway-de-pagamento\/","title":{"rendered":"Como Integrar um Gateway de Pagamento e Checkout ao seu Site Est\u00e1tico"},"content":{"rendered":"

No passado, os sites est\u00e1ticos geralmente apresentavam imagens e descri\u00e7\u00f5es de produtos, levando os clientes a fazer pedidos por e-mail ou telefone. Hoje, no entanto, os clientes esperam uma experi\u00eancia mais din\u00e2mica com funcionalidades robustas de eCommerce. Isso simplifica o processo de compra, incentivando os usu\u00e1rios a concluir as transa\u00e7\u00f5es no seu site em vez de explorar as op\u00e7\u00f5es dos concorrentes.<\/p>\n

Adicionar um gateway de pagamento e checkout ao seu site est\u00e1tico \u00e9 bastante simples. As interfaces de programa\u00e7\u00e3o de aplicativos (APIs) e as arquiteturas sem servidor permitem que voc\u00ea incorpore recursos de eCommerce em sites est\u00e1ticos<\/a>, possibilitando que sua empresa aceite transa\u00e7\u00f5es diretamente.<\/p>\n

Este tutorial explora a adi\u00e7\u00e3o dos gateways de pagamento PayPal e Stripe<\/a> ao site est\u00e1tico de uma loja de entrega de flores. Siga as etapas para saber como adicionar essas fun\u00e7\u00f5es ao seu site e abrir novas oportunidades para impulsionar as vendas on-line.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Primeiros passos<\/h2>\n

Antes de avan\u00e7armos nos passos para integrar um gateway de pagamento e checkout ao seu site est\u00e1tico, vamos estabelecer a base para uma execu\u00e7\u00e3o tranquila e bem-sucedida.<\/p>\n

    \n
  1. Baixe e implemente este exemplo de c\u00f3digo de site est\u00e1tico<\/a> na hospedagem de site est\u00e1tico da Kinsta<\/a>.<\/li>\n
  2. Registre-se em uma conta do PayPal<\/a>, optando por uma conta comercial, pois ela \u00e9 mais adequada para este tutorial. Esse tipo de conta \u00e9 necess\u00e1rio para testar os bot\u00f5es que voc\u00ea integrar. Depois de se inscrever, adicione suas informa\u00e7\u00f5es comerciais e vincule uma conta banc\u00e1ria. Ap\u00f3s a verifica\u00e7\u00e3o da sua conta, voc\u00ea poder\u00e1 obter credenciais de API no portal do desenvolvedor do PayPal<\/a> para uso posterior.<\/li>\n
  3. Crie uma conta do Stripe<\/a>, inserindo seus dados comerciais e banc\u00e1rios. O Stripe oferece ativa\u00e7\u00e3o r\u00e1pida da conta, o que \u00e9 vantajoso para este projeto. Quando sua conta estiver ativa, voc\u00ea poder\u00e1 acessar imediatamente o painel do Stripe<\/a>. \u00c9 aqui que voc\u00ea recupera sua chave de API, um componente crucial necess\u00e1rio nas etapas subsequentes.<\/li>\n<\/ol>\n

    Analise o site est\u00e1tico de amostra<\/h3>\n

    Este tutorial usa um site est\u00e1tico pr\u00e9-existente para mostrar a integra\u00e7\u00e3o dos recursos de checkout do PayPal e do Stripe. Apesar de seu conte\u00fado est\u00e1tico, o site de amostra imita uma floricultura on-line.<\/p>\n

    A infraestrutura de hospedagem de site est\u00e1tico da Kinsta<\/a> fornece um ambiente eficiente para implantar e testar os recursos de checkout do PayPal e do Stripe para criar um site est\u00e1tico mais sofisticado e envolvente.<\/p>\n

    Depois de implantar seu site na Kinsta, v\u00e1 para a p\u00e1gina inicial. Clique no bot\u00e3o ORDER INQUIRY<\/strong>.<\/p>\n

    \"Exemplo
    Exemplo de p\u00e1gina inicial do site com um bot\u00e3o ORDER INQUIRY<\/strong>.<\/figcaption><\/figure>\n

    Selecione um produto dispon\u00edvel na p\u00e1gina do cat\u00e1logo de flores<\/strong> – a rosa turca.<\/p>\n

    \"Exemplo
    Exemplo de p\u00e1gina de cat\u00e1logo do site com v\u00e1rias op\u00e7\u00f5es de flores.<\/figcaption><\/figure>\n

    Essa a\u00e7\u00e3o leva voc\u00ea \u00e0 p\u00e1gina de detalhes do produto, onde os bot\u00f5es de pagamento do PayPal e do Stripe est\u00e3o implementados.<\/p>\n

    \"Exemplo
    Exemplo de p\u00e1gina de produto do site.<\/figcaption><\/figure>\n

    Como integrar o checkout do PayPal em seu site est\u00e1tico<\/h2>\n

    A adi\u00e7\u00e3o de um checkout do PayPal oferece aos seus clientes um m\u00e9todo de pagamento seguro e confi\u00e1vel e simplifica o processo de transa\u00e7\u00e3o, aprimorando a experi\u00eancia do usu\u00e1rio. Essa integra\u00e7\u00e3o pode aumentar significativamente a funcionalidade do seu site e a satisfa\u00e7\u00e3o do cliente.<\/p>\n

    Veja como integrar o checkout do PayPal em seu site est\u00e1tico:<\/p>\n

      \n
    1. Fa\u00e7a login no Painel do desenvolvedor do PayPal<\/a>.<\/li>\n
    2. No painel, navegue at\u00e9 a se\u00e7\u00e3o Apps & Credentials<\/strong>. Ative o modo Sandbox<\/strong> e clique em Create App<\/strong>.<\/li>\n
    3. No formul\u00e1rio, d\u00ea um nome ao seu aplicativo (por exemplo, Kinsta Gateway Demo). Selecione Merchant<\/strong>\u00a0como o tipo e clique em Create App<\/strong>.\n

      \"Formul\u00e1rio
      Formul\u00e1rio Criar aplicativo do PayPal.<\/figcaption><\/figure><\/li>\n
    4. Copie o Client ID<\/strong> da se\u00e7\u00e3o de API credentials<\/strong>\u00a0para depois criar um bot\u00e3o de checkout do PayPal.\n

      \"Credenciais
      Credenciais do aplicativo do PayPal.<\/figcaption><\/figure><\/li>\n
    5. Role para baixo na p\u00e1gina do aplicativo para revisar outras configura\u00e7\u00f5es. Os padr\u00f5es est\u00e3o corretos para este tutorial. Clique em Save Changes<\/strong>.\n

      \"Recursos
      Recursos do aplicativo do PayPal.<\/figcaption><\/figure><\/li>\n
    6. Em seguida, integre o checkout do PayPal em seu site est\u00e1tico. Crie um bot\u00e3o de checkout usando o SDK JavaScript de m\u00e9todo de pagamento alternativo (APM)<\/a> do PayPal. Ele permite que voc\u00ea integre v\u00e1rios m\u00e9todos de pagamento em um site est\u00e1tico sem configurar um aplicativo de backend. Adicione o seguinte c\u00f3digo JavaScript ao arquivo product.html<\/strong> logo antes da tag de fechamento <\/body><\/code>. Substitua YOUR_CLIENT_ID<\/code> pelo seu ID de cliente do PayPal. Voc\u00ea tamb\u00e9m pode precisar substituir a moeda USD<\/code> pela moeda que sua conta do PayPal aceita.\n
      <!-- PAYPAL BUTTON SCRIPT-->\n<script    \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID¤cy=USD\"   \ndata-sdk-integration-source=\"button-factory\"><\/script>\n<script>\npaypal.Buttons({\n\tcreateOrder: function(data, actions) {\n\t\/\/ Set up the transaction\n\treturn actions.order.create({\n\t\tpurchase_units: [{\n\t\tamount: {\n\t\t\tvalue: '1.00'\n\t\t}\n\t\t}]\n\t});\n\t},\n\tonApprove: function(data, actions) {\n\t\/\/ Capture the funds from the transaction\n\treturn actions.order.capture().then(function(details) {\n\t\t\/\/ Show a success message to the buyer\n\t\talert('Transaction completed by ' + details.payer.name.given_name);\n\t});\n\t}\n}).render('#paypal-button-container');\n<\/script>\n<!-- PAYPAL BUTTON SCRIPT--><\/code><\/pre>\n
      A fun\u00e7\u00e3o paypal.Buttons<\/code> define duas fun\u00e7\u00f5es:<\/p>\n