mailinapp
Documentation menu

Bloco Produto

Um cartão de produto com um botão Comprar agora. O campo Checkout define para onde um toque leva de verdade. O Checkout do MailInApp (Stripe) processa um pagamento real dentro do fluxo: sem loja virtual, sem página de checkout separada para construir, sem dados de cartão jamais tocando os próprios servidores do MailInApp. Já o Link para checkout de loja externa envia o comprador direto para uma página de produto na sua própria loja Shopify/WooCommerce, para quando você prefere manter a venda (e seu estoque, impostos, descontos) na loja que você já administra.

Checkout do MailInApp (Stripe)

Este é o modo padrão do bloco, e tudo nesta seção se aplica especificamente a ele — veja Direcionando para o checkout da sua própria loja abaixo para o outro modo. Conecte sua própria conta Stripe em Configurações → Pagamentos primeiro (Stripe Connect, Standard/OAuth); toda cobrança cai diretamente nessa conta.

Diferente de um voto ou uma avaliação, uma compra só pode ser concluída com segurança na própria página de checkout hospedada do Stripe, então este bloco não tem nível cinético dentro do e-mail. Comprar agora é sempre baseado em link, inclusive no e-mail. Tocar nele sempre abre primeiro a visualização ao vivo hospedada em uma página de confirmação (/v/[token]/act?blockId=...&blockType=product&action=buy), que exibe novamente o nome e o preço do produto e pede mais um toque ("Continuar para pagamento") antes de realmente criar qualquer coisa.

Esse formato de confirmar-depois-enviar (POST) é proposital: um scanner de segurança ou proxy corporativo que pré-busca todo link em um e-mail nunca deve disparar uma Checkout Session real do Stripe a partir de um simples GET. Somente o POST explícito vindo da página de confirmação atinge POST /api/checkout. Essa rota resolve preço, nome e estoque a partir da própria configuração armazenada do bloco no servidor, nunca a partir de nada enviado pelo cliente. Em seguida, ela cria uma Checkout Session na conta Stripe conectada do proprietário, grava um pedido pending, e redireciona com 303 para o Stripe.

Nada em um pedido pending conta como venda ainda. Somente POST /api/webhooks/stripe move um pedido para paid. Ele é autenticado pela própria assinatura do Stripe, o mesmo modelo de confiança das URLs HMAC dos endpoints de contagem regressiva e rastreamento de abertura, já que o redirecionamento da URL de sucesso onde o navegador do comprador cai é apenas interface — e não pode ser tratado como prova de pagamento.

Nesse webhook, o MailInApp reverifica o estoque de forma transacional antes de confirmar. Se dois compradores estavam disputando a última unidade e ambos passaram pelo Stripe, a cobrança do perdedor é automaticamente reembolsada e ele recebe um aviso por e-mail, em vez de o produto ser vendido além do estoque silenciosamente. Uma compra confirmada também grava um evento de interação purchase, então a receita flui pelos mesmos agregados e pelo pipeline de webhook do projeto que as respostas de qualquer outro bloco usam. Veja Interações e análises.

O Fulfillment depende do campo Fulfillment:

  • Digital — você insere o conteúdo de entrega (um link ou código de download) diretamente no bloco; no momento em que o webhook confirma o pagamento, esse conteúdo é enviado automaticamente por e-mail ao comprador.
  • Físico — o Checkout do Stripe coleta um endereço de entrega como parte do fluxo de pagamento; o pedido fica na tabela de Pedidos do projeto até você clicar em Marcar como enviado, o que envia ao comprador um e-mail de aviso de envio.

Estoque é um limite opcional (0 = ilimitado). O HTML enviado por e-mail é estático no momento do envio, a mesma convenção seguida pelo prazo do bloco de contagem regressiva e pela janela de acesso do bloco de link de reunião, então o estoque de um produto com limite não fica embutido como texto. Em vez disso, o e-mail incorpora uma pequena imagem de selo de estoque renderizada no servidor ("restam 3" / "Esgotado") que é regenerada a cada abertura, para que nunca mostre disponibilidade desatualizada dias depois do envio. Na visualização ao vivo hospedada, o estoque é verificado de forma ativa e dinâmica: assim que os pedidos pagos atingem o limite, Comprar agora é substituído diretamente por um controle desativado "Esgotado", em vez de apenas um selo ao lado de um botão ainda clicável. De qualquer forma, a reverificação transacional do webhook no momento do pagamento é a fonte real da verdade; o selo e o botão desativado são conveniências de interface, não o mecanismo de aplicação.

Se você conectou uma loja Shopify ou WooCommerce, uma caixa de busca Importar da loja aparece acima destes campos, listando produtos do catálogo próprio dessa loja. Ela se mantém sincronizada automaticamente em segundo plano, sem nenhum botão separado para pressionar. Escolher um produto preenche Nome, Descrição, Imagem e Preço para você.

Quando esse produto sincronizado tem uma página de loja conhecida (o próprio handle de produto do Shopify, ou a URL de página do WooCommerce), importá-lo também muda o Checkout para Link para checkout de loja externa e preenche essa página como a URL da página do produto externo. Um produto importado fica então pronto para vender na sua própria loja sem mais nada a configurar. Um produto sincronizado antes de sua conexão de loja capturar URLs de página fica no Checkout do MailInApp, sem nada alterado por baixo.

É uma cópia única, não um link ao vivo. Todo campo continua seu para editar depois, e o preço realmente cobrado no checkout é sempre o que o bloco tem armazenado no momento, nunca buscado novamente na loja. Os campos abaixo funcionam da mesma forma com ou sem uma loja conectada — importar é um atalho, não uma exigência.

Direcionando para o checkout da sua própria loja

