# Signup Forms ### 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. {% embed url="" %} #### **Preferencias generales** 1. Ve al menú general y haz clic en **Aplicaciones**. 2. Haz clic en **Signup Forms**. 3. Ahora crea un **Nuevo Signup Form**, o ingresa a uno ya creado que deseas **editar**. 4. Agrega un **Nombre** a tu formulario para identificarlo internamente. 5. Puedes `activar/desactivar` la opción para que tus clientes puedan comprar múltiples planes de precio, o bien mostrarles un único plan. 6. 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. {% hint style="info" %} Si aún no haz conectado un **Proveedor de pagos** aprende cómo hacerlo [**aquí**](https://docs.piriod.com/guide/revenues/payment-providers). {% endhint %} #### **Muestra tus productos y planes** 1. Haz clic en **Agregar plan** y selecciona un producto de tu lista. 2. Ahora **selecciona un plan** de tu producto. 3. Puedes `activar/desactivar` la opción para que tus clientes puedan elegir libremente la cantidad de planes que quieren comprar. 4. Puedes `activar/desactivar` la opción para que tus clientes puedan comprar el plan desde una cantidad mínima. 5. Agrega un **Nombre** que es el que verá tu cliente. 6. Agrega una **Descripción** que es la que verá tu cliente. {% hint style="info" %} Si aún no haz creado tu primer producto y plan de precios, aprende más en [**Productos**](https://docs.piriod.com/guide/subscriptions/products) y [**Planes**](https://docs.piriod.com/guide/subscriptions/plans). {% endhint %} #### **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. {% hint style="info" %} Si no haz creado un **Complemento** aprende más [**aquí**](https://docs.piriod.com/guide/subscriptions/addons). {% endhint %} #### **Cupones de descuento** *Proximamente disponible.* #### **Habilita invoices o facturas electrónicas** 1. 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. 2. Selecciona los países donde tus planes estarán disponibles. 3. 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** 1. Agrega una `url` opcional para notificar mediante **Webhook** cuando haya un registro suscripción exitoso. 2. 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í**](https://docs.piriod.com/guide/settings/branding). #### **Instalación y poner en vivo** 1. Ahora solo queda **Crear y poner en vivo** o **Guardar**. 2. Ve a la parte superior de tu formulario y `activa/desactiva` el **Modo de prueba**. 3. Haz clic en el botón **Instalación** y luego en **Página Alojada**. 4. Dale tus últimos retoques al Layout y los encabezados de la página y listo. 5. 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 `` 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** ```html Demo Piriod Signup Forms
``` *** ### 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** ```javascript window.piriodSettings = { service: "signupForms", publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY", options: { backgroundColor: "white" } }; ``` #### **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 `{}` ```javascript window.piriodSettings = { service: "signupForms", publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY", options: { selectedPlans: [ { custom_id: "MY_CUSTOM_ID", quantity: 3 } ] } }; ``` 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`. ```javascript window.piriodSettings = { service: "signupForms", publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY", context: { customer: { country: "US", email: "user@email.com", tax_id: "11111111-1" } } }; ``` #### **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). ```javascript window.piriodSettings = { service: "signupForms", publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY", context: { metadata: { userID: "123456", foo: "foo" } } }; ``` *** ### 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** ```javascript window.addEventListener('message', function(e) { if (e.data.event === 'piriod_signup_form_subscription' && e.origin === 'https://js.piriod.com') { if (e.data.status === 'succeeded') { console.log('subscription created successfully'); } else { console.log('subscription creation failed'); } } } ```