Signup Forms
Signup Forms permite a tus clientes suscribirse y pagar con tarjeta de crédito / débito.
Signup Forms en simple
Piensa en Signup Forms como el botón de pago por suscripciones de tu negocio. Tus clientes pueden elegir a que planes se suscriben y configurar sus preferencias de pago. Aquí te explicaremos como lanzar Signup Forms en minutos, y habilitar automáticamente a tus clientes y suscriptores para acceder tu aplicación o servicios.
Instalación no-code
Esta instalación te permite habilitar y personalizar un Signup Forms en una página alojada. Recomendada para empresas de servicios o negocios no basados en SaaS.
Preferencias generales
Ve al menú general y haz clic en Aplicaciones.
Haz clic en Signup Forms.
Ahora crea un Nuevo Signup Form, o ingresa a uno ya creado que deseas editar.
Agrega un Nombre a tu formulario para identificarlo internamente.
Puedes
activar/desactivar
la opción para que tus clientes puedan comprar múltiples planes de precio, o bien mostrarles un único plan.Puedes
activar/desactivar
la opción tarjeta de crédito o débito requerida u obligatoria, o permitir la suscripción de clientes con cobranza tradicional.
Si aún no haz conectado un Proveedor de pagos aprende cómo hacerlo aquí.
Muestra tus productos y planes
Haz clic en Agregar plan y selecciona un producto de tu lista.
Ahora selecciona un plan de tu producto.
Puedes
activar/desactivar
la opción para que tus clientes puedan elegir libremente la cantidad de planes que quieren comprar.Puedes
activar/desactivar
la opción para que tus clientes puedan comprar el plan desde una cantidad mínima.Agrega un Nombre que es el que verá tu cliente.
Agrega una Descripción que es la que verá tu cliente.
Agrega complementos
Haz clic en Agregar complemento y selecciona uno de tu lista.
Puedes
activar/desactivar
la opción para que tus clientes puedan elegir libremente la cantidad de complementos que quieren agregar.Puedes
activar/desactivar
la opción para que tus clientes puedan agregar complementos desde una cantidad mínima.Agrega un Nombre al complemento, que es el que verá tu cliente.
Agrega una Descripción al complemento, que es la que verá tu cliente.
Si no haz creado un Complemento aprende más aquí.
Cupones de descuento
Proximamente disponible.
Habilita invoices o facturas electrónicas
Selecciona el tipo de documento de cobro que tu cliente podrá seleccionar cuando ingrese sus datos de facturación y haz clic en Agregar. Este puede ser un invoice o una factura electrónica.
Selecciona los países donde tus planes estarán disponibles.
Agrega etiquetas personalizadas al formulario de Nombre, Estado y ID Fiscal. Estos datos son necesarios cuando un negocio cobra con factura electrónica.
Enlaces y webhook
Agrega una
url
opcional para notificar mediante Webhook cuando haya un registro suscripción exitoso.Agrega una
url
opcional de redireccionamiento por defecto una vez que el cliente haya finalizado la compra de un plan.
Branding
Los elementos de diseño son muy importantes para que tus clientes disfruten de una buena experiencia. Aprende a configurar el branding de tu cuenta aquí.
Instalación y poner en vivo
Ahora solo queda Crear y poner en vivo o Guardar.
Ve a la parte superior de tu formulario y
activa/desactiva
el Modo de prueba.Haz clic en el botón Instalación y luego en Página Alojada.
Dale tus últimos retoques al Layout y los encabezados de la página y listo.
Haz clic en Guardar y ve a la parte superior presionando Ir a la página alojada.
Instalación low-code
Esta instalación te permite habilitar y personalizar un Signup Forms en la aplicación o sitio web que quieras.
Recomendada para negocios basados en SaaS o que necesitan un mayor nivel de personalización y flexibilidad en sus workflows de cobro.
Después de haber creado tu Signup Form copia el fragmento de código indicado en la sección Instalación -> Fragmento de JavaScript para Signup Forms y pégalo antes de la etiqueta </body>
en todas las páginas en las que deseas que Signup Forms aparezca para tu usuario.
Si utilizas algún framework como React o VueJS puedes inyectar el script de la forma convencional que utiliza cada framework.
Ejemplo
Opciones personalizadas
Utiliza las opciones disponibles para personalizar el diseño o la información del formulario. Utiliza el atributo piriodSettings.options
para definir los valores
Ejemplo
options.backgroundColor
Aplica el color especificado al fondo del formulario; puede ser el nombre del color estándar (por ejemplo, red o blue) o el color css (#033 o rgba(255, 0, 0, 0.5)).
Valor por defecto transparent
options.selectedPlans
Inicializa el formulario con los planes especificados ya seleccionados.
Valor por defecto {}
En la configuración del formulario es necesario definir el campo ID personalizado dado a que es este identificador el que se debe asignar en el atributo options.selectedPlans[].custom_id
Si también deseas pre-establecer la cantidad del plan seleccionado puedes utilizar el atributo options.selectedPlans[].quantity
. La cantidad será considerada siempre y cuando sea igual o mayor al campo Cantidad mínima en la configuración del formulario.
Información de contexto
La información de contexto permite auto-completar los campos del formulario para los casos en los cuales ya tienes información. por ejemplo cuando ya tienes el email o la dirección de facturación del usuario.
Utiliza el atributo piriodSettings.context
para definir información de contexto.
context.customer
Auto-completar la información de facturación de tu usuario (o cliente). Los campos disponibles son address
, country
, email
, name
y tax_id
.
context.metadata
Añadir metadatos para la suscripción generada a partir del formulario. Es útil por ej. cuando necesitas registrar en la suscripción información relevante sobre tu usuario (o cliente).
Eventos de JavaScript
piriod_signup_form_subscription
Emitido cuando el proceso de suscripción o registro es finalizado. Devuelve data con el atributo status que puede tener el valor succeeded
o failed
Ejemplo
Última actualización