Formas de pagamento de acordo com o estado do cliente

[fredericomoreira]

Seria possível eu exibir determinadas formas de pagamento de acordo com o estado do cliente?

Exemplo:

Cliente de MG aparecer:

PIX
Boleto

Cliente SP aparecer

PIX
Cartão

[andremiani]

Olá @fredericomoreira, tudo joia?

Você precisará criar esta customização no checkout da VTEX por meio do arquivo checkout6-custom.js para fazer a verificação desejada e então esconder ou mostrar os meios de pagamentos desejados.

Caso deseje utilizar a app Checkout UI Custom, depois de instalada conforme a documetação, você precisa verificar se já tem o builder "checkout-ui-custom": "0.x" no manifest no teu StoreTheme e criar o arquivo checkout-ui-custom/checkout6-custom.js na raiz do teu projeto (StoreTheme).

Caso seja o Checkout Padrão precisa localizar dentro do admin da VTEX, na seção “Configurações da Loja” a opção “Checkout”, selecionar a loja que deseja editar, selecionar a aba “Código” e alterar o arquivo checkout6-custom.js

{{account}}.myvtex.com/admin/portal/#/sites/{{account}}/code/files/checkout6-custom.js

Então depois de localizado o local correto do arquivo checkout6-custom.js é só subir o código abaixo ajustando-o para tua necessidade:

// verificação caso o usuario já tenha se identificado
// e o smartcheckout identifique os dados de shipping
window.onload = () => {
  setTimeout(() => {
    hidePaymentOptions();
  }, 1500);
};

// verificação caso o usuário volte alguma etapa
$(window).on("hashchange", function () {
  hidePaymentOptions();
});

//Esconde o meio de pagamento "Dinheiro" para quem informe o Estado RJ

function hidePaymentOptions() {
  const { hash } = window.location;

  if (hash === "#/payment") {
    const findStateUser =
      "#shipping-data .vtex-omnishipping-1-x-SummaryItemAddress span.state";

    waitForElm(findStateUser).then((elm) => {
      const state = document.querySelector(elm).innerHTML;

      switch (state) {
        case "RJ":
          document.querySelector(
            "#payment-group-cashPaymentGroup"
          ).style.display = "none";
          break;

        default:
          document.querySelector(
            "#payment-group-cashPaymentGroup"
          ).style.display = "block";
          break;
      }
    });
  }
}

// função auxiliar que é usada para garantir 
// que o elemento State foi carregado

function waitForElm(selector) {
  return new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
}

Abraços!