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

Stripe es una solución de procesamiento de pagos extremadamente flexible para negocios en línea, especialmente si es 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 simples de hacerlo. De hecho, con unos pocos fragmentos de código (o un complemento simple), 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 usando Stripe Payments para el complemento de WordPress (¿Busca otras opciones? Consulte nuestra lista de los mejores complementos de WordPress Stripe ) . 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 caso de uso, necesitará lo siguiente:

  • El tema Divi (instalado y activo)
  • Una cuenta de rayas
  • 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 de pago popular que le permite comenzar a cobrar el pago de la tarjeta de crédito con Stripe utilizando una simple inserción de código abreviado. 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 falla de pago), pensé que sería más útil a largo plazo. . Usaré la versión GRATUITA Lite 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, cantidades personalizadas y funciones de suscripción.

Configuración de 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 Claves de Stripe, deberá ingresar las claves API de su cuenta de Stripe. Por el bien de este tutorial, solo usaré las claves de prueba, pero deberá asegurarse de 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 salta a la pestaña general. Allí podrá designar una página de éxito de pago y una página de falla de pago. Notará que el complemento ya ha creado esas páginas para usted. Pero dado que el contenido de la página es generado por un código abreviado, en realidad puede agregar esos códigos abreviados 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 (heredar del tema)». Todo lo que hace es eliminar el css utilizado para diseñar el botón de franja azul predeterminado. Esto hará que las cosas sean 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 abreviado en su página de confirmación de pago. Pero para este tutorial, solo dejaré el mensaje predeterminado.

Creación de formularios de pago de Stripe

Los formularios de pago son realmente botones de pago de Stripe que generan un formulario de pago emergente que permite a los usuarios completar una compra sin tener que salir de la página. Por lo tanto, deberá crear un nuevo formulario de pago para cada producto o servicio que venda. En este caso de uso, vamos a crear tres formularios de pago para tres productos simulados.

Para crear un nuevo formulario de pago, vaya al Panel de control de WordPress y navegue hasta 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 del 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 la empresa

Descripción del elemento


Logotipo/URL de 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 abreviado 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 formularios de pago más, cada uno con su propia descripción del artículo, logotipo/imagen y monto.

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

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

Sin códigos cortos de formulario de pago de franja 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 prefabricado».

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 se cargue en la página, publíquela y luego haga clic para construir en la parte delantera.

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

Luego, regrese al diseño de su 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 abreviado servirá como botón) y luego pegue el código abreviado 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 franja en vivo. El texto del modo de prueba obviamente desaparecerá una vez que se usen las claves 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, vamos a agregar algunos CSS personalizados a la configuración de nuestra página. Primero, debemos 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 con el botón derecho en el botón Stripe y seleccione «Inspeccionar». En el código html se puede ver que el botón tiene una clase css “simpay-pago-btn”.

Este es el selector que necesitamos para seleccionar el 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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
.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 sus 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 mediante un código abreviado, puede agregar ese código abreviado a cualquier diseño de Divi y luego usar la configuración integrada 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 for WordPress, puede obtener la funcionalidad básica de Stripe Checkout en funcionamiento en su sitio Divi en minutos. Además, si aprovecha los diseños prefabricados de Divi, puede agregar y diseñar sus botones de pago de Stripe para que coincidan con su diseño simplemente copiando y pegando el código CSS ya creado para usted. El resultado es una herramienta de procesamiento de pagos totalmente funcional y segura que puede cobrar los pagos de los visitantes sin que tengan que abandonar la página.

Siéntase libre de explorar más formas de aceptar pagos con Stripe en su sitio web de WordPress u otros complementos de mesa para crear efectos similares.

Espero que encuentre útil este tutorial y espero saber de usted en los comentarios.

¡Salud!