Signup Forms

Signup Forms

Signup Forms es el formulario de suscripción de tu negocio. Tus clientes pueden elegir un plan, ingresar sus datos de facturación y configurar su método de pago — todo en un flujo guiado de tres pasos.

Puedes instalarlo como una página alojada (sin código) o incrustarlo directamente en tu sitio o aplicación (low-code).

---

Crear un Signup Form

Ve a Componentes → Signup Forms → Nuevo. Asigna un nombre al formulario para identificarlo internamente y configura cada sección:

---

Paso 1 — Productos

Define qué planes y complementos estarán disponibles para el cliente.

Planes

1. Haz clic en Agregar plan y selecciona un producto y plan de tu lista
2. Agrega el nombre y descripción que verá tu cliente
3. Opcionalmente define una cantidad mínima

Complementos

1. Haz clic en Agregar complemento y selecciona uno de tu lista
2. Agrega nombre y descripción para el cliente
3. Opcionalmente define una cantidad mínima

Otras opciones

• Permitir selección de múltiples planes — activa esta opción si quieres que el cliente pueda suscribirse a más de un plan a la vez

Si aún no tienes productos o planes creados, revisa las guías de Productos y Planes.

Haz clic en Continuar para avanzar al siguiente paso.

---

Paso 2 — Facturación

Configura cómo se capturarán los datos de facturación del cliente.

• Tipo de consumidor — define si el formulario acepta empresas, personas naturales o ambos
• Cobertura — selecciona los países donde estarán disponibles tus planes
• Tipos de factura — selecciona los tipos de documento que el cliente podrá elegir al completar sus datos
• Etiquetas personalizadas — personaliza los nombres de los campos Nombre, Estado e ID Fiscal que verá el cliente en el formulario

Haz clic en Continuar.

---

Paso 3 — Pago

Configura el método de pago y las opciones avanzadas del formulario.

• Solicitar inscripción de tarjeta — activa esta opción si quieres que el cliente registre una tarjeta al suscribirse. Si está desactivada, el cliente recibirá la factura con un link al portal de pagos

Opciones avanzadas

• Redireccionamiento por defecto — URL a la que se redirige al cliente después de completar la suscripción
• Webhook URL — URL para notificar a tu sistema cuando ocurre una suscripción exitosa
• Procesamiento instantáneo (Beta) — procesa la suscripción de inmediato al completar el formulario
• Mantener información en caché (Beta) — conserva los datos del cliente entre sesiones

Haz clic en Crear y poner en vivo para publicar el formulario.

---

Instalación no-code — Página alojada

La opción más rápida. Piriod genera una página lista para compartir sin necesidad de modificar tu sitio.

1. Ve al formulario creado y haz clic en Instalación → Página alojada
2. Personaliza el layout y los encabezados de la página
3. Haz clic en Guardar
4. Usa Ir a la página alojada para ver y compartir el link

Activa o desactiva el Modo de prueba desde la parte superior del formulario antes de publicar.

---

Instalación low-code — Incrustado en tu sitio

Incrusta el formulario directamente en tu aplicación o sitio web. Recomendado para negocios SaaS o que necesitan mayor flexibilidad en su flujo de cobro.

Copia el fragmento desde Instalación → Fragmento de JavaScript y pégalo antes del cierre de </body> en las páginas donde quieres que aparezca el formulario.

<div id="piriod-widget"></div>
<script>
  window.piriodSettings = {
    service: "signupForms",
    publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY"
  };
  !function(){var e=document.getElementById("piriod-widget");if(!e)return console.log('Missing <div id="piriod-widget"></div>, create this to mounted.');var i=document.createElement("iframe");i.src="https://js.piriod.com/signup_forms/"+window.piriodSettings.publishableKey,i.id="piriod-widget",i.width="100%",i.height="740",i.style="border:none",e.appendChild(i)}();
</script>

Si usas React, Vue u otro framework, inyecta el script de la forma convencional de cada framework.

---

Opciones de personalización

Usa piriodSettings.options para personalizar el comportamiento del formulario.

options.backgroundColor

Aplica un color de fondo al formulario. Acepta nombres de color CSS, hex o rgba.

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  options: {
    backgroundColor: "white"
  }
};

Valor por defecto: transparent

options.selectedPlans

Inicializa el formulario con planes preseleccionados. Requiere que el campo ID personalizado esté definido en la configuración del plan.

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  options: {
    selectedPlans: [
      {
        custom_id: "MY_CUSTOM_ID",
        quantity: 3
      }
    ]
  }
};

---

Información de contexto

Usa piriodSettings.context para pre-completar campos del formulario cuando ya tienes datos del usuario.

context.customer

Pre-completa los datos de facturación. Campos disponibles: address, country, email, name, tax_id.

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    customer: {
      country: "US",
      email: "[e-mail]",
      tax_id: "11111111-1"
    }
  }
};

context.metadata

Añade metadatos a la suscripción generada por el formulario.

window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    metadata: {
      userID: "123456",
      foo: "foo"
    }
  }
};

---

Eventos de JavaScript

piriod_signup_form_subscription

Se emite cuando el proceso de suscripción finaliza. Devuelve status con valor succeeded o failed.

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');
    }
  }
});