mailinapp
Documentation menu

Bloque de producto

Una tarjeta de producto con un botón Comprar ahora. Su campo Proceso de pago elige a dónde va realmente un toque. Proceso de pago de MailInApp (Stripe) lleva un flujo de pago real integrado: sin tienda, sin una página de pago separada que construir, sin que los datos de tarjeta toquen nunca los propios servidores de MailInApp. Enlazar al pago de una tienda externa en su lugar envía al comprador directamente a una página de producto en tu propia tienda de Shopify/WooCommerce, para cuando prefieras mantener la venta (y su inventario, impuestos, descuentos) en la tienda que ya operas.

Proceso de pago de MailInApp (Stripe)

Este es el modo predeterminado del bloque, y todo en esta sección se aplica específicamente a él — mira Enlazar en su lugar al pago de tu propia tienda más abajo para el otro modo. Conecta primero tu propia cuenta de Stripe en Configuración → Pagos (Stripe Connect, Standard/OAuth); cada cobro se liquida directamente en esa cuenta.

A diferencia de un voto o una calificación, una compra solo puede completarse de forma segura en la propia página de pago alojada de Stripe, así que este bloque no tiene ningún nivel cinético dentro del correo. Comprar ahora siempre prioriza el enlace en todas partes, correo incluido. Tocarlo siempre abre primero la vista en vivo alojada en una página de confirmación (/v/[token]/act?blockId=...&blockType=product&action=buy), que vuelve a mostrar el nombre y precio del producto y pide un toque más ("Continuar al pago") antes de crear realmente nada.

Esa forma de confirmar-y-luego-enviar es deliberada: un escáner de seguridad o proxy corporativo que precarga cada enlace de un correo nunca debe poder activar una sesión real de Stripe Checkout con una simple solicitud GET. Solo el POST explícito desde la página de confirmación llega a POST /api/checkout. Esa ruta resuelve el precio, el nombre y el inventario a partir de la propia configuración almacenada del bloque en el servidor, nunca de lo que envía el cliente. Luego crea una sesión de Checkout en la cuenta de Stripe conectada del propietario, escribe un pedido pending, y redirige con un 303 a Stripe.

Nada sobre un pedido pending cuenta todavía como una venta. Solo POST /api/webhooks/stripe mueve alguna vez un pedido a paid. Está autenticado por la propia firma de Stripe, el mismo modelo de confianza que las URL firmadas por HMAC de los endpoints de cuenta regresiva y seguimiento de aperturas, ya que la redirección de URL de éxito en la que aterriza el navegador del comprador es solo experiencia de usuario y no puede confiarse como prueba de pago.

En ese webhook, MailInApp vuelve a verificar el inventario de forma transaccional antes de confirmar. Si dos compradores estaban compitiendo por la última unidad y ambos pasaron por Stripe, el cobro del perdedor se reembolsa automáticamente y se le envía un aviso por correo en lugar de sobrevender el producto silenciosamente. Una compra confirmada también escribe un evento de interacción purchase, así que los ingresos fluyen a través de los mismos agregados y del mismo pipeline de webhook del proyecto que usan las respuestas de cualquier otro bloque. Mira Interacciones y analíticas.

El cumplimiento del pedido depende del campo Cumplimiento del pedido:

  • Digital — ingresas el contenido de entrega (un enlace o código de descarga) directamente en el bloque; en el momento en que el webhook confirma el pago, ese contenido se envía automáticamente por correo al comprador.
  • Físico — Stripe Checkout recopila una dirección de envío como parte del flujo de pago; el pedido permanece en la tabla de Pedidos del proyecto hasta que haces clic en Marcar como cumplido, lo que envía por correo al comprador un aviso de envío.

Inventario es un límite opcional (0 = ilimitado). El HTML enviado es estático en el momento del envío, la misma convención que sigue la fecha límite del bloque de cuenta regresiva y la ventana de unión del bloque de enlace de reunión, así que el stock de un producto con límite no queda fijado como texto. En su lugar, el correo incrusta una pequeña imagen de insignia de stock renderizada en el servidor ("quedan 3" / "Agotado") que se regenera en cada apertura, así que nunca muestra disponibilidad obsoleta días después del envío. En la vista en vivo alojada, el inventario se verifica en vivo y de forma dinámica: una vez que los pedidos pagados alcanzan el límite, Comprar ahora se reemplaza directamente por un control deshabilitado "Agotado" en lugar de solo una insignia junto a un botón que sigue siendo clicable. De cualquier forma, la reverificación transaccional del webhook en el momento del pago es la verdadera fuente de la verdad; la insignia y el botón deshabilitado son comodidades de experiencia de usuario, no el mecanismo de aplicación.

