Antes de iniciar as configurações dentro da Wake, se faz necessário os seguintes passos:
- Geração token de integração Wake
- Instalação do App Wake dentro da AppMax
1.Geração do Token:
Para gerar seu token, acesse o painel administrativo da plataforma e vá até Extensões e Integrações > Tokens:
Ao abrir a tela clique em “Adicionar Token”, selecione Pedidos e marque a permissão de Atualizar status do pedido e de rastreamento do pedido:
Preencha os dados gerais da integração como nome, tipo da integração e responsável técnico:
Após concluir o processo, clique em salvar no final da página.
2.Instalação App Wake dentro da AppMax
Dentro da loja de aplicativos da AppMax, encontre o app da Wake e clique em Instalar> Continuar:
Na sequência, será necessário inserir o Token Wake (gerado no passo anterior). Após a inserção, clique em Instalar.
Concluída a instalação do aplicativo, realize as configurações solicitadas pela Appmax como nome da loja e empresa.
Finalizado esse passo copie o identificador (Store ID) gerado para ser utilizado na
configuração na Wake. Copie apenas o código:
Configurações no admin Wake
A configuração do conector é feita nas seguintes etapas:
- Formas de Pagamento
- Grupos de Pagamento e Parcelamentos
- Editor HTML (apenas para lojistas que utilizam o Storefront 1.0)
1ª Etapa - Formas de Pagamento
No painel administrativo da plataforma acesse o menu Pagamentos >> Conectores de Pagamentos >> Selecione o conector AppMax>> "Instalar Configuração"
Descrições dos campos dos métodos de pagamentos disponíveis:
Cartão de crédito:
Store_id: É o código da sua loja gerado no momento da configuração do aplicativo AppMax, conforme mencionado no passo acima na aba “ Instalação App Wake dentro da AppMax”
store_front: Indica a versão que a loja está utilizando.
- Se sua loja é Storefront 1.0: preencha com v1;
- Se sua loja é Storefront 2.0: preencha com v2;
Antifraude: O conector não é compatível com antifraude interno Wake, sendo todo o processo de validação da compra feita através do antifraude interno da Appmax
Boleto:
Store_id: É o código da sua loja gerado no momento da configuração do aplicativo AppMax, conforme mencionado no passo acima na aba “ Instalação App Wake dentro da AppMax”
Pix:
Store_id: É o código da sua loja gerado no momento da configuração do aplicativo AppMax, conforme mencionado no passo acima na aba “ Instalação App Wake dentro da AppMax”
2°Etapa - Gerenciamento de Pagamentos
Após as primeiras configurações, você deverá clicar em Gerenciamento de Pagamentos>> e encontrar o tipo de pagamento AppMax que deseja configurar (Cartão, pix e boleto) e seguir o passo a passo completo no artigo Grupos e Pagamentos.
Especificidades para quem utiliza Storefront 1.0:
Ajuste de Layout
A configuração PIX necessita de alguns ajustes de Layout apenas para quem utiliza o Storefront 1.0. Uma delas é a exibição do botão "Copiar Código", que está no código-fonte da página de "Fechamento" e, por padrão, vem configurado como display:none de forma nativa.
Como são ajustes mais técnicos que necessitam de profissionais especializados, sugerimos que verifique com a sua agência esse e outros ajustes de layout necessários para que a experiência de pagamentos com PIX seja completa.
E-mail Transacional
Se você utilizar o Storefront 1.0, nós disponibilizamos algumas tags para enviar os dados do PIX nos e-mails transacionais, confira qual tag utilizar no artigo 'Como editar os e-mails transacionais'.
Atenção: Informamos que caso a imagem do QR Code seja no formato .svg, o Gmail não exibirá pois esse formato não é suportado pelo Gmail.
Exibição do QR Code para pagamentos no 'Minha Conta'
Por padrão, a exibição do QR Code no Storefront 1.0 vem desabilitada. Saiba como ajustar acessando o artigo Detalhes do Minha Conta.
3ª Etapa - Gestor de script (apenas Storefront 1.0)
Para lojistas que utilizam o checkout storefront na versão 1.0, se faz necessário inserir 3 scripts, para isso na plataforma Wake, entre em Configurações > Gestor de Script:
Em seguida, clique na opção "Adicionar Script".
Na sequência a tela geral será aberta e você deverá preencher os seguintes campos de acordo com cada script:
Script Obter detalhes pagamento
• Nome: Obter detalhes pagamento
• Data Inicial: (Deixe em branco para que o script seja exibido a partir do cadastro)
• Data Final: (Deixe em branco para que o script seja exibido indefinidamente)
• Status do Script Ativo: (Deixe a opção marcada)
• Prioridade: 2
• Posição do Script na página: (Deixe a opção Footer - Última linha)
• Páginas que o script será inserido: Carrinho
• Identificador de Página: Confirmacao
• Conteúdo do script: Para que a integração funcione corretamente, você deve copiar o script abaixo e alterar a informação do storeId com o número gerado ao criar sua loja dentro do aplicativo Appmax.
Para mais detalhes: Caso tenha dúvidas sobre onde encontrar ou gerar o storeId, consulte o tópico "Instalação App Wake dentro da AppMax" neste documento.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script async>
function addStylesResultPayment() {
const style = document.createElement("style");
style.innerHTML = `
#pix, #boleto {
margin: 20px 0;
}
.qr-code {
width: 200px;
height: 200px;
display: block;
margin: 0 auto 15px;
}
.line-copy-container {
display: flex;
align-items: center;
margin-top: 10px;
}
.line-copy-container input {
width: calc(100% - 70px - 10px);
padding: 5px;
}
.line-copy-container button {
height: 30px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.line-copy-container button svg {
width: 18px;
height: auto;
fill: #fff;
}
.line-copy-container button.copied {
background-color: green;
color: white;
border: 1px solid green;
}
`;
document.head.appendChild(style);
}
function copyToClipboard(button, text) {
const input = document.createElement("input");
input.value = text;
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
<path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"/>
</svg>
`;
button.classList.add("copied");
setTimeout(() => {
button.innerHTML = "Copiar";
button.classList.remove("copied");
}, 3000);
}
function createLineCopyContainer(text) {
return `
<div class="line-copy-container">
<input type="text" value="${text}" readonly />
<button onclick="copyToClipboard(this, '${text}')">Copiar</button>
</div>
`;
}
const containerToInsertResult =
document.getElementsByClassName("box-pedido-numero")?.[0];
function renderPix(qrCode, emv) {
containerToInsertResult.insertAdjacentHTML(
"beforeend",
`<img src="data:image/png;base64, ${qrCode}" alt="QR Code" class="qr-code" />${createLineCopyContainer(
emv
)}`
);
}
function renderBoleto(pdfLink, digitableLine) {
containerToInsertResult.insertAdjacentHTML(
"beforeend",
`<a href="${pdfLink}" target="_blank">Baixar PDF do Boleto</a>${createLineCopyContainer(
digitableLine
)}`
);
}
(async function () {
const orderNumber =
document.getElementsByClassName("pedido-numero")?.[0]?.innerText;
if (orderNumber) {
const storeId = "INSIRA O NÚMERO DA SUA LOJA AQUI";
const apiUrl = `https://wake.appmax.com.br/v1/order/payment-method-info/${orderNumber}`;
const resultPayment = await fetch(apiUrl, {
headers: {
"store_id": storeId
}
}).then((response) => response.json());
addStylesResultPayment();
const pixPaymentMethod = 1;
const boletoPaymentMethod = 2;
if (resultPayment.paymentMethod === pixPaymentMethod && resultPayment.pix.qrCode) {
renderPix(resultPayment.pix.qrCode, resultPayment.pix.emv);
} else if (resultPayment.paymentMethod === boletoPaymentMethod && resultPayment.boleto.pdfLink) {
renderBoleto(resultPayment.boleto.pdfLink, resultPayment.boleto.digitableLine);
}
} else {
window.alert("No order number found.");
}
})();
</script>
</body>
</html>
Ao finalizar o script para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida, em "Publicar".
Recomendações Gerais
- Cancelamento / Estorno de Pagamentos: A opção de Cancelamento do pedido está disponível em nossa API Pública, assim como a opção de Estorno total ou parcial. Essas ações devem ser feitas por uma aplicação externa usando nossa API Pública;
- Realize um pedido teste com um cartão válido para verificar se o pagamento transacionará corretamente na AppMax;
- Faça um pedido teste com Boleto AppMax, para verificar se o boleto será gerado corretamente, caso vá utilizar esta forma de pagamento;
- Faça um pedido teste com PIX AppMax, para verificar se o QR Code será gerado corretamente, caso vá utilizar esta forma de pagamento;
- Ao tentar realizar o pedido, o sistema de segurança da plataforma poderá bloquear as URLs externas da Appmax. Para orientações sobre o desbloqueio, confira o conteúdo Gerenciar Políticas de Segurança;
- Acesse o material disponibilizado pela AppMax em casos de dúvidas
Comentários
0 comentário
Por favor, entre para comentar.