Productos de pago

En el capítulo anterior, creamos un nuevo producto y lo mostramos en nuestro escaparate. Ahora nuestros clientes pueden ver el producto y comprarlo directamente, aunque no tengamos un sitio web. ¡Qué bien! 😎

Podemos abrir nuestro escaparate en la barra lateral izquierda. Debajo del nombre de nuestra tienda - "Exprime el día"-, haz clic en "Mi tienda". Aquí la tienes:

https://squeeze-the-day.lemonsqueezy.com/

El nombre de nuestra tienda aparece como subdominio, pero aún no se ha activado. LemonSqueezy quiere que activemos nuestra tienda antes de poder utilizarla. Para ello, tenemos que completar algunos pasos más en la página de Configuración. Como el objetivo principal de este curso es la integración de la API, no la activaremos todavía.

Si has dicho "¡Eh! ¿No pudimos ver el escaparate en modo de prueba en el último capítulo?", ¡estás en lo cierto! Parece que LemonSqueezy ha hecho algunos cambios recientemente, por lo que deberíamos tener acceso al escaparate de nuevo más adelante, incluso sin completar los pasos de configuración. Por ahora, podemos ver la página de pago de LemonSqueezy yendo a la lista de productos, haciendo clic en estos puntos de la línea de productos y, a continuación, en "Vista previa". ¡Listo! Ya estamos en la página de pago, ¡listos para comprar este producto! 🎉

Cada producto tiene también un botón "Compartir" con el que puedes generar un enlace a la página de pago de ese producto concreto y compartirlo con tus clientes. Eso les llevará directamente a la página de pago de LemonSqueezy, donde podrán comprar ese producto. También podemos configurar un montón de parámetros aquí, incluyendo la cantidad. Cuando generes el enlace único, puedes copiarlo y compartirlo o abrirlo en una pestaña nueva. Si te desplazas hacia abajo, puedes ver que la "Cantidad" ahora está configurada en "5". El escaparate no es tan flexible como tu propio sitio web, pero puedes configurar algunas opciones de estilo como el color de los botones, los fondos, etc.

Echémosle un vistazo. Vuelve al panel de control, cierra el modal "Compartir producto" y, en la sección "Diseño" de la izquierda, encontrarás varias pestañas. En la pestaña "General", puedes subir un logotipo o favicon. Pequeño, ¡pero poderoso! 💪 También puedes utilizar un tema preconfigurado o elegir tus propios colores. ¡Deja volar tu imaginación!

¡Hay aún más flexibilidad en la pestaña "Tienda"! Este es el aspecto que tendrá nuestro escaparate para nuestros clientes, e incluso puedes ver aquí nuestro nuevo producto. Este es un gran lugar para crear tu propio estilo y hacer que tu tienda destaque sobre la competencia.

La pestaña "Pago" te permite previsualizar el aspecto que tendrá tu escaparate con unos estilos frente a otros, y también te permite anular algunos estilos si es necesario.

Bien, de vuelta a nuestra página de pago, vamos a intentar comprar nuestra e-lemonada. Aquí tenemos dos opciones: "Pagar con tarjeta" o "Pagar con PayPal". Vamos a elegir "Pagar con tarjeta". El campo de correo electrónico ya está rellenado porque nos hemos autenticado en el panel de control de LemonSqueezy. Para el número de tarjeta, podemos utilizar las tarjetas de prueba de LemonSqueezy, que puedes encontrar en los documentos. Si abrimos su sitio en una pestaña nueva, podemos ir a "Recursos", "Documentos de ayuda" y, en la barra lateral izquierda, hacer clic en "Modo de prueba". Los números de tarjeta de prueba que necesitamos están aquí a la derecha.

Hay varios para elegir, pero yo sólo utilizaré el primero. Copia este número y... pégalo... y de momento podemos utilizar cualquier fecha de caducidad futura. Yo diré "25/12", y utilizaré tres números cualesquiera para el código de seguridad. Esto también requiere que introduzcamos una dirección de facturación. Si intentamos hacer clic en "Comprar" sin una, obtendremos un error de validación. Diré "Vía 1", y luego elegiré de la lista de sugerencias para autocompletar todos los campos. Añadir un "Número de identificación fiscal" es opcional, así que podemos dejarlo en blanco.

Si hacemos clic en "Pagar"... ¡bum! "¡Gracias por tu pedido!" Si hacemos clic en "Ver pedido"... aquí es donde podemos generar una factura en PDF de nuestro pedido si la necesitamos.

Para ello, LemonSqueezy nos pide que introduzcamos de nuevo una dirección, ya sea por motivos de seguridad o porque el relleno previo no funciona. Incluso podemos añadir algunas notas personalizadas y elegir el idioma en el que se generará nuestra factura. Dirección: "Broadway 1", ciudad: "Nueva York", estado: "Nueva York", y dejamos el resto como está.

Si hacemos clic en "Generar factura", veremos que se ha descargado un archivo de factura. Si lo abrimos... ¡qué bien! ¡Ahí está nuestra información!

Correos electrónicos de factura

Ahora que has comprado tu primer producto, comprueba la bandeja de entrada del correo electrónico que utilizaste durante el proceso de compra para ver si has recibido un correo electrónico. ¡Sí! Abrimos "Tu recibo de E-Limonada Clásica". Podemos ver el pedido que hicimos y también podemos generar la misma factura que vimos antes. Como propietario de una tienda, es posible que recibas un correo electrónico adicional porque nuestra tienda está conectada a la misma dirección de correo electrónico. Yo desactivé esos correos para evitar el spam en mi bandeja de entrada, y tú puedes hacer lo mismo yendo a: Nombre de nuestra tienda: "Exprime el Día", "Mi Cuenta" y desactivando las notificaciones de ventas.

No olvides guardar los cambios También puedes configurarlo en el panel de control de LemonSqueezy yendo a "Diseño", "Correo electrónico".

También podemos controlar el correo electrónico que se crea al realizar la compra. ¡Más sobre esto más adelante!

Panel de control de LemonSqueezy

Así que... todo esto es desde la perspectiva del cliente, pero ¿qué pasa con el propietario de la tienda? Si volvemos al panel de control... ¡allá vamos! ¡Nuestro gráfico de ingresos ya refleja la compra que hemos realizado! Abre "Tienda"... "Pedidos" para ver la lista de pedidos. El último debería ser el pedido que hicimos por 4,95 $. ¡Bien! Aquí también hay una página de "Clientes", donde podemos ver información sobre cada cliente y los productos que ha pedido. Puedes ignorar las etiquetas "Archivado" de los pedidos en mi pantalla. Eso sólo significa que el cliente ya no recibirá correos electrónicos de marketing. Eso... fue un accidente, en realidad. Intenté archivarlo una vez y ahora no puedo volver a cambiarlo. Esperemos que sea una función que LemonSqueezy añada más adelante. 😅

De todos modos, como puedes ver, LemonSqueezy gestiona todos los correos electrónicos transaccionales por nosotros, así que no tenemos que preocuparnos por ello. Agrio... Quiero decir... ¡dulce! Puedes empezar a vender tus productos sin un sitio web; ¡Sólo tienes que crear más productos, publicarlos en el escaparate y compartir el enlace a tu escaparate con tus amigos! 🎉

Pero como somos desarrolladores, y como ya tenemos un puesto de limonada electrónica súper popular (nuestras estadísticas de ventas lo confirman claramente), y ya tenemos un sitio web impresionante para él que veremos pronto, ahora queremos integrar LemonSqueezy directamente en nuestro sitio utilizando su rica API. ¡Eso a continuación!