Si has conectado una tienda de Shopify o WooCommerce, aparece un cuadro de búsqueda Importar desde tienda sobre estos campos, listando productos del propio catálogo de esa tienda. Se mantiene sincronizado automáticamente en segundo plano, sin ningún botón separado que presionar. Elegir un producto completa Nombre, Descripción, Imagen y Precio por ti.

Cuando ese producto sincronizado tiene una página de tienda conocida (el propio handle de producto de Shopify, o la URL de página de WooCommerce), importarlo también cambia Proceso de pago a Enlazar al pago de una tienda externa y completa esa página como la URL de página de producto externa. Un producto importado queda entonces listo para vender en tu propia tienda sin nada más que configurar. Un producto sincronizado antes de que tu conexión de tienda empezara a captar URL de página se deja en Proceso de pago de MailInApp en su lugar, sin que nada cambie por debajo de ti.

Es una copia única, no un enlace en vivo. Cada campo sigue siendo tuyo para editar después, y el precio realmente cobrado en el pago siempre es el que el bloque tenga en ese momento, nunca se vuelve a obtener de la tienda. Los campos de abajo funcionan igual con o sin una tienda conectada — importar es un atajo, no un requisito.

Enlazar en su lugar al pago de tu propia tienda

Cambia Proceso de pago a Enlazar al pago de una tienda externa y define una URL de página de producto externa — tu página de producto de Shopify, un enlace permanente de carrito, una página de producto de WooCommerce, cualquier enlace https:// — para saltarte por completo el propio flujo de pago de MailInApp. Comprar ahora entonces se comporta exactamente como un botón o imagen enlazados simples: sin página de confirmación, sin /api/checkout, sin Stripe. El clic se sigue rastreando (así que cuenta hacia el mapa de calor de clics), y el comprador aterriza directamente en tu tienda para completar la compra ahí.

Como MailInApp nunca forma parte de ese pago, ninguna de la maquinaria del proceso de pago de MailInApp descrita arriba se aplica a un producto externo. No hay pedido pending/paid, ni entrada en la tabla de Pedidos, ni acciones de cumplimiento del pedido o reembolso, ni aplicación de inventario o insignia de estado de stock, ni paso de recorrido activado por compra. Rastrea esos ingresos de la misma forma en que rastrearías cualquier otra venta en tu propia tienda. Seguimiento de ingresos de pedidos y pago de Shopify cubre cómo atribuir compras del lado de la tienda de vuelta al correo que las generó.

Si la URL de página de producto externa se deja en blanco, o no es un enlace https:// válido, mientras Proceso de pago está definido como externo, el bloque recurre silenciosamente a comportarse exactamente como el modo de proceso de pago de MailInApp en lugar de renderizar un botón muerto.

Descuento por producto

Una vez que un bloque se pobló mediante Importar desde tienda (así que lleva un storeProductId real, no una URL escrita a mano) y Proceso de pago está definido como externo, aparece un interruptor de Descuento por producto. Actívalo y define un Tipo de descuento (porcentaje o monto fijo de descuento), Valor del descuento, y Expira (días después del envío). Justo antes de que se renderice el correo de cada destinatario, MailInApp acuña un código de descuento de un solo uso en tu tienda conectada de Shopify o WooCommerce — restringido a ese destinatario y solo a este producto, no a toda tu tienda — y reescribe Comprar ahora a un enlace de canje que hace aterrizar al comprador de vuelta en la propia página de este producto con el código ya aplicado. Esto es independiente de la Oferta de descuento a nivel de proyecto en la página de Envío (mira Oferta de descuento): un proyecto puede usar cualquiera de las dos, ambas, o ninguna, y cada una mantiene su propio período de espera, así que una nunca bloquea a la otra. Un bloque cuyo producto no se importó desde una tienda conectada muestra una nota explicando por qué el interruptor está oculto. Recorrido de principio a fin en Códigos de descuento de producto de Shopify y Códigos de descuento de producto de WooCommerce.

