O bloco Botão de Pagamento permite que você aceite pagamentos Stripe diretamente em qualquer página do SeedProd — sem loja WooCommerce, sem configuração complexa de checkout. Basta conectar sua conta Stripe, definir um valor e uma descrição, e um botão de pagamento totalmente funcional aparecerá em sua página, pronto para receber dinheiro.
Este bloco é ideal para vender produtos individuais, downloads digitais, serviços, ingressos para eventos ou campanhas de doação sem o custo de uma loja de e-commerce completa. O botão é estilizado com o mesmo sistema de design flexível do bloco Botão padrão do SeedProd, oferecendo modelos, fundos gradientes, controles de borda e suporte a ícones para que ele combine perfeitamente com o design da sua página.
Adicionando o Bloco Botão de Pagamento às Suas Páginas
Siga estas etapas para adicionar um bloco Botão de Pagamento à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Botão de Pagamento na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionado, clique no bloco Botão de Pagamento para abrir suas configurações. A aba Conteúdo é dividida em três seções.
Configuração de Pagamento:
Antes de configurar os detalhes de pagamento, você deve conectar sua conta Stripe. Clique em Conectar com Stripe para autorizar o SeedProd a processar pagamentos através da sua conta. Uma vez conectado, você pode preencher os seguintes campos:
- Valor: Insira o valor do pagamento a ser cobrado (obrigatório). Este valor é passado para o Stripe quando o botão é clicado.
- Descrição do Pagamento: Insira uma breve descrição do que o cliente está pagando (obrigatório). Isso aparece no seu painel Stripe e no recibo do cliente.
- Moeda do Pagamento: Selecione a moeda para a transação em uma lista abrangente de moedas mundiais (padrão: USD).
- URL de Sucesso: Insira a URL para a qual redirecionar os clientes após um pagamento bem-sucedido, como uma página de agradecimento.
Botão:
- Texto do Botão: Insira o rótulo principal exibido no botão (padrão: “Pagar Agora”).
- Texto Secundário do Botão: Opcionalmente, adicione uma linha secundária de texto menor abaixo do rótulo principal do botão.
- Alinhamento: Defina o alinhamento horizontal do botão — Esquerda, Centro ou Direita — com controle por dispositivo para desktop, tablet e celular.
- Tamanho: Escolha o tamanho do botão entre Pequeno, Médio, Grande, Extra Grande ou 2X Grande.
Ícones:
- Ícone Antes do Texto: Selecione um ícone para exibir à esquerda do texto do botão usando o seletor de ícones.
- Ícone Depois do Texto: Selecione um ícone para exibir à direita do texto do botão usando o seletor de ícones.
Passo 2a: Escolha um Estilo de Modelo
Na aba Templates, você pode aplicar um estilo pré-definido ao seu Botão de Pagamento com um único clique. Os modelos disponíveis incluem Botão Pill, Botão Flat, Botão Azul, Botão Verde Claro, Botão Verde, Botão Laranja, Botão Vermelho, Botão Amarelo, Botão Branco, Botão Cinza e Botão Preto. Aplicar um modelo atualiza instantaneamente as cores, a forma e o estilo do botão para corresponder à predefinição escolhida.
Etapa 3: Personalizar o Design
Na aba Avançado, a seção Estilos oferece controle granular sobre a aparência visual do botão:
- Tipografia: Defina a família da fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e maiúsculas/minúsculas para o texto do botão.
- Estilo do Botão: Escolha entre os estilos de renderização de botão Flat, 2D, Vintage ou Ghost.
- Cor de Fundo: Defina a cor de fundo do botão para os estados normal e de passagem do mouse.
- Cor do Texto do Botão: Defina a cor do rótulo do botão para os estados normal e de passagem do mouse.
- Estilo de Fundo do Botão: Alterne entre fundos Sólidos e Gradientes. O modo Gradiente expõe o tipo (Radial/Linear), ângulo, posição, primeira e segunda cores, e seus pontos de parada.
- Preenchimento Vertical: Controle o espaçamento interno superior e inferior do botão.
- Preenchimento Horizontal: Controle o espaçamento interno esquerdo e direito do botão.
- Raio da Borda: Arredonde os cantos do botão ajustando o valor do raio da borda.
- Largura da Borda do Botão: Defina a espessura da borda ao redor do botão.
- Cor da Borda do Botão: Escolha a cor da borda do botão.
- Sombra do Texto: Adicione uma sombra ao texto do rótulo do botão usando opções de tamanho predefinidas (Nenhuma, Fio de Cabelo, Pequena, Média, Grande, X Grande, 2X Grande).
- Sombra: Adicione uma sombra de caixa ao botão usando as mesmas opções de tamanho predefinidas.
A aba Avançado também fornece controles para espaçamento (margem e preenchimento), atributos CSS personalizados, visibilidade do dispositivo e animações de entrada.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco Botão de Pagamento e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Botão de Pagamento à sua página! Com sua conta Stripe conectada e os detalhes de pagamento configurados, sua página agora pode aceitar transações reais sem a necessidade de um carrinho de compras ou configuração completa de e-commerce. Experimente modelos, estilos de botão e combinações de ícones para criar um botão de pagamento que se encaixe naturalmente no design da sua página e incentive os visitantes a concluir sua compra.