Integrando com a Wake

Conectores de Pagamento - Como configurar AppMax

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

Geração do Token:

Para gerar seu token, acesse o painel administrativo da plataforma> Configurações> Integrações > Tokens:

Ao abrir a tela clique em “Adicionar Token” e selecione a permissão de Atualizar status 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.

Instalação App Wake no Painel Administrativo 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 realizada na Wake. Copie apenas o código:

Configurações no ADM 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 checkout 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 se a loja está utilizando o checkout storefront 2.0 e deve ser preenchido com v2 caso sim e v1 caso não.

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>

<body>

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>

button.classList.add("copied");

setTimeout(() => {

button.innerHTML = "Copiar";

button.classList.remove("copied");

}, 3000);

}

function createLineCopyContainer(text) {

return `

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

Scripts Cartão

Nome: Scripts Cartão

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: Deixe em branco

Posição do Script na página: (Deixe a opção Footer - Última linha)

Páginas que o script será inserido: Todas

Identificador de Página: *Fechamento|*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" na documentação anterior.

const apiURLDelete = "https://wake.appmax.com.br/v1/credit-card/";

const storeId = "INSIRA O NÚMERO DA SUA LOJA AQUI";

window.dataPaymentPost = function(suggestedCards, paymentGroupId, cartId) {

let localSuggestedCards = SuggestCardControler.config.useMock ? SuggestCardControler.config.mockSuggestedCards : suggestedCards;

SuggestCardControler.init(localSuggestedCards, paymentGroupId, cartId);

};

const SuggestCardControler = {

init: function(suggestedCards, paymentGroupId, cartId) {

paymentGroupId && this.actions.adjustLayout(paymentGroupId);

if(!Array.isArray(suggestedCards) || !suggestedCards[0]?.CartoesSugeridos) return;

let localSuggestedCards = suggestedCards[0]?.CartoesSugeridos;

if (localSuggestedCards && localSuggestedCards.length > 0) {

this.render.suggestCard(localSuggestedCards);

this.handlers.radioChange(localSuggestedCards);

this.handlers.modalConfirmation(localSuggestedCards[0]?.Id, paymentGroupId, cartId);

this.handlers.selectChange();

this.actions.cloneOptions();

}

render: {

card: function(cartao, index) {

const cardBrand = cartao.Bandeira?.toLowerCase() || Fbits.Gateway.getCardBrand(cartao.Numero);

const id = `card-id-${index}`;

const cardNumber = cartao.Numero?.trim()?.replace(/(.{4})/g,"$1 ")?.replace(/[xX]/g, '*');

return `<li class="card-item">

<div>

<div>

<p>${cardNumber} <span class='txt-cvv'>CVV: ***</span></p>

<p>${cartao.Nome} </p>

</div>

</span>

</div>

</label>

<label for="parcel-${index}">Parcelamento</label>

</div>

</li>`;

newCardOption: function(length) {

const CardId = `card${length}`;

return `<li class="card-item">

<div><p>Novo cartão de crédito</p></div>

</label>

</li>`;

modalExclusion: function() {

const ModalTitle = "Confirmação de exclusão";

const modalBody = "Deseja realmente excluir esse cartão?";

const modalError = "Erro ao excluir o Cartão. Tente novamente.";

const modalSuccess = "Cartão excluido com sucesso!";

return `<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

<h4 class="modal-title" id="myModalLabel">${ModalTitle}</h4>

</div>

<p>${modalBody}</p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>

<button type="button" class="btn btn-primary" id="confirmDelete">Excluir</button>

<div id="errorMessage" class="error-msg alert alert-danger hide">${modalError}</div>

<div id="successMessage" class="error-msg alert alert-success hide">${modalSuccess}</div>

</div>

</div>`;

suggestCard: function(suggestedCards) {

const ulElement = $('<ul class="suggest-card"></ul>');

suggestedCards?.forEach((cartao, index) => ulElement.append(this.card(cartao, index)));

ulElement.append(this.newCardOption(suggestedCards.length));

ulElement.append(this.modalExclusion());

const activeNavItem = $(".nav-item.active .nav-link");

$('ul.suggest-card').remove();

if(SuggestCardControler.config.layoutOrientation === "vertical") {

$(".new-checkout .formas-pagamento").addClass("vertical")

ulElement.insertAfter(activeNavItem);

}else {

ulElement.insertBefore("#myTabContent")

}

handlers: {

radioChange: function(suggestedCards) {

$("input[name='radio-suggest']").on('change', function () {

let cardKey = $(this).val();

let selectedCard = suggestedCards.find(c => c.Chave == cardKey);

let hiddenInputSuggestCard = `<input type="hidden" id="chaveCartao" name="chaveCartao" value="${cardKey}">`;

$("#chaveCartao").remove();

if (cardKey === 'new-card') {

$("#myTabContent").removeClass('hide-suggest-card');

} else if (selectedCard) {

$("#myTabContent").addClass('hide-suggest-card');

$(".fake-form").append(hiddenInputSuggestCard);

}

let findCardItem = $(this).closest('ul').find('.card-item');

findCardItem.removeClass('active');

$(this).closest('.card-item').addClass('active');

});

modalConfirmation: function(_, paymentGroupId, cartId) {

$('#confirmModal').on('show.bs.modal', function (event) {

$('#successMessage, #errorMessage').addClass('hide');

const buttonTarget = $(event.relatedTarget);

const cardId = buttonTarget.data('id');

$('#confirmDelete').click(function () {

SuggestCardControler.actions.deleteCard(cardId, paymentGroupId, cartId);

});

selectChange: function() {

//Funcao responsavel por clonar o select de parcelamento para os cartoes sugeridos

['select[data-gateway-parcelamento]', 'select[data-gateway-parcelamento-suggest]'].forEach(selector => {

$(selector).change(function () {

let selectedValue = $(this).val();

let otherSelect = $(selector === 'select[data-gateway-parcelamento]' ? 'select[data-gateway-parcelamento-suggest]' : 'select[data-gateway-parcelamento]');

if (otherSelect.val() !== selectedValue) {

otherSelect.val(selectedValue).trigger('change');

}

});

}

actions: {

deleteCard: function(cardId, paymentGroupId, cartId) {

let endpointURL = `${apiURLDelete}${Fbits.Carrinho.Usuario.Id}/${cardId}`

$.ajax({

url: endpointURL,

type: 'DELETE',

headers: {

'store_id': storeId

crossDomain: true

}).done(function(data) {

$('#successMessage').removeClass('hide');

setTimeout(function () {

$('#confirmModal').modal('hide');

location.reload();

}, 1500);

}).fail(function() {

$('#errorMessage').removeClass('hide');

});

cloneOptions: function() {

const mainSelectOptions = $('select[data-gateway-parcelamento] option').clone();

$('select[data-gateway-parcelamento-suggest]').append(mainSelectOptions);

adjustLayout: function(paymentGroupId) {

// if(paymentGroupId !== 9569) {

// return;

// }

const myTabContent = $("#myTabContent")

console.log(paymentGroupId)

if(SuggestCardControler.config.layoutOrientation === "vertical") {

const itemPayment = $(`[data-gateway-grupoformapagamento="${paymentGroupId}"]`).parent()

myTabContent.detach()

itemPayment.append(myTabContent);

}

myTabContent.addClass('hide-suggest-card');

}

config: {

useMock: false,

mockSuggestedCards: [

{

"CartoesSugeridos": [

{

"Chave": "12345678",

"Nome": "Joao Pedro",

"Numero": "411111XXXXXX1111",

"Bandeira": "visa"

{

"Chave": "987654321",

"Nome": "Joao Pedro",

"Numero": "411111XXXXXX1111",

"Bandeira": "mastercard"

]

}

layoutOrientation: 'vertical',

}

};

if(SuggestCardControler.config.layoutOrientation === "vertical") {

let interval = setInterval(function() {

if ($(".new-checkout .formas-pagamento").length) {

clearInterval(interval);

$(".new-checkout .formas-pagamento").addClass("vertical")

}

} , 100);

}

</script>

Ao finalizar o script para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida, em "Publicar".

CSS Cartão

Nome: CSS Cartão

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: Deixe em branco

Posição do Script na página: (Deixe a opção Footer - Última linha)

Páginas que o script será inserido: Todas

Identificador de Página: *Fechamento|*Confirmacao

Conteúdo do script: Para que a integração funcione corretamente, você deve copiar o script abaixo:

const css = `

.new-checkout .formas-pagamento.vertical {

display: flex;

flex-flow: column;

padding-top: 10px !important; }

.new-checkout .formas-pagamento.vertical .nav-item {

border: 2px solid #e9e9e9;

margin-bottom: 12px; }

.new-checkout .formas-pagamento.vertical .nav-item.active ul.suggest-card {

display: block; }

.new-checkout .formas-pagamento.vertical .nav-link {

display: flex;

align-items: center; }

.new-checkout .formas-pagamento.vertical .nav-link::after {

content: attr(data-gateway-nome);

color: #000;

display: inline-block; }

.new-checkout .formas-pagamento.vertical ul.suggest-card {

padding: 15px 10px 0;

display: none; }

.new-checkout .formas-pagamento .checkout-forma-pagamento-radio {

display: none; }

.new-checkout .formas-pagamento .card-item {

margin-bottom: 12px; }

.new-checkout .formas-pagamento .card-item:not(.active) {

background-color: #fff; }

.new-checkout .formas-pagamento .card-item:not(.active) label {

height: auto !important; }

.new-checkout .formas-pagamento .card-item .css-label {

display: flex;

align-items: center;

padding: 10px 15px;

cursor: pointer;

min-height: 59px;

border: 2px solid #e9e9e9; }

.new-checkout .formas-pagamento .card-item .css-label > div {

display: flex;

align-items: center;

min-height: 34px;

width: 100%; }

.new-checkout .formas-pagamento .card-item .css-label > div div {

flex: auto; }

.new-checkout .formas-pagamento .card-item .css-label .txt-cvv {

padding-left: 20px;

font-size: 11px; }

.new-checkout .formas-pagamento .card-item .flag {

display: block;

width: 33px;

height: 20px;

margin-right: 10px;

background: url("https://samuraiexpertsstorage.blob.core.windows.net/checkout-traycorp-sandbox/ico_cards.png") no-repeat;

background-size: 100% auto; }

.new-checkout .formas-pagamento .card-item .flag.img-visa {

background-position: 0 -20px; }

.new-checkout .formas-pagamento .card-item .flag.img-mastercard {

background-position: 0 -42px; }

.new-checkout .formas-pagamento .card-item .flag.img-elo {

background-position: 0 -82px; }

.new-checkout .formas-pagamento .card-item .flag.img-diners {

background-position: 0 -60px; }

.new-checkout .formas-pagamento .card-item p {

font-family: "Arial";

font-style: normal;

font-weight: 400;

font-size: 14px;

margin-bottom: 0; }

.new-checkout .formas-pagamento .card-item p + p {

font-size: 11px; }

.new-checkout .formas-pagamento .card-item .ico-del {

font-size: 20px;

color: #a3a3a3; }

.new-checkout .formas-pagamento .card-item .ico-del button {

background: none;

border: 0;

padding: 0;

cursor: pointer;

-webkit-appearance: none; }

.new-checkout .formas-pagamento .card-item .ico-del:hover {

color: #bf0c0c; }

.new-checkout .formas-pagamento .card-item .css-checkbox {

margin: 0 10px 0 0; }

.new-checkout .formas-pagamento .card-item.active .suggest-data {

display: flex; }

.new-checkout .formas-pagamento .card-item .suggest-data {

display: none;

justify-content: space-between;

align-items: center;

padding: 5px; }

.new-checkout .formas-pagamento .card-item .suggest-data label {

display: block;

font-weight: normal;

line-height: 20px;

padding-bottom: 4px; }

.new-checkout .formas-pagamento .card-item .suggest-data .col-parcel {

width: 100%; }

.new-checkout .formas-pagamento .card-item .suggest-data .col-parcel select {

width: 100%;

padding: 7px 8px;

border: 1px solid #ccc; }

.new-checkout .formas-pagamento .card-item .suggest-data .col-cvv {

max-width: 85px; }

.new-checkout .formas-pagamento label {

margin-bottom: 0; }

.new-checkout .formas-pagamento .tipo-forma-pagamento {

margin-right: 15px; }

.new-checkout .formas-pagamento .nav-tabs > li.active {

background-color: #f9f9f9; }

.new-checkout .formas-pagamento .nav-tabs > li.active a {

background: none;

border: 0; }

.new-checkout .formas-pagamento select[data-gateway-parcelamento] {

width: 100%;

padding: 10px 8px;

border: 1px solid #ccc;

margin-top: 5px; }

.new-checkout .formas-pagamento div#myTabContent {

border: 0;

padding-top: 0; }

.new-checkout .formas-pagamento .form-check-label {

display: flex;

align-items: center;

cursor: pointer; }

.new-checkout .formas-pagamento .form-check-label .form-check-input {

margin: 0 5px 0 0; }

.suggest-card ~ .hide-suggest-card {

display: none !important; }

.modal-dialog {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) !important; }

head = document.head || document.getElementsByTagName('head')[0],

style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';

if (style.styleSheet){

// This is required for IE8 and below.

style.styleSheet.cssText = css;

} else {

style.appendChild(document.createTextNode(css));

}

</script>

Ao finalizar o script para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida, em "Publicar".

Informações importantes:

O conector não é compatível com pedidos de assinatura
O conector não possui a feature de troca de pagamento

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

Integrando com a Wake

Saiba como realizar a integração da Wake com a Appmax.

Conectores de Pagamento - Como configurar AppMax

2°Etapa - Gerenciamento de Pagamentos

Especificidades para quem utiliza Storefront 1.0:

Ajuste de Layout

E-mail Transacional

Exibição do QR Code para pagamentos no 'Minha Conta'

3ª Etapa - Gestor de script (apenas storefront 1.0)

Recomendações Gerais