Si la acuñación falla para un destinatario — sin cliente coincidente en la tienda, un token que necesita reconectarse, un fallo momentáneo de la API en vivo — su correo se envía de todos modos; Comprar ahora simplemente recurre al enlace de producto simple y sin descuento del bloque.

Campos configurables:

  • Nombre, Descripción, Imagen — elegidos desde tu biblioteca multimedia en lugar de escritos como una URL, o completados por Importar desde tienda arriba.
  • Precio y Moneda (USD, EUR o GBP) — mostrados en la tarjeta de cualquier forma, incluso en modo externo, donde son solo informativos.
  • Proceso de pago — Proceso de pago de MailInApp (Stripe) o Enlazar al pago de una tienda externa.
  • URL de página de producto externa — solo modo externo; a dónde envía Comprar ahora al comprador.
  • Descuento por producto, Tipo de descuento, Valor del descuento, Expira (días después del envío) — solo modo externo, y solo una vez que el producto del bloque provino de Importar desde tienda.
  • Cumplimiento del pedido — Digital o Físico; solo modo de proceso de pago de MailInApp.
  • Inventario — 0 para ilimitado; solo modo de proceso de pago de MailInApp.
  • Contenido de entrega — solo digital; el enlace o código de descarga enviado tras el pago; solo modo de proceso de pago de MailInApp.
  • Color de fondo, relleno, borde, radio de borde, y sobrescrituras de estilo de texto para el nombre y la descripción.

Ejemplos

Subject

Back in stock: the Weekender Tote

Un lanzamiento de mercancía o una tirada impresa limitada es el ajuste directo: limita Inventario al tamaño de la tirada y deja que la insignia de stock comunique la escasez a medida que se agota. Mira Comercio electrónico y lanzamientos de producto para el patrón más amplio de vender directamente desde un envío promocional en lugar de dirigir los clics a través de una tienda separada. El lanzamiento de un curso digital o ebook usa el cumplimiento Digital para que el comprador reciba el enlace de descarga en el instante en que se confirma el pago, sin ningún paso manual de cumplimiento. Un negocio local que vende un complemento físico (un artículo de marca, una caja de temporada) usa el cumplimiento Físico y trabaja la tabla de Pedidos como una cola de pedidos ligera, marcando cada uno como cumplido a medida que se envía. Usa Contactar al comprador para abrir un ticket de soporte si una dirección necesita confirmarse.

Cómo se ve la alternativa estática

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <img src="https://mailinapp.com/api/product-status?p=proj123&b=prod-1&s=..."
       width="180" height="30" alt="" style="display:block;margin-bottom:8px" />
  <a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=prod-1&blockType=product&action=buy"
     style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
            color:#ffffff;border-radius:6px;text-decoration:none;
            font-size:14px;font-weight:600">
    Buy now
  </a>
</div>

La imagen de estado de stock solo se renderiza cuando se define un límite de inventario; Comprar ahora siempre abre la página de confirmación en lugar de enviar un pago directamente desde dentro del correo.

En modo de pago externo, no hay página de confirmación ni insignia de stock en absoluto — Comprar ahora es un enlace simple con seguimiento de clics directo a la URL de página de producto externa:

<div style="margin:12px 0;padding:16px;border:1px solid #e5e7eb;
            border-radius:8px;background-color:#ffffff">
  <p style="margin:0 0 4px;font-weight:600;font-size:16px;color:#111827">
    Limited edition tote bag
  </p>
  <p style="margin:0 0 10px;font-weight:700;font-size:18px">$29.00</p>
  <a href="https://mailinapp.com/v/eyJhbGci.../click?blockId=prod-1&blockType=product&dest=https%3A%2F%2Fshop.example.com%2Fproducts%2Ftote-bag"
     style="display:inline-block;border:none;border-radius:6px;
            background-color:#4f46e5;color:#ffffff;padding:10px 20px;
            font-size:14px;font-weight:600;text-decoration:none">
    Buy now
  </a>
</div>

Relacionado