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 e Link de Pagamento‘, role a página até as configurações de aparência.

4. Configure o botão de pagamento:

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ão‘.

9. Clique sobre o botão. Vá no ícone de link e 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=

Exemplo:

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:

  1. Copiar a URL do botão no PagSeguro;
  2. Copiar o código de ligação ‘&itemCode=’ e colar no final da URL do botão;
  3. Copiar o valor (value) 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 novamente 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. 😉

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

  1. tem como o cliente comprar por cartao sem ter uma conta no pagseeguro.?
    o cliente quer passar o cartao e pronto….e nao cadastrar no site…depois fazer uma outra conta pagseguro?

    Responder
  2. Ola, fiz too o processo corretamente, mais o botão que coloquei em um produtor, aparece em todos, gostaria de saber porque ocorre isso, mesmo colocando uma imagem, ocorre o mesmo problema, desde já obrigado.

    Responder
      • ola, vc não respondeu a pergunta do cara…estou com essa mesma duvida! O sistema do pagseguro já é utilizado..pronto..agora queremos saber a resposta da pergunta ai acima..EU QUERO CRIAR O BOTÃO ENTENDE…COM O LIGHTBOX….mas como faz?abs

        Responder
        • Boa tarde,
          Não é possível criar botão com lightbox no Wix, pois ele abrirá uma janela dentro do site e deixará tudo confuso. Se quer saber como criar um botão normal, veja este vídeo.
          Para sites com muitos produtos para vender, o recomendado é criar uma loja virtual. Criar botão de pagseguro não é para lojas virtuais, mas apenas para vender alguns produtos ou serviços específicos.
          Abraço.

  3. Ola. Gostaria saber como integrar o URL do frente na URL já montada.
    Fiz exatamentee como explicou e deu certo, mas não consigo adicionar o frete.
    grata

    Responder
  4. Gabriel me da uma ajuda por favor!

    Eu ativei o PagSeguro e esta ok, agora eu precisava saber de duas coisas.

    1- Eu preciso pelo wix adicionar a taxa do PagSeguro certo? Porque eles não colocam esse valor mas vão me cobrar depois, correto?

    2-Após a pessoa pagar pelo wix usando Pagseguro, quais informações daquela pessoa eu vou receber? Porque eu precisava de um controle de pelo menos *nome *identidade *e-mail.
    Pra enviar um QR code para cada compra.

    Cara se você conseguir sanar minhas dúvidas vou agradecer imensamente! Valeu!

    Responder
    • Olá Luís,
      Essa taxa do Pagseguro é cobrado dos lojistas, mas se você deseja repassar esse valor para o cliente, então teria sim que adicionar a taxa no Wix.
      Sobre as informações, não sei te dizer ao certo. Você pode ver com o Suporte do Wix quais informações são mostradas.
      Abraço.

      Responder
      • é acabei de fazer um teste, no proprio pag seguro vem o email da pessoa nome telefone e endereço. Assim vou ter um ótimo controle.
        E eles cobram 5%, bastante! Mas valeu pela ajuda, um bom dia

        Responder
  5. Boa tarde!

    Estou tentando fazer a integração com o Wix epagseguro, mas não encontrei nenhuma ajuda que realmente relatasse o procedimento a ser seguido.
    Meu plano e ecommerce, e gostaria de usar o pagseguro, tenho que criar um botão para cada item do meu site?, ou posso fazer uma única integração?

    Como preceder?

    Espero que possa me ajudar
    Agradeço!

    Responder
    • Olá Ariane,
      Você não precisa criar um botão por vez, pois já possui um plano ecommerce, basta fazer a configuração do pagseguro em sua loja virtual. Mais detalhes aqui.
      Abraço.

      Responder
  6. Qual a linha de comando para se colocar o botão de assinaturas linkado a um botão?
    URL DO CAMPO ACTION: tps://pagseguro.uol.com.br/v2/pre-approvals/request.html
    value=”010150AC313176E994BABFACF671739B”

    QUAL SERÁ A URL FINAL, POIS NAS SUAS EXPLICAÇÕES ACIMA O CAMPO ACTION DIFERE PARA CRIADOR DE BOTÕES PAGSEGURO ASSINATURAS.

    GRATO PELA ATENÇÃO.

    Responder
  7. Ola preciso entao criar um botao de pagseguro para cada item? entao no Wix cada item tera que ter um botao configurado, para cada item, com cada codigo diferente gerado no Pagseguro?

    Responder
    • Olá Fiore,
      Se você não quiser usar a Loja Online do Wix, então terá sim, que criar cada botão separadamente. Porém, no plano eCommerce do Wix existe essa configuração automática, pois o Wix possui integração com o pagseguro.
      Abraço.

      Responder
      • Ola Gabriel,
        Meu plano e premium….eu criei um botao comprar para cada item, porem agora o problema e que minha loja tem por ex paginas e na pag 1 eu criei um botao “comprar” para cada item e quando vou para a pagina 2 os mesmos botoes com mesmos links repetem e se eu edito o codigo na pag 2 o produto que eu configurei na pagina 1 altera. Como posso fazer para conseguir alterar isso? Ou, tendo meu plano premium como eu faco para usar essa configuracao automatica no WIX?
        grata

        Responder
        • Olá Fiore,
          Contrate um plano eCommerce e use o Pagseguro como forma de pagamento de seus produtos, a configuração será automática.
          Abraço.

  8. Ola, estou tentando fazer o botão, eu coloco o botão em cada item? ou tem como criar um botão no carrinho do site que ele soma tudo mais frete e ai sim ele cobra?

    Responder
    • Olá Thais,
      Perceba que o Wix não possui integração com esse tipo de botão do PagSeguro. Sendo assim, essa solução apresentada é para criar botões individuais, para venda direta de um produto, não servindo para um sistema de ecommerce. Respondendo a pergunta, você teria sim que criar um botão para cada item.

      Responder
  9. Gostei bastante do primeiro método até mesmo dá para fornecer diretamento o link ao comprador. Mas tem um problema…
    Eu notei que quando você seleciona a opção de NÃO mudar a quantidade de itens essa montagem de código não funciona… Na parte do HTML form action acaba sendo subtraído a parte ‘?action=add’. Já tentei incluí-la no link mas mesmo assim não funciona .
    Gostaria que desse uma olhada, se possível, e conseguisse me fornecer um meio de montar e fazer o link funcionar com a caixa de não mudar a quantidade de itens ativa.
    Mesmo assim muito obrigado pela ajuda desse post, é de grande proveito !

    Responder
    • Olá Otávio,
      Você estava correto, o método não estava funcionando para a opção de não mudar quantidades. Eu alterei o código e atualizei o post. Peço que dê uma olhada no Método 1b, com uma nova montagem de link, porém bem semelhante ao método 1a.
      Espero que consiga concluir a edição.
      Abraço e obrigado por comentar!

      Responder
  10. Olá, Gabriel Martins

    Como sempre acompanhando seus tutoriais.
    Para o uso do botão PAG SEGURO, pergunto se só é possível quando o site do wix é do tipo
    e commerce. O meu site não é ecommerce, mas gostaria de usar o botão pag seguro para quando meus clientes realizar o pedido por telefone, ele mesmo poderia entrar no site e realizar o pagamento em cartão de crédito.

    Espero que tenha entendido a minha pergunta.

    Grata.

    Responder

Deixe um comentário