Checkout e Pedidos - Extensão #10
Guia para lojas virtuais utilizarem a extensão de checkout e suas especificações
Índice
💳 Configurações > Tipos de pagamentos
✉️ Notificações enviadas no processo
Upgrades da versão 3.1 de 25 de novembro de 2025
Mudanças no layout para serem inseridas no CSS
Alterações no card do DOM
<div class="container">
<div class="row">
<!-- create 3 columns on desktop and 1 in mobile -->
<div class="col-12 col-lg-4"> <div id="profileData" class="cards"></div>
</div>
<div class="col-12 col-lg-5"> <div id="shippingData" class="cards"></div>
<div id="paymentData" class="cards mt-2"></div>
</div>
<div class="col-12 col-lg-3 cards" id="cartReview">
<h2>Resumo do pedido</h2>
<a class="cartPopupView reviewItemsLink">Revisar itens</a>
</div>
</div>
Novo CSS:
/* CHECKOUT UPGRADE 3.1 */
.currentStepCard { background-color: white; box-shadow: 0 5px 5px #7759101f; border: 1px var(--primary) solid;}
.currentStepTitle { color: var(--primary); text-decoration: underline; }
.finishPurchaseButtonMobile {
/*position: fixed;
width: 100%;
left: 0;
bottom: 0;
border-radius: 0;*/
}
#mercadopagoButtonForBoleto {
display: block;
padding: 48px 0 0 0;
background-image: url(https://www.interago.com.br/App/Extensions/10/tag/img/boleto.svg);
background-size: 55px;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
transition: 0.3s ease;
text-align: center;
border: 3px solid #e6e6e6;
border-radius: 10px;
}
#mercadoPagoButtonForPIX {
display: block;
padding: 48px 0 0 0;
background-image: url(https://www.interago.com.br/App/Extensions/10/tag/img/pix.svg);
background-size: 55px;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
transition:0.3s ease;
text-align: center;
border: 3px solid #e6e6e6;
border-radius: 10px;
}
#mercadopagoButtonForCard {
display: block;
padding: 48px 0 0 0;
background-image: url(https://www.craft.interago.com.br/App/Extensions/10/tag/img/paymentCreditCard.svg);
background-size: 48px;
background-position: center 4px;
background-repeat: no-repeat;
cursor: pointer;
transition: 0.3s ease;
text-align: center;
border: 3px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
margin-top:10px;
}
.paymentMethodContent {
margin: 10px 0;
padding: 5px 0px;
border: 1px solid #e6e4e4;
border-radius: 5px;
box-shadow: 0 2px 2px aliceblue;
color: #686868;
cursor: pointer;
transition: 0.3s ease;
background-size: 48px;
background-position: 5px;
background-repeat: no-repeat;
padding-left: 52px;
align-items: center;
width: 100%;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
#couponDiscountMessage {
font-size: 14px;
line-height: 18px;
font-weight: bold;
text-align: right;
animation: scaleIn 0.3s ease-out forwards;
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
Mais melhorias em elementos específicos:
- Adicionar !import em .invalidMessage
- Em #paymentMethods, mudar para:
- font-size: 14px;
- line-height: 19px;
- margin-left: -10px;
- margin-right: -10px;
- em .resetPaymentMethod e .paymentOptionsLink, deixar a fonte um pouco maior, font-size:15px;
- em .paymentMethodContent h4, .paymentMethodContent p, adicionar padding:0 10px para melhorar o espaçamento
Melhorias gerais
- Agora as etapas são numeradas: 1. Seus dados; 2. Entrega e 3. Pagamento;
- O campo do cupom está abaixo do perfil
- Os visitantes logados não precisam mais confirmar os dados, isso é automático
- Nos dados pessoais, “Usar dados” foi alterado para “Continuar para Entrega”
- Em Entrega, o botão “Usar Endereço” foi alterado para “Continuar para Pagamento”
- Além dos campos, os nomes dos campos também ficam vermelho caso estejam com problema
- A rolagem força ir para o campo com problema ao tentar Continuar
- Os cards de dados pessoais, entrega e pagamento foram melhor dividos para personalização e destaque durante as etapas
- O botão de buscar ficava quebrado em algumas resoluções
- No endereço, todos os campos inválidos ficam com a label em vermelho também
- As opções de entrega agora tremem por 2 segundos ao invés de 1
- Em resoluções menores de 786, o botão de finalizar ganha uma classe .finishPurchaseButtonMobile
- Se o endereço já estiver preenchido, o botão de escolher endereço aperta sozinho
- Ao buscar CEP, o botão fica inativo até que o resultado seja apresentado, evitando múltiplos cliques
- Ao digitar o CEP, caso ele esteja correto e passe 2s sem atividade, ele busca automaticamente
- Maior espaçamento da área de pagamento, remoção da mensagem “Escolha como efetuar o pagamento”
- Mercado Pago sem cadeado do Mercado Livre e com abas para boleto e mix
- Lista de outros pagamentos com uma melhor visualização
- Em cada método de pagamento, foram aplicados melhoramentos de layout e mais clareza nas informações - cada método de pagamento mostra seu valor
- Anteriormente, havia diferença entre a escolha de fretes grátis e outros pagamentos no resumo do pedido
- Desde o princípio do layout, o preço é atualizado com refreshCartTotalPrice() para saber exatamente quanto vai pagar
- O desconto do método de pagamento, quando ativo, acompanha até o final do pedido, sendo atualizado pedido a pedido e ao final ao escolher o pagamento
- A mensagem da aplicação do cupom agora está no CSS para edição dos efeitos
- Fix: Mercado Pago, ao escolher outro método de pagamento, estava com problema
- Correção de verificação de produtos para a finalização do checkout
- Verificação de conexão com a internet
⚙️ Configurações
Caminho do checkout: O caminho do checkout por padrão é /comprar. Neste caminho terão dois arquivos: checkout.php e checkoutFinish.php os quais, respectivamente, representam a tela de checkout e a tela de pedido realizado.
Auto cancelamento de pedidos: É uma rotina para auto-cancelar os pedidos que não foram pagos a partir da quantidade de dias inseridos. (não habilitado, todos os pedidos precisam ser cancelados manualmente).
💳 Configurações > Tipos de pagamentos
Há por padrão 3 tipos de pagamentos:
Pagamento manual
O visitante recebe na tela do pedido e e-mail as informações inseridas nos campos Título e Informações, respectivamente. A aprovação ou não deste pagamento é realizado manualmente.
PicPay
Pagamento pelo aplicativo do PicPay. É necessário inserir as chaves disponíveis do PicPay via x-picpay-token e x-seller-token, ou seja, precisa de uma conta.
Link do PicPay Empresas para abrir a conta
Como pegar as chaves do PicPay
🚨 As duas chaves são adicionadas no mesmo campo, basta pular uma linha, onde x-picpay-token vai na primeira linha e o x-seller-token na segunda linha. Assim:
O PicPay permite pagamento com saldo em conta e parcelamento no cartão, conforme configurado em conta. ⭐️ É importante colocar uma foto legal na conta do PicPay, o cliente verá como a imagem de sua loja.
Mercado Pago
Precisa de uma conta no Mercado Pago.
O Mercado Pago abre os campos de cartão de crédito por padrão e permite, além do cartão de crédito, o pagamento por boletos e PIX. Sobre as configurações:
- As chaves do Mercado Pago são adicionadas juntas no mesmo campo. Na primeira linha temos a Public Key e na segunda linha o Access Token. Veja aqui como pegar as credenciais.
- Na segunda linhe é o access token, como acima.
- Habilitar o recebimento via Boletos com o Mercado Pago. É necessário especificar a validade.
- Habilitar o recebimento via PIX com o Mercado Pago. É necessário especificar a validade.
Link para entender melhor as taxas do Mercado Pago. No Painel, precisa entrar na sessão Custos para realizar as configurações.
🌎 Atualizar
Suba novamente os arquivos de checkout.php e checkoutFinish.php caso mudou o caminho ou mudou o estilo no layout. As demais configurações são atualizadas em tempo real.
🛒 Mecânica do checkout
De forma resumida, o checkout possui 4 passos, a saber:
1. Revisão dos itens
A revisão dos itens ocorre de forma automática ao carregar o checkout e há vários fatores que podem intorromper o processo já no início. Por exemplo:
👆🏻 Caso todos os itens estejam indisponíveis. O visitante é convidado a retornar à loja. Seu carrinho é limpo automátimente.
👆🏻 Caso o visitante entre no checkout sem o carrinho, por algum motivo. Ele verá essa tela onde é impossível comprar.
👆🏻 Uma situação mais comum é a checagem de estoque retornar indisponibilidade para determinados itens. Nessa situação somente os itens indisponíveis são removidos.
💡 A checagem de estoque ocorre no início e fim do processo do checktou para evitar que itens indisponíveis sejam vendidos.
💡 Caso o visitante queira editar o carrinho, é possível tocar em Revisar os itens para editar os produtos. Ao sair do carrinho o processo de checkout é reiniciado.
A revisão dos produtos utiliza a extensão #6 do carrinho e a extensão #4 do catálogo
2. Perfil do comprador
A chave principal de compra é o e-mail do comprador. O primeiro campo é o de e-mail e seu preenchimento pode levar para 2 caminhos.
Usuários que já possuem conta: os usuários que já possuem conta receberão 1 código de 4 números para entrar e carregar seus dados.
Os dados do usuário são os itens da extensão #8 Área restrita.
O disparo de e-mails é realizado pela extensão #7 Disparador de Notificações.
Conforme a imagem acima é possível comprar como pessoa física ou jurídica. A alteração dos dados neste tela altera automaticamente o usuário do visitante.
⚠️ Mesmo que o visitante faça uma alteração em sua conta, os dados utilizados para cada pedido são mantidos para o pedido, ou seja, não adianta alterar nada depois de comprado.
A qualquer momento é possível Sair da conta para resetar os campos para recomeçar.
💡Usuários que não possuem conta: Seu cadastro é criado automaticamente para a compra sem precisar sair do checkout 🙌🏻
3. Endereço
O preenchimento do CEP utiliza o VIACEP e OpenStreet para encontrar o endereço, ou seja, depende da disponibilidade destes serviços.
Para saber mais sobre as estimativas de frete, veja a documentação da extensão #9 Envios
Veja os detalhes importantes sobre o endereço:
- A busca pelo CEP para auto preenchimento;
- Os dados do endereço em si. É importante preencher quem receberá a entrega (este campo vem preenchido com o nome do comprador)
- Usar este endereço para ir para pagamentos. O endereço é vinculado automaticamente à conta do comprador.
- Como os endereços são vinculados à conta, estão sempre disponíveis para utilização.
Com o preenchimento dos dados, acontecem 2 processamentos importantes:
- endereço e as regras da loja: É Neste momento que é checado se a loja possui frete grátis ou se dá frete grátis por condições de distância (incluindo a não entrega).
🚨 Os cálculos de distância dependem do retorno do OpenStreet, ou seja, pode ocorrer um NÃO FUNCIONAMENTO e simplesmente cobrar o frete. - Estimativas: Conforme configurado na extensão #9 Envios, as opções de frete ficarão disponíveis para o comprador, conforme exemplo abaixo.
4 - Pagamento
O pagamento depende das configurações da loja. Veja na imagem todos as formas possíveis e sua exibição:
- Como padrão nas lojas, é exibido a opção de pagamento por cartão de crédito, no caso, é necessário ter a conta do Mercado Pago.
- Ainda na caixa do Mercado Pago, pagamento por boleto.
- Ainda na caixa do Mercado Pago, pagamento por PIX
- Utilização do pagamento por QR Code para pagar via PicPay
- Opção de pagamento manual, onde as informações na tela são as preenchidas nas configurações.
⚠️ Informações importantes:
👉🏻 O pagamento via cartão de crédito é realizado ao tocar em finalizar pedido e não ao Confirmar.
👉🏻 Os pagamentos por Boleto, PIX e PicPay são gerados ao finalizar o pedido, então o cliente verá o QR Code ou código de barras na tela de finalização do pedido.
👉🏻 O Mercado Pago armazena o cartão de crédito e o mesmo pode ser reutilizado nas próximas compras, entretanto, sempre é necessário colocar o código de segurança.
👉🏻 Mesmo que o pagamento não seja aprovado ou fique em aguardando (boleto, pix...) acontece a baixa em estoque dos itens comprados.
👉🏻 O Mercado Pago e o PicPay informam automaticamente a loja sobre a aprovação do pagamento e o status do pedido é atualizado automaticamente. O cliente recebe e-mails automaticamente também sobre isso.
👉🏻 O PicPay deixa pagar em até 7 dias.
👉🏻 Todos os pedidos precisam ser cancelados manualmente.
💰 Pedidos
Assim que o visitante finaliza o pedido e entra na tela de pedido finalizado, o pedido está formalmente efetivado. A tela que o visitante verá é semelhante a este exemplo:
- O número do pedido não é sequencial por loja, ele segue uma ordem do Interago para todas as lojas.
- Data de realização do pedido após todo o processamento (não é no momento do toque em finalizar pedido).
- O prazo de entrega conforme cálculos de envios. Caso o pedido não esteja pago, essa data é alterada posteriormente de forma automática.
- Serviço de pagamento sem detalhes da foram
- Valor total do pedido
- Situação do pedido. Caso o pedido não seja aprovado pela financeira, ele ficará como aguardando, assim como demais métodos (como o PicPay que mostra como pagar nesta tela).
- Instruções de pagamento. No caso de boleto e PicPay essa tela é atualizada automaticamente ao detectar o pagamento, sem precisar recarregar.
- Ver mais detalhe do pedido na área exclusiva (extensão #8)
- Produtos comprados
- Informações do pagador
- Informações de envio, conforme recebimento nos Correios ou Fretnet (extensão #9)
Visualização do pedido como lojista
1. O lojista pode realizar a alteração do prazo de entrega. Em lojas onde a política de prazo não é definida (por exemplo em lojas com frete SEMPRE grátis) este valor fica a definir. ✉️ O visitante é informado automaticamente sobre as mudanças de prazos em tempo real via e-mail.
2. Alteração manual dos status, é importante entender todos os status:
#1 Cancelado: O pedido é cancelado. O estoque retorna para os itens comprados. O visitante é notificado por e-mail. Sempre alterado manualmente.
#2 Devolvido: Quando o dinheiro é devolvido. Somente Mercado Pago avisa automaticamente. NÃO retorna os itens para estoque. O visitante é notificado por e-mail.
#3 Autorizado: O Mercado Pago cartão de crédito pode criar este status. Significa que o pagamento foi autorizado mas ainda não caiu na conta. Pode ser utilizado manualmente para permitir andamento de um pedido mesmo sem seu pagamento. O visitante é notificado por e-mail.
#4 Pago: O melhor de todos. O Mercado Pago e o PicPay avisam automaticamente e fazem a alteração de status. É necessário alterar manualmente para pedidos com pagamento manual. O visitante é notificado por e-mail.
#5 Preparado: Status alterado manualmente assim que o pedido está preparado e normalmente hábil em relação a nota fiscal. O visitante é notificado por e-mail.
#6 Enviado: Status manual para avisar que o pedido foi enviado. É importante adicionar o código de rastreio. O visitante é notificado por e-mail.
#7 Entregue: Status manual para avisar que o pedido realmente acabou. O visitante é notificado por e-mail.
3. Informações detalhadas relacionadas à cobrança e sua composição.
4. Informações de pagamento e o retorno dos pagamentos caso necessário (da API de integração)
5. Informações do comprador caso seja necessário entrar em contato com o mesmo.
6. Informações de entrega. 🚚 É importante adicionar o código e URL de rastreamento no pedido assim que ele for enviado. ✉️ O visitante é notificado automaticamente com o link e o código via e-mail.
7. Itens do pedido. Mesmo que um produto seja deletado, ele ficará disponível no produto.
8. Status de notificações. API e alterações criam log automático no pedido. Notificações com o sino é onde o cliente foi avisado, com o sino cortado significam que é apenas para controle do pedido sem notificação. Ao adicionar informações manualmente o visitante é avisado por e-mail automaticamente.
Visualização de pedido pelo cliente
A visualização de pedido na área do cliente não possui nenhuma forma de interação, é apenas para consulta. É importante que o lojista saiba que via atendimento ele precisa solucionar os produtos via painel manualmente, não tem como o cliente fazer nada em sua tela.
🖌️ Layout
Checkout.php
O checkout precisa essencialmente de 2 scripts, o cart2.js (da extensão de Carrinho e do checkout.js, onde ocorre praticamente todo o processamento e chamadas da interface. Os arquivos precisam ser chamados assim:
$render .= "
<script src='https://www.interago.com.br/App/Extensions/6/tag/cart2.js' loading='lazy'></script>
<script>
let cart = new Cart();
cart.mainEvents();
</script>
<!-- load www.interago.com.br/App/Extensions/10/tag/checkout.js with modular attribute-->
<script type='module' src='https://www.interago.com.br/App/Extensions/10/tag/checkout.js' data-modular='true' wId='".$websiteData['siteIdToken']."' data-t='".$websiteData['domainToken']."' data-w='".$websiteData['siteId']."'></script>
";
Obtendo dados do website:
return $websiteData = array(
"siteId" => $siteId,
"siteIdToken" => $siteIdToken,
"siteName" => $siteName,
"siteDomain" => $siteDomain,
"configPath" => $configPath,
"configMethodManual" => $configMethodManual,
"configMethodManualData" => $configMethodManualData,
"configMethodPicPay" => $configMethodPicPay,
"configMethodPicPayData" => $configMethodPicPayData,
"configMethodMercadoPago" => $configMethodMercadoPago,
"configMethodMercadoPagoData" => $configMethodMercadoPagoData,
"domainToken" => $domainToken
);
echo $websiteData['siteName']; // show siteName
Obtendo dados da extensão de SEO (#3)
return $seoData = array(
"seoAuthor" => $seoAuthor,
"seoCoordinates" => $seoCoordinates,
"seoState" => $seoState,
"seoRegion" => $seoRegion,
"seoBaseHref" => $seoBaseHref,
"seoCountry" => $seoCountry,
"seoOrganizationName" => $seoOrganizationName,
"seoOrganizationUrl" => $seoOrganizationUrl,
"seoOrganizationLogo" => $seoOrganizationLogo,
"seoOrganizationLogoWidth" => $seoOrganizationLogoWidth,
"seoOrganizationLogoHeight" => $seoOrganizationLogoHeight,
"seoOrganizationPostalCode" => $seoOrganizationPostalCode,
"seoOrganizationAddress" => $seoOrganizationAddress,
"seoOrganizationHoursWeek" => $seoOrganizationHoursWeek,
"seoOrganizationHoursWeekend" => $seoOrganizationHoursWeekend,
"seoOrganizationPhone" => $seoOrganizationPhone
);
echo $seoData['seoOrganizationName']; //show organization name
🚨 Não é interessante que as páginas de checkout ou checkoutFinish apareçam no Google, por isso, não esqueça de atribuir nofollow:
<meta name="robots" content="noindex, nofollow">
🚨 A maior parte do CSS é usada para estilizar algum elemento carregado de forma assíncrona. Ao apagar algum CSS, algo ficará sem estilo.
checkoutFinish.php
Segue basicamente o mesmo perfil do checkout.php. Precisa de um script de JS, checkoutFinish.js:
$render .= '
<script src="https://www.craft.interago.com.br/App/Extensions/10/tag/finishPurchase.js" id="finishPurchaseJs" wId="'.$websiteData['siteIdToken'].'" type="module"></script>
';
✉️ Notificações enviadas no processo
Perfil: Ao solicitar o token caso já tenha uma conta ativa.
Mudanças de status:
switch($status) {
case 0: //waiting for payment
$title = 'Pedido #'.$_POST['orderId'].' aguardando pagamento';
$message = '<p>Estamos aguardando o pagamento de seu pedido #'.$_POST['orderId'].'. Assim que o pagamento for confirmado, enviaremos um e-mail com a confirmação do pagamento e o envio do pedido.</p><p><small>Desconsidere essa mensagem caso o pagamento já tenha sido efetuado. O não pagamento cancelará o pedido automaticamente.</small></p>';
break;
case 1: //canceled
$title = 'Pedido #'.$_POST['orderId'].' cancelado!';
$message = '<p>Seu pedido #'.$_POST['orderId'].' foi cancelado. Estamos a disposição nos canais da loja caso precise de ajuda. Obrigado.</p>';
break;
case 2: //refunded
$title = 'Pedido #'.$_POST['orderId'].' teve o pagamento devolvido';
$message = '<p>Seu pedido #'.$_POST['orderId'].' teve o pagamento devolvido. Estamos a disposição nos canais da loja caso precise de ajuda. Obrigado.</p>';
break;
case 3: //authorized
$title = 'Pagamento autorizado para o pedido #'.$_POST['orderId'];
$message = '<p>Seu pedido #'.$_POST['orderId'].' teve o pagamento autorizado. Estamos preparando o envio do pedido e em breve enviaremos um e-mail com a confirmação do envio. Obrigadp pela compra.</p>';
break;
case 4: //paid
$title = 'Pagamento confirmado! Pedido #'.$_POST['orderId'];
$message = '<p>Seu pedido #'.$_POST['orderId'].' teve o pagamento confirmado. Estamos preparando o envio do pedido e em breve enviaremos um e-mail com a confirmação do envio. Obrigadp pela compra.</p>';
break;
case 5: //prepared
$title = 'Pedido #'.$_POST['orderId'].' preparado!';
$message = '<p>Seu pedido #'.$_POST['orderId'].' foi preparado e está pronto para envio. Em breve enviaremos um e-mail com a confirmação do envio. Obrigado pela compra.</p>';
break;
case 6: //sent
$title = 'Pedido #'.$_POST['orderId'].' enviado!';
$message = '<p>Seu pedido #'.$_POST['orderId'].' foi enviado. Obrigado mais uma vez pela compra e veja as atualizações na área do cliente em nossa loja.</p>';
break;
case 7: //delivered
$title = 'Pedido #'.$_POST['orderId'].' entregue!';
$message = '<p>Entrega realizada para o pedido #'.$_POST['orderId'].'. Obrigado por comprar em nossa loja e aguardamos suas novas compras.</p>';
break;
}
Exemplo de mensagem com resumo do pedido:
Composição: Detalhes para pagar > Produtos > Frete > forma de pagamento > Valor total
FIM 🏞️ 2