Cadastro do script Pix em sandbox

Clique em Configurações e selecione Gestor de scripts:

Clique em + Adicionar script:

Preencha os campos de acordo com a tabela:

⚠️

A grafia dos valores deve ser igual a tabela.

Em Conteúdo do script, insira o seguinte script:

<script>
const pixVariaveis = {
   MerchantId: "xxxxxxxxxxxxxxxxxxxxxxxx",
   Integration: "Gateway",
   Content_Type: "application/json",
   SoftDescriptor: "SD",
   redirect: 'follow',
   urlPixRequest: "https://paymentconnectorwakesandbox.cieloecommerce.cielo.com.br/api/returnpaymentcodes/pix"
};


if (document.querySelector('.pedido-pagamento span').textContent.toLowerCase().includes("pix") == true) {
   OpenLoadingModalPix();
   GeraPixRequest();
}

function GeraPixRequest() {
   const requestOptions = {
      method: 'POST',
      headers: {
         [pixVariaveis.MerchantId]: pixVariaveis.MerchantId,
         [pixVariaveis.Integration]: pixVariaveis.Integration,
         [pixVariaveis.SoftDescriptor]: pixVariaveis.SoftDescriptor,
         "Content-Type": pixVariaveis.Content_Type
      },
      body: JSON.stringify({
         loja: Fbits.Carrinho.Loja.Nome,
         pedido: Fbits.Carrinho.PedidoId,
         total: Fbits.Carrinho.ValorTotal,
         email: Fbits.Carrinho.Usuario.Email,
      }),
      [pixVariaveis.redirect]: pixVariaveis.redirect,
   };
   fetch(pixVariaveis.urlPixRequest, requestOptions).then(response => response.text()).then(
      result => {
         CloseLoadingModalPix();
         GeraPix(result);
      }
   ).catch(
      error =>
      GeraLinkRequestPixAfterRefresh()
   );
}

function GeraLinkRequestPixAfterRefresh() {

   OpenLoadingModalPix();
   CloseLoadingModalPix();
   var cookiePixJson = getItemWithExpiration("dadosPix");

   GeraPixCookieHtml(cookiePixJson);
}

function setItemWithExpiration(key, value, ttl) {

   if (value == "" || value == null) {
      GeraLinkRequestPixAfterRefresh();

   }

   if ((value == "" || value == null) && (document.getElementById('imgPix').src != undefined || document.getElementById('imgPix').src != null || document.getElementById('imgPix').src != "")) {
      return;
   }

   
   localStorage.setItem(key, JSON.stringify(value));
}


function getItemWithExpiration(key) {
   const itemStr = localStorage.getItem(key);
   return itemStr;
}

function GeraPixCookieHtml(dadosPix) {

   if (document.getElementById('imgPix') != undefined) {
      return;
   }

   const parsedData = JSON.parse(dadosPix);
   const innerData = JSON.parse(parsedData);
   const paymentPixParse = innerData.pix.qrCodeBase64Image;
   localStorage.setItem("code", innerData.pix.code)
   var qrCodeValue = "data:image/png;base64," + paymentPixParse;
   const img = document.createElement('img');
   img.src = qrCodeValue.toString();
   img.id = "imgPix";
   const elements = document.querySelectorAll('.row');

   if (elements.length >= 2) {
      const segundoElemento = elements[0];

      const label = document.createElement('label');
      label.textContent = 'Qr Code';
      label.style.display = 'block';
      label.style.fontFamily = 'Arial, sans-serif';
      label.style.fontSize = '36px';
      label.style.fontWeight = 'bold';
      label.style.color = 'black';
      label.style.marginTop = '10px';
      segundoElemento.appendChild(label);
      segundoElemento.appendChild(document.createElement('br'));

      img.width = 550;
      img.height = 400;
      img.style.marginBottom = '45px';
      segundoElemento.appendChild(img);
      segundoElemento.appendChild(document.createElement('br'));

      const botao = document.createElement('button');
      botao.textContent = 'Copia e Cola Pix';
      botao.style.color = '#fff';
      botao.style.background = '#49566f';
      botao.style.borderRadius = '0';
      botao.style.minWidth = '182px';

      botao.addEventListener('click', function () {
         const textarea = document.createElement('textarea');
         textarea.value = localStorage.getItem('code');
         document.body.appendChild(textarea);
         textarea.select();
         textarea.setSelectionRange(0, 99999);
         document.execCommand('copy');
         document.body.removeChild(textarea);
      });
      segundoElemento.appendChild(botao);

   } else {
      console.log('Não há pelo menos dois elementos com a classe "row".');
   }
}

function GeraPix(dadosPix) {

   setItemWithExpiration('dadosPix', dadosPix, 3600000);

   const respostaObjeto = JSON.parse(dadosPix);
   const paymentPixParse = respostaObjeto.pix.qrCodeBase64Image;
   localStorage.setItem("code", respostaObjeto.pix.code)
   var qrCodeValue = "data:image/png;base64," + paymentPixParse;
   const img = document.createElement('img');
   img.src = qrCodeValue.toString();
   img.id = "imgPix";
   const elements = document.querySelectorAll('.row');

   if (elements.length >= 2) {
      const segundoElemento = elements[0];

      const label = document.createElement('label');
      label.textContent = 'Qr Code';
      label.style.display = 'block';
      label.style.fontFamily = 'Arial, sans-serif';
      label.style.fontSize = '36px';
      label.style.fontWeight = 'bold';
      label.style.color = 'black';
      label.style.marginTop = '10px';
      segundoElemento.appendChild(label);
      segundoElemento.appendChild(document.createElement('br'));

      img.width = 550;
      img.height = 400;
      img.style.marginBottom = '45px';
      segundoElemento.appendChild(img);
      segundoElemento.appendChild(document.createElement('br'));

      const botao = document.createElement('button');
      botao.textContent = 'Copia e Cola Pix';
      botao.style.color = '#fff';
      botao.style.background = '#49566f';
      botao.style.borderRadius = '0';
      botao.style.minWidth = '182px';

      botao.addEventListener('click', function () {
         const textarea = document.createElement('textarea');
         textarea.value = localStorage.getItem('code');
         document.body.appendChild(textarea);
         textarea.select();
         textarea.setSelectionRange(0, 99999);
         document.execCommand('copy');
         document.body.removeChild(textarea);
      });
      segundoElemento.appendChild(botao);

   } else {
      console.log('Não há pelo menos dois elementos com a classe "row".');
   }
}

function OpenLoadingModalPix() {
   var loadingOverlay = document.createElement('div');
   loadingOverlay.id = 'loadingOverlay';
   setStyle(loadingOverlay, {
      display: 'block',
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      background: 'rgba(255, 255, 255, 0.7)',
      zIndex: '9999'
   });

   var loadingSpinner = document.createElement('div');
   loadingSpinner.className = 'spinner-border text-primary';
   loadingSpinner.style.position = 'absolute';
   loadingSpinner.style.top = '50%';
   loadingSpinner.style.left = '50%';
   loadingSpinner.style.transform = 'translate(-50%, -50%)';

   loadingOverlay.appendChild(loadingSpinner);
   document.body.appendChild(loadingOverlay);
}

function CloseLoadingModalPix() {
   document.getElementById('loadingOverlay').remove();
}


function setStyle(element, styles) {
   for (var property in styles) {
      if (styles.hasOwnProperty(property)) {
         element.style[property] = styles[property];
      }
   }
}
      
</script>

Insira o MerchantId na linha 3.

Clique em Atualizar > Salvar > Publicar

Siga para a ativação do meio de pagamento.