Formulário de pedido e página de pagamento

O pedido do template é um formulário HTML comum. A plataforma aplica as mesmas regras da vitrine: estoque, quantidade mínima, campos do checkout e termos.

O envio vai para order.action, que é /tpl/ + id do template + /order.

Campos

Obrigatórios no formulário:

• storeSlug — o slug da loja dona do template.
• productId
• returnTo — a página do produto desta loja. Endereço de outro site é ignorado.
• customerName
• contact — e-mail ou WhatsApp com DDD.
• quantity

Conforme a configuração: phone, document, address, acceptTerms, pares extraId / extraValue, e coupon.

Mantenha o campo escondido company (proteção contra robô). O template base de pages/product.html já traz o conjunto.

Se o produto tem texto em Comandos do FiveM, product.needs_player_id fica verdadeiro e o formulário da vitrine pede playerId. A entrega no servidor está em Em breve. Não dependa desse campo.

Mostre query.pedido_erro quando vier preenchido. Se o template não imprimir, a plataforma coloca um aviso no topo.

Formulário ou fetch

O caminho normal é method="post" sem JavaScript. A resposta é um redirecionamento (303) para a página de pagamento da loja, ou de volta ao produto com pedido=ok quando não há pagamento online.

Se precisar de JavaScript, envie o FormData e peça JSON. O campo resposta=json, ou o cabeçalho Accept: application/json, faz a resposta vir em JSON. fetch de outro modo de navegação também é tratado como JSON.

<form id="comprar" method="post" action="<%= order.action %>">
  <input type="hidden" name="storeSlug" value="<%= store.slug %>" />
  <input type="hidden" name="productId" value="<%= product.id %>" />
  <input type="hidden" name="returnTo" value="<%= order.return_to %>" />
  <input type="text" name="customerName" />
  <input type="text" name="contact" />
  <input type="number" name="quantity" value="1" />
  <input type="text" name="company" hidden />
  <button type="submit">Comprar agora</button>
</form>
<script>
  document.getElementById("comprar").addEventListener("submit", function (event) {
    event.preventDefault();
    var dados = new FormData(event.target);
    dados.set("resposta", "json");
    fetch(event.target.action, { method: "POST", body: dados, headers: { Accept: "application/json" } })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data.url) location.assign(data.url);
        else if (data.voltar) location.assign(data.voltar);
        else if (data.error) alert(data.error);
      });
  });
</script>

url é a página de pagamento da loja ou, no Checkout Pro, o Mercado Pago. continuar é sempre a página da loja. voltar é a volta ao produto quando não há cobrança online. error explica a falha em português.

A plataforma também inclui um script que faz o salto quando o template usa fetch ou XMLHttpRequest e ignora o JSON.

Corpo maior que 60 KB é recusado. O tipo precisa ser formulário (application/x-www-form-urlencoded ou multipart/form-data).

Página de pagamento

O comprador sai do produto para um endereço da própria loja: /pagamento/mp/pedido no Mercado Pago, /pagamento/pedido no Asaas.

Se existir pages/pagamento.html, essa página usa o layout da loja. No editor, o botão Pagamento cria o arquivo de exemplo. Sem o arquivo, a plataforma mostra a página padrão com logo, nome, cores, fonte e ícone.

O PIX e o cartão não entram no HTML do template. Marque um slot. A plataforma troca o slot por uma moldura, e só essa moldura carrega o SDK. O script do template não lê o que a pessoa digita no cartão.

Três formas. Use uma só em cada estado:

<ch-pagamento></ch-pagamento>

{{ pagamento }}
<%= pagamento.slot %>

pagamento.status decide a tela: formulario, pix, pendente, aprovado, recusado, redirecionando (Checkout Pro) e indisponivel. Quando o status muda, a página recarrega.

| Campo | Conteúdo | | --- | --- | | status, status_label | Código e o texto em português. | | total, total_cents | Total já com cupom. | | items | name, quantity, line, line_cents, url. | | contato, email | Contato. email só vem preenchido quando o contato é e-mail. | | product_name, product_url | Produto, ou a sacola resumida. | | entrega | Texto quando o pagamento foi aprovado. Vazio antes. | | keys | No aprovado: product_name, code, note, file_url, file_name. | | test, error | Credencial de teste e a mensagem de falha. | | provider, kind | mercadopago ou asaas. kind é loja, pro ou asaas. |

Na prévia o slot é uma caixa de exemplo e nenhum pagamento é criado. O número do cartão nunca deve ser um campo do seu HTML.

Pedido na prévia do editor não é gravado. A resposta é: “Pedidos não são enviados na prévia. Ative o template para receber pedidos.” O template também precisa ser o ativo da loja.