Mude o Checkout para Link para checkout de loja externa e defina uma URL da página do produto externo — sua página de produto do Shopify, um link permanente de carrinho, uma página de produto do WooCommerce, qualquer link https:// — para pular completamente o fluxo de pagamento próprio do MailInApp. Comprar agora então se comporta exatamente como um botão ou imagem com link simples: sem página de confirmação, sem /api/checkout, sem Stripe. O clique ainda é rastreado (então conta para o mapa de calor de cliques), e o comprador cai direto na sua loja para concluir a compra por lá.

Como o MailInApp nunca faz parte desse pagamento, nada do mecanismo de checkout do MailInApp descrito acima se aplica a um produto externo. Não há pedido pending/paid, nenhuma entrada na tabela de Pedidos, nenhuma ação de fulfillment ou reembolso, nenhuma aplicação de estoque ou selo de status de estoque, e nenhuma etapa de jornada disparada por compra. Rastreie essa receita da mesma forma que rastrearia qualquer outra venda na sua própria loja. Rastreamento de receita de pedidos e checkout do Shopify cobre como atribuir compras feitas no checkout da sua própria loja de volta ao e-mail que as gerou.

Se a URL da página do produto externo for deixada em branco, ou não for um link https:// válido, enquanto o Checkout estiver definido como externo, o bloco silenciosamente volta a se comportar exatamente como o modo de checkout do MailInApp, em vez de renderizar um botão morto.

Desconto por produto

Depois que um bloco foi preenchido via Importar da loja (então ele carrega um storeProductId real, não uma URL digitada à mão) e o Checkout está definido como externo, um alternador de Desconto por produto aparece. Ative-o e defina um Tipo de desconto (porcentagem ou valor fixo de desconto), Valor do desconto, e Expira (dias após o envio). A tela do Estúdio é redesenhada imediatamente com o mesmo selo de desconto e preço riscado que os destinatários verão — sem precisar abrir a Visualização ao vivo para conferir. Bem antes da renderização do e-mail de cada destinatário, o MailInApp gera um código de desconto de uso único na sua loja Shopify ou WooCommerce conectada — restrito a esse destinatário e apenas a este produto, não à sua loja inteira — e reescreve Comprar agora para um link de resgate que leva o comprador de volta à própria página deste produto com o código já aplicado. Isso é independente da Oferta de desconto em nível de projeto na página de Envio (veja Oferta de desconto): um projeto pode usar um, outro, ambos ou nenhum, e cada um mantém seu próprio período de espera, para que um nunca bloqueie o outro. Um bloco cujo produto não foi importado de uma loja conectada mostra uma nota explicando por que o alternador está oculto. Percorrido de ponta a ponta em Códigos de desconto de produto do Shopify e Códigos de desconto de produto do WooCommerce.

Para lojas Shopify, um app block opcional também pode mostrar esse mesmo selo diretamente na própria página do produto ao vivo, antes do checkout — veja Mostrando o desconto na página do seu produto (Shopify) para os passos de configuração.

Se a geração falhar para um destinatário — nenhum cliente correspondente na loja, um token precisando reconexão, uma instabilidade na API ao vivo — o e-mail dele ainda é enviado; Comprar agora apenas volta para o link simples e sem desconto do produto do bloco.

Campos configuráveis:

  • Nome, Descrição, Imagem — escolhidos na sua biblioteca de mídia em vez de digitados como URL, ou preenchidos pelo Importar da loja acima.
  • Preço e Moeda (USD, EUR ou GBP) — mostrados no cartão de qualquer forma, mesmo no modo externo, onde são apenas informativos.
  • Checkout — Checkout do MailInApp (Stripe) ou Link para checkout de loja externa.
  • URL da página do produto externo — apenas modo externo; para onde Comprar agora envia o comprador.
  • Desconto por produto, Tipo de desconto, Valor do desconto, Expira (dias após o envio) — apenas modo externo, e apenas depois que o produto do bloco veio de Importar da loja.
  • Fulfillment — Digital ou Físico; apenas modo Checkout do MailInApp.
  • Estoque — 0 para ilimitado; apenas modo Checkout do MailInApp.
  • Conteúdo de entrega — apenas digital; o link ou código de download enviado após o pagamento; apenas modo Checkout do MailInApp.
  • Cor de fundo, preenchimento (padding), borda, raio da borda, e substituições de estilo de texto para o nome e a descrição.

Exemplos

Subject

Back in stock: the Weekender Tote

Um lançamento de mercadoria ou uma tiragem limitada de impressão é o encaixe direto: limite o Estoque ao tamanho da tiragem e deixe o selo de estoque comunicar a escassez à medida que ela diminui. Veja E-commerce e lançamentos de produtos para o padrão mais amplo de vender diretamente a partir de um envio promocional, em vez de direcionar cliques para uma loja separada. Um lançamento de curso digital ou e-book usa o fulfillment Digital para que o comprador receba o link de download no instante em que o pagamento é confirmado, sem nenhuma etapa manual de fulfillment. Um negócio local vendendo um complemento físico (um item de marca, uma caixa sazonal) usa o fulfillment Físico e trabalha a tabela de Pedidos como uma fila de pedidos leve, marcando cada um como enviado assim que despacha. Use Fale com o comprador para abrir um ticket de suporte se um endereço precisar de confirmação.

Como é o fallback estático

<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>

A imagem de status de estoque só é renderizada quando um limite de estoque está definido; Comprar agora sempre abre a página de confirmação, em vez de enviar um pagamento diretamente de dentro do e-mail.

No modo de checkout externo, não há página de confirmação nem selo de estoque — Comprar agora é um link simples, rastreado por clique, direto para a URL da página do produto externo:

<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>

Veja também