Como integrar uma grade de planos (checkout) em meu site

Após a criação de planos, o Superlógica cria uma loja virtual (com URL pública) na qual você pode vender diretamente os seus serviços. Além disso, é possível integrar o Superlógica com o seu site através da incorporação de um código ou através da nossa API (veja a documentação da API da Superlógica aqui). 

Para acessar a loja virtual, clique no botão Testar, no rodapé de uma grade de planos.

Mas o nosso jeito preferido para integrar o Superlógica ao seu checkout é via incorporação de um código. Para pegar este código, clique no segundo ícone no topo da grade: Clique aqui para gerar o código para incorporar no seu site.

O código vai ser algo parecido com isto:

<div id=”superlogica_planos_script”></div>

<script type=”text/javascript”>

//<![CDATA[

(function() {

var appUrl = encodeURIComponent( document.location.href );

var iframePlanos = document.createElement(“iframe”);

iframePlanos.setAttribute(“frameborder”,0);

iframePlanos.setAttribute(“width”,”100%”);

iframePlanos.setAttribute(“height”,900);

iframePlanos.src=”https://suaempresa.superlogica.net/clients/areadocliente/publico/grades?id=16&url=”+appUrl+”";

document.getElementById(“superlogica_planos_script”).appendChild(iframePlanos);

}());

//]]>

</script>

Você pode optar por mostrar a grade e dos seus planos ou mostrar direto a tela de Checkout (formulário).

Como padrão, o código monta a grade com os seus planos.

Para que a tela de Checkout (formulário) apareça direto, sem passar pela tela de planos, faça uma alteração nesta linha do código original (observe o trecho em azul; repare que o plano 16 será o plano selecionado no formulário de One Step Checkout):

https://suaempresa.superlogica.net/clients/areadocliente/publico/onestepcheckout?idplano=16

Você pode alterar alguns elementos, como o “width” (largura) e o “height” (altura), conforme desejar. Em Clientes > Área do cliente, é possível configurar o CSS deste tema (aba aparência da área do cliente).