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
En primer lugar, le mostraremos cómo crear una página de destino y añadir la integración de pago con 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
- Sitios web completos de WooCommerce con páginas de pago, páginas de productos y mucho más.
- Custom headers, footers, sidebars, and templates
You can even make a full website design with its theme builder.
Añadir funciones a tu sitio es fácil con sus plantillas personalizables, bloques de WordPress y secciones.
Por ejemplo, puede incrustar botones para seguir y compartir en las redes sociales para dar a conocer la marca y conseguir más seguidores. También puedes utilizar elementos que generen clientes potenciales, como formularios de suscripción, temporizadores de cuenta atrás y botones de llamada a la acción, para aumentar tu lista y potenciar las ventas.
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
El primer paso es ir a la página de precios de Se edProd y elegir un plan. Para esta guía, vamos a utilizar SeedProd Pro por sus características avanzadas, pero puede utilizar el botón de pago de Stripe en cualquier plan, incluyendo la prueba gratuita ilimitada de SeedProd.
Después de elegir un plan, acceda a su cuenta SeedProd y descargue el archivo del plugin. También puede copiar su clave de licencia en la misma página si está utilizando la versión premium.
Ahora vaya a su sitio web WordPress y cargue el plugin SeedProd. Si necesitas ayuda, sigue esta guía sobre cómo instalar y activar un plugin de WordPress.
Una vez hecho esto, vaya a la página SeedProd " Configuración y pegue su clave de licencia.
Ahora siga adelante y haga clic en el botón Verificar clave para almacenar la configuración de su licencia.
Paso 2. Elija una plantilla 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.
En la siguiente pantalla, verá una biblioteca de plantillas de páginas de destino diseñadas por profesionales.
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.
Cuando hayas encontrado un diseño que te guste, haz clic en el icono de la marca de verificación.
Después, se abrirá una ventana emergente pidiéndote que introduzcas el nombre y la URL de tu página. No te preocupes si no se te ocurre un buen nombre; más adelante te enseñaremos a editarlo.
Ahora haga clic en el botón Guardar y empezar a editar la página.
Paso 3 Añadir el bloque del botón de pago
En la siguiente pantalla, verá un diseño similar al del ejemplo siguiente:
A la izquierda están los bloques y secciones de WordPress que puedes añadir al diseño de tu página de aterrizaje. Luego, a la derecha hay una vista previa en vivo donde puedes previsualizar los cambios que hagas en tiempo 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.
También se abrirá un panel de configuración a la izquierda, donde podrás acceder a los ajustes avanzados para personalizar tus fuentes, colores, espaciado, HTML y mucho más.
Como puedes ver en este ejemplo, también puedes editar secciones para cambiar la imagen de fondo fácilmente. Solo tienes que hacer clic en un elemento y personalizarlo para que tenga exactamente el aspecto que deseas.
“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.
Una vez hecho esto, se abrirán los ajustes de bloqueo, donde puede hacer clic en el botón Conectar con Stripe para vincular su cuenta de Stripe.
Automáticamente irás a la pantalla de inicio de sesión de Stripe, donde podrás introducir tu código de verificación, pero volverás directamente al diseño de tu página de destino una vez se haya completado la conexión.
Una vez que haya autorizado la conexión con Stripe, puede personalizar la configuración del botón de pago.
Por ejemplo, puede editar los siguientes ajustes:
- Importe del pago
- Descripción del pago
- Moneda de pago
- Éxito URL
La URL de éxito es la página a la que desea redirigir a los compradores después de que completen su compra. Por ejemplo, puede crear una página de agradecimiento con SeedProd y redirigir a los clientes a esa página cuando hayan realizado la compra correctamente.
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.
¿Necesita más opciones de personalización? Simplemente haga clic en la pestaña Avanzado para encontrar el estilo de los botones, el color, la fuente, el espaciado, la configuración de los márgenes y mucho más.
With payments set up, you can continue customizing your page until you’re happy with how the design looks.
No olvide pulsar el botón Guardar en la esquina superior derecha para guardar los cambios.
Paso 4. Configure sus ajustes
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.
Si tiene instalado un plugin SEO para WordPress como All in One SEO, puede hacer clic en la pestaña SEO para introducir la configuración de optimización para motores de búsqueda.
Otros ajustes a los que puede acceder son los siguientes:
- Track the performance of your page with MonsterInsights, a powerful Google Analytics plugin for WordPress.
- Añada secuencias de comandos personalizadas al encabezado, cuerpo y pie de página de su página web para realizar seguimientos y retargeting.
- 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.
Paso 5. Publique su 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.
WP Simple Pay es uno de los mejores y más fáciles de usar plugins de pago de WordPress. Te permite añadir pagos de Stripe a cualquier post o página de tu sitio WordPress sin 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.
Nota: para aceptar pagos usando WP Simple Pay; necesitarás un certificado SSL activo. Aquí tienes una guía para añadir SSL a WordPress si necesitas ayuda.
Paso 1. Instalar y activar WP Simple Pay Instalar y activar 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.
Una vez que el plugin esté activo, verás automáticamente el Asistente de configuración, que automatiza todo el proceso de configuración.
Para iniciar el asistente de configuración, haga clic en el botón Comencemos.
Segundo paso Complete el asistente de configuración
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.
Introduzca su clave de licencia y haga clic en el botón Activar y continuar.
En la siguiente pantalla, tendrá que conectar con su cuenta de Stripe, así que haga clic en el botón Conectar con Stripe.
Now, you’ll need to log into your Stripe account and verify the connection.
Una vez hecho esto, volverás al asistente de configuración, donde podrás elegir qué correos electrónicos recibirán los clientes tras completar un pago.
Por ejemplo, puede enviar un recibo de pago, una notificación de pago, un recibo de factura y una próxima factura.
Después de elegir sus notificaciones por correo electrónico, haga clic en el botón Guardar y 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.
Paso 3. Crear un formulario de pago
En la siguiente pantalla, verás las diferentes plantillas de formularios de pago disponibles con WP Simple Pay. Puedes elegir entre diferentes tipos de formularios, incluyendo Recaudación de Fondos, Productos y Servicios, Registros, Donaciones y más.
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.
En la pestaña de pago, puede configurar el precio por defecto de su botón de pago y elegir entre pagos únicos o periódicos.
También puede elegir entre múltiples métodos de pago, como tarjeta de crédito, débito directo, Alipay, Klarna y Clearpay.
Una vez que haya terminado de personalizar la configuración del botón de pago, haga clic en el botón Publicar.
Paso 4. Añada el botón de pago a su 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 ello, cree o edite una página de WordPress y, a continuación, en el editor de contenido, haga clic en el botón más y seleccione el bloque WP Simple Pay.
A continuación, puede seleccionar el botón de pago en el menú desplegable.
After updating or publishing your payment page, you can preview your payment button and gateway in action.
¡Eso es!
Preguntas frecuentes
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.
Si estás interesado en crear una tienda de comercio electrónico completa, aquí tienes algunos tutoriales que pueden ayudarte:
- Cómo añadir un botón personalizado Add-to-Cart en WooCommerce
- Cómo mostrar categorías de productos y etiquetas en WooCommerce
- Cómo personalizar fácilmente la página de tu tienda WooCommerce
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.
También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.
