Índice

⚙️ Configurações

💳 Configurações > Tipos de pagamentos

🌎 Atualizar

🛒 Mecânica do checkout

💰 Pedidos

🖌️ Layout

✉️ Notificações enviadas no processo

⚙️ 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:

1. 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.
   
2. Na segunda linhe é o access token, como acima.
3. Habilitar o recebimento via Boletos com o Mercado Pago. É necessário especificar a validade.
4. 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:

1. A busca pelo CEP para auto preenchimento;
2. Os dados do endereço em si. É importante preencher quem receberá a entrega (este campo vem preenchido com o nome do comprador)
3. Usar este endereço para ir para pagamentos. O endereço é vinculado automaticamente à conta do comprador.
4. 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:

1. 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.
2. 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:

1. 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.
2. Ainda na caixa do Mercado Pago, pagamento por boleto.
3. Ainda na caixa do Mercado Pago, pagamento por PIX
4. Utilização do pagamento por QR Code para pagar via PicPay
5. 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:

1. O número do pedido não é sequencial por loja, ele segue uma ordem do Interago para todas as lojas.
2. Data de realização do pedido após todo o processamento (não é no momento do toque em finalizar pedido).
3. O prazo de entrega conforme cálculos de envios. Caso o pedido não esteja pago, essa data é alterada posteriormente de forma automática.
4. Serviço de pagamento sem detalhes da foram
5. Valor total do pedido
6. 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).
7. Instruções de pagamento. No caso de boleto e PicPay essa tela é atualizada automaticamente ao detectar o pagamento, sem precisar recarregar.
8. Ver mais detalhe do pedido na área exclusiva (extensão #8)
9. Produtos comprados
10. Informações do pagador
11. 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

oi

FIM 🏞️ 2