Ever wish you could seamlessly accept payments on your landing page?
Adding a payment gateway can really increase sales because it makes buying easier. You won’t have to send people to a separate checkout page where they might change their minds.
In this guide, I’ll share two ways to create a high-converting payment landing page in WordPress. I’ll cover everything from choosing the right tools to optimizing your payment gateway page for conversions.
How to Make a Landing Page with Payment Gateway:
Why Accept Payments on Your Landing Page?
Adding a payment system right on your landing page makes buying easier. People can pay instantly instead of being sent to a separate checkout page. This helps stop them from changing their minds before they buy, and can lead to more sales.
Letting people pay with different methods (like credit cards, PayPal, etc.) can boost sales even more. Ottu found that businesses offering multiple payment choices sometimes see up to a 30% increase in sales
What You Need to Set Up a Payment Landing Page
For accepting payments on your page, you’ll need a few things:
- A Payment Processor: Think of services like Stripe, PayPal, or Square as secure payment processors. They handle all the technical details of accepting different payment methods (like credit cards).
- SSL Certificate: This is like a digital lock for your page. It scrambles any information customers share while being sent so it can’t be stolen.
- PCI Compliance: This means following a set of rules to protect customer credit card information. It sounds complicated, but your payment service will help you figure out what you need to do.
How to Make a Landing Page with Payment Gateway
So, how do you build a payment gateway landing page? Follow the 2 methods below to learn how.
Method 1. Use a Page Builder to Create a Payment Landing Page
Primeiro, mostraremos como criar uma página de destino e adicionar a integração de pagamento com o SeedProd.
SeedProd is one of the best website and landing page builders for WordPress. It lets you create any part of your web design without writing code.
You can use SeedProd to build landing pages like:
- High-converting sales pages
- Sites completos do WooCommerce com páginas de checkout, páginas de produtos e muito mais.
- Custom headers, footers, sidebars, and templates
You can even make a full website design with its theme builder.
Adicionar recursos ao seu site é fácil com seus modelos personalizáveis, blocos e seções do WordPress.
Por exemplo, você pode incorporar botões de seguir e compartilhar nas mídias sociais para aumentar o conhecimento da marca e obter mais seguidores. Ou você pode usar elementos geradores de leads, como formulários de opt-in, cronômetros de contagem regressiva e botões de call-to-action para aumentar sua lista e impulsionar as vendas.
One of the elements we’ll use in this method is SeedProd’s Payment Button block, which has payment gateway integration. It lets you start accepting online payments using the Stripe payment processor. It’s quick and easy to set up and requires zero coding.
So follow the steps below to create a payment gateway landing page with Stripe.
Step 1. Install and Activate SeedProd Landing Page Builder
A primeira etapa é acessar a página de preços do SeedProd e escolher um plano. Para este guia, usaremos o SeedProd Pro por seus recursos avançados, mas você pode usar o botão de pagamento Stripe em qualquer plano, incluindo a avaliação gratuita ilimitada do SeedProd.
Depois de escolher um plano, faça login em sua conta SeedProd e baixe o arquivo do plug-in. Você também pode copiar sua chave de licença na mesma página se estiver usando a versão premium.
Agora, acesse seu site do WordPress e carregue o plug-in SeedProd. Se precisar de ajuda, siga este guia sobre como instalar e ativar um plug-in do WordPress.
Depois de fazer isso, navegue até a página SeedProd " Settings e cole sua chave de licença.
Agora, clique no botão Verify Key para armazenar suas configurações de licença.
Etapa 2. Escolha um modelo de página de destino
The next step is to choose a template design for your page. To do that, you can go to SeedProd » Landing Pages and click on the Add New Landing Page button.
Na tela seguinte, você verá uma biblioteca de modelos de página de destino criados por profissionais.
You can click any of the filters at the top to narrow down your search. For example, clicking the Sales filter will only show the sales page designs.
Quando encontrar um design que lhe agrade, clique no ícone de marca de seleção.
Em seguida, será aberta uma janela pop-up solicitando que você digite o nome e o URL da página. Não se preocupe se não conseguir pensar em um bom nome; mostraremos como editá-lo mais tarde.
Agora, vá em frente e clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Etapa 3. Adicionar o bloco do botão de pagamento
Na próxima tela, você verá um layout semelhante ao exemplo abaixo:
À esquerda estão os blocos e seções do WordPress que você pode adicionar ao design da sua landing page. Em seguida, à direita, há uma visualização ao vivo na qual você pode visualizar as alterações feitas em tempo real.
You can customize any part of your page by clicking anywhere on the live preview. For example, clicking the headline lets you type directly on the design to change the content.
Um painel de configurações também será aberto à esquerda, onde você poderá acessar configurações avançadas para personalizar suas fontes, cores, espaçamento, HTML e muito mais.
Como você pode ver neste exemplo, também é possível editar seções para alterar facilmente a imagem de fundo. Basta clicar em um elemento e personalizá-lo para que fique exatamente como você deseja.
“A cluttered landing page design can easily distract users away.
To avoid this, make sure that you keep your landing page layout clean and simple. Using lots of empty space, color contrast, and large fonts can help you easily achieve that simplicity.” – How to Increase Your Landing Page Conversions by 300%.
Syed Balkhi, Founder and CEO of WPBeginner.
Adding an online payment gateway to your page is just as easy. Simply search for the Payment Button block and drag it onto your page.
Depois de fazer isso, as configurações de bloqueio serão abertas, onde você poderá clicar no botão Connect with Stripe (Conectar com o Stripe ) para vincular sua conta do Stripe.
Você será automaticamente direcionado para a tela de login do Stripe, onde poderá inserir seu código de verificação, mas voltará diretamente para o design da página de destino assim que a conexão for concluída.
Depois de autorizar a conexão com o Stripe, você pode personalizar as configurações do botão de pagamento.
Por exemplo, você pode editar as seguintes configurações:
- Valor do pagamento
- Descrição do pagamento
- Moeda de pagamento
- URL de sucesso
O URL de sucesso é a página para a qual você gostaria de redirecionar os compradores depois que eles concluírem a compra. Por exemplo, você pode criar uma página de agradecimento com o SeedProd e redirecionar os clientes para essa página quando eles finalizarem a compra com êxito.
In addition to the above settings, you can customize the button text, sub-text, alignment for mobile and desktop, and button size, and even add Font Awesome icons.
Precisa de mais opções de personalização? Basta clicar na guia Advanced (Avançado ) para encontrar o estilo do botão, a cor, a fonte, o espaçamento, as configurações de margem e muito mais.
With payments set up, you can continue customizing your page until you’re happy with how the design looks.
Lembre-se de pressionar o botão Save (Salvar ) no canto superior direito para salvar suas alterações.
Etapa 4. Configure suas definições
We mentioned earlier that you can change your page settings before publishing your page. To do that, click the Page Settings button at the top of the page builder screen.
In the General settings, you can edit your page name and URL, publish your page and show your SeedProd affiliate link.
Se você tiver um plug-in de SEO do WordPress, como o All in One SEO, instalado, poderá clicar na guia SEO para inserir as configurações de otimização do mecanismo de pesquisa.
Algumas outras configurações que podem ser acessadas incluem as seguintes:
- Track the performance of your page with MonsterInsights, a powerful Google Analytics plugin for WordPress.
- Adicione scripts personalizados ao cabeçalho, corpo e rodapé de sua página da Web para rastreamento e redirecionamento.
- Give your page a custom domain name separate from your website (Elite plans only).
You can also click the Connect tab at the top of the page to link your page to your email marketing service, Google Analytics, spam protection, and Zapier.
Etapa 5. Publique sua página de destino
When you’re ready to make your page live, click the Save button and select the Publish option.
Now, when visitors click your payment button, they’ll be able to check out using Stripe.
Method 2. Use a Plugin to Integrate a Payment Gateway with Your Landing Page
Another way to create a landing page with a payment option is to use a WordPress payment plugin.
O WP Simple Pay é um dos melhores e mais fáceis de usar plug-ins de pagamento do WordPress. Ele permite que você adicione pagamentos do Stripe a qualquer post ou página do seu site WordPress sem código.
So, if you don’t want to create a high-converting landing page and need a more straightforward option, WP Simple Pay is a great alternative to page builders.
Observação: para aceitar pagamentos usando o WP Simple Pay, você precisará de um certificado SSL ativo. Aqui está um guia sobre como adicionar SSL ao WordPress, se você precisar de ajuda.
Etapa 1. Instalar e ativar o WP Simple Pay
The first step is to get your copy of WP Simple Pay from their website. Then, install and activate the plugin on your website.
Quando o plug-in estiver ativo, você verá automaticamente o Assistente de configuração, que automatiza todo o processo de configuração.
Para iniciar o Assistente de configuração, clique no botão Let's Get Started (Vamos começar ).
Etapa 2. Concluir o assistente de configuração
The setup process has four steps. First, you’ll be asked to enter your WP Simple Pay license key, which you’ll find in your account dashboard’s Downloads section.
Digite sua chave de licença e clique no botão Activate and Continue (Ativar e continuar ).
Na próxima tela, você precisará se conectar à sua conta do Stripe, portanto, clique no botão Connect with Stripe.
Now, you’ll need to log into your Stripe account and verify the connection.
Depois de fazer isso, você voltará ao assistente de configuração, onde poderá escolher quais e-mails os clientes receberão depois de concluir um pagamento.
Por exemplo, você pode enviar um recibo de pagamento, uma notificação de pagamento, um recibo de fatura e uma fatura futura.
Depois de escolher suas notificações por e-mail, clique no botão Save and Continue (Salvar e continuar ).
The setup is now complete. The next step is to create a form for shoppers to enter their payment details. To do that, click the Create a Payment Form button.
Etapa 3. Criar um formulário de pagamento
Na próxima tela, você verá os diferentes modelos de formulário de pagamento disponíveis no WP Simple Pay. Você pode escolher entre diferentes tipos de formulário, incluindo Captação de recursos, Produtos e serviços, Registros, Doações e muito mais.
For this tutorial, we’ll choose the Payment Button template. To do so, hover over the template and click the Use Template button.
Your payment button settings will now open on the next screen. Here, you can edit general settings, including the button name, description, type, and payment success page.
Na guia de pagamento, você pode configurar o preço padrão no botão de pagamento e escolher entre pagamentos únicos e recorrentes.
Você também pode escolher entre vários métodos de pagamento, incluindo cartão de crédito, débito direto, Alipay, Klarna e Clearpay.
Quando terminar de personalizar as configurações do botão de pagamento, clique no botão Publish (Publicar ).
Etapa 4. Adicione o botão de pagamento à sua página de destino
The next step is to add the payment button to your page. The WP Simple Pay WordPress block allows you to add it anywhere on your page.
Para fazer isso, crie ou edite uma página do WordPress e, no editor de conteúdo, clique no botão de adição e selecione o bloco WP Simple Pay.
Em seguida, você pode selecionar o botão de pagamento no menu suspenso.
After updating or publishing your payment page, you can preview your payment button and gateway in action.
É isso aí!
Perguntas frequentes
Transaction fees: How much does each gateway charge per transaction?
Supported countries: Does it work in the countries where you do business?
Accepted payment methods: Does it support the cards and payment options your customers use?
Integration: How easily does it work with your website or shopping cart?
Security: How secure is the gateway?
Cost: Some tools, like WooCommerce, have fee payment options built in with optional paid extensions. Others are premium plugins with pricing for different budgets.
Some popular options include Stripe, PayPal, Square, and Braintree.
You now know how to make your landing page with payment gateway functionality.
Se estiver interessado em criar uma loja de comércio eletrônico completa, aqui estão alguns tutoriais que podem ajudar:
- Como adicionar um botão personalizado Add-to-Cart no WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- Como personalizar facilmente sua página de loja do WooCommerce
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
