Cómo agregar botones de pago de franjas simples a sus tablas de precios en Divi

Stripe es una solución de procesamiento de pagos extremadamente flexible para empresas en línea, especialmente si eres un desarrollador experto en tecnología. Pero, si no es un desarrollador y aún desea usar Stripe para vender algunos productos en línea, existen formas sencillas de hacerlo. De hecho, con unos pocos fragmentos de código (o un simple complemento), puede agregar botones de pago de Stripe a su sitio web en un instante.

En este tutorial, le mostraré cómo agregar botones de pago de Stripe a su sitio web Divi utilizando el complemento Stripe Payments para WordPress. Incluso te mostraré cómo diseñar tus botones para que coincidan con tu diseño Divi.

¡Empecemos!

Vistazo

Aquí hay un adelanto de los botones de pago de Stripe que crearemos en este tutorial.

Empezando

Para este tutorial de casos de uso, necesitará lo siguiente:

• El tema Divi (instalado y activo)
• Una cuenta de Stripe
• El complemento Stripe Payments para WordPress de WP Simply Pay (instalado y activo)
• También usaremos un diseño de página de precios de productos digitales disponible GRATIS dentro de Divi Builder

Acerca del complemento

Stripe Payments para WordPress de WP Simply Pay es un complemento que le permite comenzar a cobrar el pago con tarjeta de crédito con Stripe mediante una simple inserción de código corto. En realidad, puede crear formularios de pago y botones de pago manualmente sin el uso del complemento, pero dado que este complemento facilita las cosas y ofrece algunas funciones convenientes (como confirmación de pago y páginas de fallas de pago), pensé que sería más útil a largo plazo. . Usaré la versión Lite GRATUITA del complemento para este tutorial. La versión Pro del complemento le dará más control sobre el estilo de sus formularios junto con soporte para cosas como campos personalizados, montos personalizados y funciones de suscripción.

Configurar formularios de Stripe con el complemento

Una vez que tenga el complemento instalado y activo, vaya a Simple Pay Lite > Configuración . Luego, en la pestaña Stripe Keys, deberá ingresar las claves API de su cuenta Stripe. Por el bien de este tutorial, solo usaré las claves de prueba, pero deberá asegurarse y activar su cuenta de Stripe y generar algunas claves de API en vivo si desea comenzar a recolectar dinero real.

Puede encontrar sus claves de API iniciando sesión en su cuenta de Stripe y haciendo clic en Desarrolladores > Claves de API .

Deberá copiar tanto la clave publicable como la clave secreta en la configuración del complemento.

Ahora salte a la pestaña general. Allí podrá designar una Página de éxito de pago y una Página de incumplimiento de pago. Notará que el complemento ya ha creado esas páginas para usted. Pero dado que el contenido de la página se genera mediante un código abreviado, en realidad puede agregar esos códigos cortos a cualquier módulo Divi en cualquier diseño Divi para crear versiones personalizadas de esas páginas. Por ahora, mantenga esas páginas predeterminadas en su lugar y continúe con la configuración.

Establezca el estilo del botón de pago en "ninguno (heredado del tema)". Todo lo que esto hace es eliminar el CSS utilizado para diseñar el botón de franja azul predeterminado. Esto hará que las cosas estén un poco más limpias cuando agreguemos nuestro propio CSS personalizado para diseñar el botón en Divi.

Luego, guarde los cambios.

En la pestaña de confirmación de pago, puede usar las etiquetas de plantilla disponibles para personalizar el mensaje y la información que muestra el código corto en su página de confirmación de pago. Pero para este tutorial, solo voy a dejar el mensaje predeterminado.

Creación de formularios de pago con franjas

Las formas de pago son en realidad botones de pago de Stripe que generan una forma de pago emergente que permite a los usuarios completar una compra sin tener que salir de la página. Por lo tanto, deberá crear una nueva forma de pago para cada producto o servicio que venda. En este caso de uso, crearemos tres formas de pago para tres productos simulados.

Para crear un nuevo formulario de pago, vaya al Panel de WordPress y navegue a Simple Pay Lite> Agregar nuevo.

Asigne un título al formulario de pago (este título no se mostrará en la parte frontal).

Luego, en la pestaña Opciones de pago, ingrese un Monto único.

A continuación, haga clic en la pestaña Visualización de formulario en la página y cambie el Texto del botón de pago predeterminado a "Comprar ahora" (o lo que desee). También puede elegir el texto de procesamiento del botón de pago.

En la pestaña Pantalla de superposición de pago, actualice lo siguiente:

nombre de empresa
Descripción del Artículo
URL del logotipo / imagen
Habilitar Recordarme: SÍ

Estas opciones determinan lo que se muestra en la ventana emergente del formulario de pago para este producto en particular.

