Para integrar o PagSeguro (PagBank) em HTML, o método mais rápido e nativo é o Checkout Padrão (com redirecionamento). Você cria um formulário HTML simples com os dados da compra, e o cliente é enviado para o ambiente seguro do PagSeguro para pagar (PIX, cartão ou boleto).
Para vendas mais simples e rápidas, você também pode criar um Link de Pagamento diretamente pelo painel e inseri-lo num link HTML.
Aqui está o passo a passo para criar o formulário direto:
1. Código HTML do Formulário
Insira o código abaixo no seu site. Substitua o valor do
receiverEmail pelo e-mail cadastrado na sua conta PagSeguro.NOME DO SEU PRODUTO
R$ 50,00
#22c55e (no campo background-color) para a cor de sua preferência:- Azul: Mude para
#2563eb(e#1d4ed8no hover) - Preto: Mude para
#0f172a(e#1e293bno hover) - Vermelho/Rosa: Mude para
#db2777(e#be185dno hover)
Nota Importante sobre as Variações
Como o link de pagamento do PagSeguro é fixo, a opção que o cliente selecionar no menu do Blogspot serve apenas para ele confirmar o que quer antes de clicar.
Se você precisar controlar exatamente qual estoque foi vendido, o ideal é criar um link de pagamento diferente para cada variação lá no painel do PagBank (Ex: um link para o tamanho P, outro para o M) e colocar botões separados para cada um deles.
Me avise se você prefere:
- Que o botão abra o PagSeguro em uma nova aba ou na mesma página?
- Ajuda para criar botões separados para cada variação caso precise controlar o estoque de cada uma? Código 👇 <!DOCTYPE html>
- <html lang="pt-BR">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Checkout PagSeguro</title>
- </head>
- <body>
<h2>Meu Produto - R$ 50,00</h2>
<!-- Formulário apontando para o ambiente de produção do PagSeguro -->
<form action="https://pagseguro.uol.com.br/v2/checkout/payment.html" method="POST">
<!-- SEU E-MAIL CADASTRADO NO PAGSEGURO -->
<input type="hidden" name="receiverEmail" value="seu-email@dominio.com">
<!-- MOEDA (BRL para Real) -->
<input type="hidden" name="currency" value="BRL">
<!-- DADOS DO PRODUTO -->
<input type="hidden" name="itemId1" value="0001">
<input type="hidden" name="itemDescription1" value="Nome do seu Produto">
<input type="hidden" name="itemAmount1" value="50.00">
<input type="hidden" name="itemQuantity1" value="1">
<!-- BOTÃO DE ENVIO -->
<input type="image" src="https://uol.com.br"
name="submit" alt="Pague com PagSeguro">
</form>
</body>
</html>
0 Comentários
Sua opinião é muito importante