Parcelex

# Script

Para sites que utilizam a plataforma VTEX, temos uma documentação especializada de como integrar com a Parcelex via Script.

Para sites que utilizam a plataforma Nuvemshop, temos uma documentação especializada de como integrar com a Parcelex via Script.

# Integração VTEX

Para adicionar parcelex como método de pagamento, siga os passos:

# Configurar provedor Parcelex

# 1. No painel de administração de sua loja navegue no menu Configurações da Loja > Pagamentos > Provedores

# 2. Na tela de provedores, clique no botão Novo provedor

# 3. Pesquise e escolha o provedor Parcelex

# 4. Preencha os campos Chave de aplicação e Token de aplicação com os valores enviados pela Parcelex nos campos correspondentes e clique em salvar

# Configurar condição de pagamento

# 1. No painel de administração de sua loja navegue no menu Configurações da Loja > Pagamentos > Configurações

# 2. Na aba Condições de Pagamentos, clique no botão +.

# 3. Escolha a condição Parcelex

# 4. Altere o status para Ativa e clique em Salvar

# Customização de checkout

# 1. No painel de administração de sua loja navegue no menu Configurações da Loja > Checkout

# 2. Clique no ícone da engrenagem

# 3. Escolha a aba Código

# 4. Na lista de Arquivos selecione o checkout6-custom.css e adicione o código css e clique em salvar

# código css:
#payment-group-ParcelexPaymentGroup .payment-group-item-text {
  background-image: url(https://cdn.parcelex.com.br/icone-parcelex.svg);
  font-size: 0;
}

#payment-group-ParcelexPaymentGroup .payment-group-item-text:after {
  font-size: 13px;
  content: "Parcelado no Boleto";
}

.ParcelexPaymentGroup .payment-description {
  font-size: 0;
}

.ParcelexPaymentGroup .sight {
  font-size: 0;
}

# 5. Na lista de Arquivos selecione o checkout6-custom.js e adicione o código javascript com a sua application key

# código javascript:
prclx_cfg = {
  // env: 'homolog', // << descomentar para ambiente de homologação >>
  public_api_key: "INSIRA A SUA APPLICATION KEY", // << USAR A SUA APLICATION KEY >>
  platform: "vtex",
  checkout: true,
  retailerName: "NOME DA SUA LOJA",
  options: {
    // Parâmetros opcionais
    iframe: {
      height: "100%", // valor padrão: 620px para desktop, 666px para mobile
      width: "100%" // valor padrão: 100%
    }
  }
};
!(function(e, t, c, n, r, o, a, p, s) {
  function i(e, t, c) {
    return function() {
      e[t]._.push([c, arguments]);
    };
  }
  var l = e[n] || {},
    u = t.createElement(s),
    f = t.getElementsByTagName(s)[0];
  (l[o] = i(l, o, "set")),
    (l[o]._ = []),
    (l[r] = i(l, r, "set")),
    (l[r]._ = []),
    (l[a] = i(l, a, "set")),
    (l[a]._ = []),
    (u.async = !0),
    (u.src =
      c[s] ||
      "https://cdn.parcelex.com.br/parcelex"
        .concat(c.platform ? "-".concat(c.platform) : "", ".min.js?key=")
        .concat(c.public_api_key)),
    f.parentNode.insertBefore(u, f),
    delete c[s],
    (l.config = c),
    (e[n] = l);
})(window, document, prclx_cfg, "_prclx", "checkout", "preview", "thankyou", 0, "script");

# Página de preview

Para adicionar a modal parcelex de preview na página de produto, siga os passos:

# 1. No painel de administração de sua loja navegue no menu Configurações da Loja > CMS > Layout

# 2. Clicar no icone de pasta com nome CMS

# 3. Clicar no icone da pasta com nome HTML Templates

# 4. Clicar no arquivo com nome Product

# 5. Inserir no arquivo o código javascript

# código javascript:
<script>
prclx_cfg = {
	// env: 'homolog', // << descomentar para ambiente de homologação >>
	public_api_key:  'INSIRA A SUA APPLICATION KEY', // << USAR A SUA APLICATION KEY >>
	insertBefore: 'INSIRA UMA CLASSE CSS', // EX: 'shipping-box'
	platform: 'vtex',
	preview: true,
}

!function(e,t,c,n,r,o,a,p,s){function i(e,t,c){return function(){e[t]._.push([c,arguments])}}var l=e[n]||{},u=t.createElement(s),f=t.getElementsByTagName(s)[0];l[o]=i(l,o,"set"),l[o]._=[],l[r]=i(l,r,"set"),l[r]._=[],l[a]=i(l,a,"set"),l[a]._=[],u.async=!0,u.src=c[s]||"https://cdn.parcelex.com.br/parcelex".concat(c.platform?"-".concat(c.platform):"",".min.js?key=").concat(c.public_api_key),f.parentNode.insertBefore(u,f),delete c[s],l.config=c,e[n]=l}(window,document,prclx_cfg,"_prclx","checkout","preview","thankyou",0,"script");
</script>

# 6. Clicar em Save Template

# 7. Digitar "yes" e clicar em Update Item

# Integração Nuvemshop

# Página de preview

Para adicionar parcelex na sua página de produto, siga os passos:

# 1. No painel de administração de sua loja navegue no menu Personalizar > Minha Nuvemshop

# 2. No quadro Layout, clique em "Personalizar seu layout atual"

# 3. No menu lateral, selecione a opção "Rodapé da página"

# 4. No campo "Código HTML ou Javascript do selo" ao final do menu, insira o seguinte:

# código javascript:
<script type="text/javascript" id="prclx-banner">
prclx_cfg = {
	// env: 'homolog', // << descomentar para ambiente de homologação >>
	public_api_key:  'INSIRA A SUA APPLICATION KEY', // << USAR A SUA APLICATION KEY >>
	platform: 'nuvemshop-pdp',
    retailerName: 'NOME DA SUA LOJA',
    preview: true,
}

!function(e,t,c,o,p,r,a,n,s){function l(e,t,c){return function(){e[t]._.push([c,arguments])}}var i=e[o]||{},h=t.createElement(s),m=t.getElementsByTagName(s)[0];i[r]=l(i,r,"set"),i[r]._=[],i[p]=l(i,p,"set"),i[p]._=[],i[a]=l(i,a,"set"),i[a]._=[],h.async=!0,h.src=c[s]||"https://cdn.parcelex.com.br/parcelex".concat(c.platform?"-".concat(c.platform):"",".min.js?key=").concat(c.public_api_key),m.parentNode.insertBefore(h,m),delete c[s],i.config=c,e[o]=i}(window,document,prclx_cfg,"_prclx","checkout","preview","thankyou",0,"script");
</script>

# 5. Clique em publicar alterações

← API →