Una vez que haya terminado, asegúrese de publicar / actualizar el formulario de pago.

Eventualmente, deberá copiar el código corto del formulario de pago ubicado en la parte superior derecha de la página Editar formulario de pago para pegarlo en el diseño de su página Divi.

Pero por ahora, puede continuar con el mismo proceso para crear dos formas de pago más, cada una con su propia descripción del artículo, logotipo / imagen y monto.

Una vez que se hayan creado todas sus formas de pago, puede visitarlas navegando a Simple Pay Lite> Formas de pago. Allí tendrá fácil acceso a los códigos cortos.

Agregar botones de pago con franjas a su diseño de página Divi

Sin los códigos abreviados de formularios de pago con franjas listos para usar, ahora necesitamos poner en funcionamiento nuestro diseño de página Divi. Para hacer esto, cree una nueva página, asigne un título a su página y haga clic para usar Divi Builder.

Luego seleccione la opción "Elegir un diseño prediseñado".

Abra el paquete de diseño de productos digitales y haga clic para usar la página de precios de productos digitales.

Una vez que el diseño está cargado en la página, publique la página y luego haga clic para construir en la interfaz.

En una pestaña separada, regrese a la página de formularios de pago y tome el código corto que desea agregar a la tabla de precios.

Luego, regrese al diseño de la página de precios y abra la configuración de la tabla de precios para una de las tablas de precios en el diseño.

Saque el texto del botón (no lo necesita ya que el código corto servirá como botón) y luego pegue el código corto debajo del contenido en el cuadro de contenido.

Verá un botón sin estilo con el texto "modo de prueba" resaltado debajo del botón. El botón no tiene estilo porque seleccionamos la opción de usar los estilos de tema para el botón en lugar del botón azul predeterminado. El texto del modo de prueba simplemente está ahí para recordarle que no está utilizando un formulario de pago de banda en vivo. El texto del modo de prueba, obviamente, desaparecerá una vez que se utilicen las claves de API en vivo.

A continuación, continúe con el mismo proceso de copiar y pegar los otros dos códigos abreviados de formularios de pago en las dos tablas de precios restantes.

Pruebe uno de los botones para asegurarse de que la superposición del formulario de pago funcione correctamente. Debe tener un aspecto como este…

Desafortunadamente, esta versión del complemento no le permite personalizar la superposición del formulario de pago más allá del estilo predeterminado que ve. Pero la funcionalidad está ahí y, en muchos casos, no necesitará ese estilo adicional. Sin embargo, ¡puedes diseñar esos botones!

Diseñar los botones de pago de Stripe para que coincidan con el diseño

Para diseñar los botones de pago de Stripe, agregaremos CSS personalizado a la configuración de nuestra página. Primero, necesitamos averiguar qué selector vamos a usar para diseñar el botón. Puede encontrar esto utilizando las herramientas de desarrollo de su navegador. Haga clic derecho en el botón Stripe y seleccione "Inspeccionar". En el código html puede ver que el botón tiene una clase css "simpay-payment-btn".

Este es el selector que necesitamos para apuntar al estilo del botón.

Si queremos hacer coincidir el estilo de nuestros botones de pago de Stripe con los botones utilizados en nuestro diseño prefabricado, podemos inspeccionar uno de los botones Divi ya diseñados en la página para obtener el código CSS que necesitamos.

Ahora abra la configuración de la página y agregue el siguiente CSS personalizado en la pestaña Avanzado:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

¡Eso es todo! Veamos el resultado final.

Personalización de las páginas de confirmación de pago y pago fallido

No olvide que dado que el complemento genera su confirmación de pago y el contenido de la página de pago fallido utilizando un código corto, puede agregar ese código corto a cualquier diseño de Divi y luego usar la configuración incorporada de Divi para diseñar el texto como desee.

Esto es útil para hacer coincidir los estilos de estas páginas con su sitio web sin tener que recurrir a CSS personalizado.

Pensamientos finales

Stripe puede ser una solución extremadamente conveniente para cobrar pagos en línea. Y, con el complemento Simple Payments para WordPress, puede poner en marcha la funcionalidad básica de Stripe Checkout en su sitio Divi en minutos. Además, si aprovecha los diseños prediseñados de Divi, puede agregar y diseñar los botones de pago de Stripe para que coincidan con su diseño simplemente copiando y pegando el código CSS que ya ha creado para usted. El resultado es una herramienta de procesamiento de pagos completamente funcional y segura que puede cobrar los pagos de los visitantes sin que tengan que abandonar la página.

No dude en explorar más formas de aceptar pagos de Stripe en su sitio web de WordPress.

Espero que este tutorial le resulte útil y espero tener noticias suyas en los comentarios.

¡Salud!