Botão do PagSeguro no Wix: veja 2 formas de adicionar

Vi a necessidade de fazer um tutorial de como inserir um botão do PagSeguro num site Wix, depois que um usuário entrou em contato comigo querendo justamente saber como ele deveria fazer isso.

Fiz uma pesquisa e notei que existem 2 maneiras de adicionar o botão, para ambos os casos, será necessário editar códigos, mas não é nada demais, pelo contrário, é bem simples.

O Wix ainda não possui integração com o PagSeguro, ou seja, ainda não é possível adicionar um botão diretamente pelo editor, usando suas ferramentas.

Um botão do PagSeguro é aquele em que você define um valor para o produto, onde o cliente, ao clicar, fará toda a transação dentro do ambiente do PagSeguro, inclusive o cálculo do frete, se houver.

É preciso seguir os passos abaixo para adicionar botão do PagSeguro.

1. Acesse sua conta no PagSeguro usando este link.

2. Informe seu email e senha (Se você ainda não tem uma conta, clique para criar).

3. Em ‘Botões de Pagamento‘, role a página até as configurações de aparência.

4. Configure o botão de pagamento:

botão do pagseguro no wix

Obs: Marcando a opção ‘A quantidade de itens…’, o cliente não poderá mudar a quantidade de itens.

5. Personalize sua aparência:

6. Mais abaixo, selecione a opção ‘Padrão‘ (não escolha Lightbox). Em seguida, clique em ‘Gerar botão‘:

Editando o código – Método 1a (a quantidade de itens pode ser alterada)

Vejamos a primeira maneira de editar o botão, mostrada pelo próprio PagSeguro, que será a de MONTAR uma URL do botão.

Atenção: essa forma não mantém o botão original do PagSeguro e é válida apenas para quando a opção ‘A quantidade de itens…) estiver DESMARCADA.

7. No código que acabou de ser gerado, localize a seção ‘form action‘ e COPIE a URL como é mostrado na imagem:

Obs: Copie somente o que está dentro das aspas (seleção azul).

8. Feito isso, entre no Editor Wix, clique em ‘Adicionar>>Botões e Menus>>Botão‘:

9. Em ‘Link para‘, clique em ‘Endereço da Web’ e COLE a URL que você acabou de copiar:

10. Agora copie o código de ligação abaixo e COLE no final dessa mesma URL, ainda dentro do endereço web:

&itemCode=

11. Feito isso, volte ao PagSeguro e copie o valor que está dentro da seção VALUE:

12. Cole esse valor ao final da URL que estamos montando, ao lado do código de ligação:

13. Agora basta clicar em ‘OK’ para validar.

Veja que para montar a URL foram necessárias 3 etapas:

  • Copiar a URL do botão no PagSeguro;
  • Copiar o código de ligação ‘&itemCode=’ e colar no final da URL do botão;
  • Copiar o valor do botão e colar também na final da URL, já com o código de ligação inserido.

No final, a URL inteira deverá ficar semelhante a esta:

https://pagseguro.uol.com.br/checkout/v2/cart.html?action=add&itemCode=24F2ABC19595399AA43AAFA2957D2560

Importante: essa URL não precisa ser montada apenas para um botão, você pode adicioná-la à um link de imagem ou mesmo a um link de texto, sempre escolhendo a opção ‘Endereço da Web‘.

Editando o código – Método 1b (a quantidade de itens NÃO poderá ser alterada)

Para quem não deseja permitir que os clientes mudem a quantidade de itens do carrinho, a edição do código deve ser feita da seguinte maneira:

  • Marque a opção ‘A quantidade de itens do carrinho não poderá ser alterada‘ e gere o botão:

  • Do mesmo modo que foi feito no Método 1a, copie a URL do campo ‘form action‘, como mostra a imagem abaixo:

Lembre-se de copiar somente o que está em azul, entre aspas.

  • Cole essa URL dentro do link do botão, como mostra o passo 8 do Método 1a.
  • Copie o novo código de ligação abaixo e cole-a no final da URL anterior:
?&Code=
  • Volte ao PagSeguro e copie o valor que se encontra dentro do campo ‘value‘, que está entre aspas (seleção azul):

  • Cole esse código ao final da URL que está sendo montada, como mostra o passo 12 do Método 1a.

No final, a URL inteira deverá ficar semelhante a esta:

https://pagseguro.uol.com.br/checkout/v2/payment.html?&Code=E95FB80CDEDE644FF4F84FAA69D406E9

Vejamos uma 2ª maneira de adicionar o botão do PagSeguro:

Editando o código – Método 2

14. Depois de clicar no botão ‘Gerar botão‘, um código será exibido. Selecione e copie todo esse código:

15. COLE esse código dentro de um app HTML no Wix (note que, ao atualizar, o botão já aparece) :

Mas ainda não está terminado.

16. Dentro do código, localize a seção method=”post” e AO LADO desse código, adicione o comando abaixo (copie e cole):

target="_blank"

Ficará assim:

Isso fará com que a janela de pagamento seja aberta em uma nova guia.

17. Clique em atualizar para finalizar o botão.

Faça o teste e veja se a janela está abrindo em outra aba.

Conclusão

Como disse mais acima, através do Método 1, é possível montar a URL em um botão, imagem ou texto, portanto que o link seja ‘Endereço da Web‘. Em vista disso, separei algumas imagens que você poderá usar pra criar seu botão do PagSeguro.

Clique aqui para baixar o pacote (todas as imagens estão no formato .gif).

Após fazer o download, descompacte o arquivo ZIP e envie a imagem para seu site. Feito isso, adicione a ela um link de ‘Endereço da Web’ e monte a URL conforme vimos no Método 1.

É isso!

Qualquer dúvida, comente. 😉

Saiba mais sobre este projeto, aqui.

31 comentários para “Botão do PagSeguro no Wix: veja 2 formas de adicionar”

  1. Por Egberton

    Responder

  2. Por Diego

    Responder

  3. Por cris

    Responder

    • Por Gabriel Martins

      Responder

  4. Por vinicius

    Responder

    • Por Gabriel Martins

      Responder

  5. Por Danielle

    Responder

  6. Por Wadson

    Responder

    • Por Gabriel Martins

      Responder

  7. Por suehd

    Responder

  8. Por luis varella

    Responder

    • Por Gabriel Martins

      Responder

      • Por luis varella

        Responder

  9. Por Leopoldina

    Responder

    • Por Gabriel Martins

      Responder

  10. Por Ariane

    Responder

    • Por Gabriel Martins

      Responder

  11. Por AntonioS Silva

    Responder

    • Por Gabriel Martins

      Responder

  12. Por fiore

    Responder

    • Por Gabriel Martins

      Responder

      • Por Fiore

        Responder

        • Por Gabriel Martins

      • Por Fiore

        Responder

        • Por Gabriel Martins

  13. Por Thais

    Responder

    • Por Gabriel Martins

      Responder

  14. Por Otavio Pioto

    Responder

    • Por Gabriel Martins

      Responder

  15. Responder

    • Por Gabriel Martins

      Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

X

65 milhões de pessoas, ONGs e empresas já criaram seus sites no Wix. Crie o seu AQUI

¤
Leia mais:
concessionarias-de-carros-usados
Como criar site de Concessionária de Carros

Fechar