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

Visão geral

A loja virtual pública possibilita a comercialização direta de serviços a partir da criação de planos na plataforma. A integração com websites externos pode ser efetuada via API ou mediante a incorporação de um código (iframe) que exibe a grade de planos ou direciona para o formulário de contratação individual (One Step Checkout). As dimensões e o estilo visual do componente podem ser ajustados nas configurações da área do cliente.

Quando usar este artigo

Utilize este artigo para aprender a obter, personalizar e incorporar o código de contratação da grade de planos ou do formulário de checkout direto no seu site.

Sintoma ou cenário

Necessidade de disponibilizar a contratação de planos diretamente no site da empresa por meio de um iframe ou encaminhar o cliente diretamente para o formulário de One Step Checkout.

Benefício para o usuário ou operação

Comercialização direta de assinaturas no próprio site da empresa sem necessidade de redirecionamentos externos;
Flexibilidade para alternar entre a exibição da grade completa de planos ou o formulário direto de um plano específico (One Step Checkout);
Ajuste dimensional e estético do componente integrado via CSS e parâmetros de largura e altura.

Onde acessar / contexto de uso

Disponível em Assinaturas > Planos e em Clientes > Área do cliente (aba Aparência da área do cliente).

Pré-requisitos (Antes de começar)

Perfil Exato: Permissões de acesso para Acesso Administrativo (1000) e/ou Configurações - Alteração (1061).
Recursos Sistêmicos: Plano de assinatura cadastrado na plataforma e acesso ao código-fonte do site externo.
Insumos e Dados Técnicos: ID do plano cadastrado e especificações de largura (width) e altura (height) desejadas para a tela.

Causas prováveis

Lançamento de página institucional, criação de landing page de vendas ou necessidade de integrar o fluxo de contratação de assinaturas no portal da empresa.

Como fazer ou corrigir

A integração via código utiliza um script que renderiza um iframe no site de destino. Por padrão, o script carrega a grade completa de planos, porém a alteração da URL no parâmetro do iframe permite direcionar o usuário para o formulário de One Step Checkout de um plano específico.

Testando a loja virtual pública

Acesse Assinaturas > Planos.
Vá até o rodapé da grade de planos.
Clique no botão Testar para abrir a URL pública da loja virtual.

Obtendo e configurando o código de incorporação

Acesse Assinaturas > Planos.
No topo da grade de planos, clique no segundo ícone (Clique aqui para gerar o código para incorporar no seu site).
Copie o código gerado.
Caso deseje exibir o formulário de Checkout (One Step Checkout) direto para um plano, localize a linha com a URL no código e altere o parâmetro:
- Estrutura original (Grade de planos): [https://suaempresa.superlogica.net/clients/areadocliente/publico/grades?id=16&url=](https://suaempresa.superlogica.net/clients/areadocliente/publico/grades?id=16&url=)
- Estrutura alterada (One Step Checkout): [https://suaempresa.superlogica.net/clients/areadocliente/publico/onestepcheckout?idplano=16](https://suaempresa.superlogica.net/clients/areadocliente/publico/onestepcheckout?idplano=16)
Ajuste os atributos de dimensão width e height no script conforme o layout da sua página.
Cole o código atualizado no código-fonte do seu site.

Estilizando a exibição via CSS

Acesse Clientes > Área do cliente.
Clique na aba Aparência da área do cliente.
Realize as edições de CSS necessárias para personalizar a identidade visual do tema.

Resultado esperado

Exibição do iframe contendo a grade de planos ou a tela de One Step Checkout perfeitamente integrada ao site externo, permitindo a contratação do serviço pelo cliente final.

Quando escalar

Escale o atendimento para o suporte N2 caso a janela do iframe permaneça em branco, exiba mensagem de erro 404/página não encontrada ou as edições de CSS salvas na Área do cliente não reflitam na exibição incorporada.

Informações que devem ser reunidas antes do escalonamento

Nome da licença;
URL do site em que o código foi inserido;
ID do plano utilizado no parâmetro;
Bloco de código exatamente como foi colado no HTML do site;
Captura de tela (print) da inconsistência exibida no iframe.

Regras importantes / Observações

A loja virtual com URL pública é gerada de forma automática após a criação dos planos no sistema;
Ao alterar a URL do script para onestepcheckout, é obrigatório informar o parâmetro idplano correto para que o formulário selecione o plano desejado;
As alterações visuais via CSS na Área do cliente aplicam-se à estrutura do tema exibido dentro do iframe.

Problemas comuns e como resolver

Problema: O formulário de checkout carrega o plano incorreto ou exibe falha ao abrir.
- Causa provável: O parâmetro idplano= no script não foi atualizado com o ID do plano cadastrado.
- Ação recomendada: Edite o script colado no site e confirme se o número informado em idplano= é o ID exato do plano que deseja vender.
Problema: A grade de planos fica cortada ou apresenta barras de rolagem indesejadas no site.
- Causa provável: As dimensões de width e height do iframe no script estão menores que a área necessária para exibição.
- Ação recomendada: Altere os valores numéricos das variáveis width e height diretamente no script de incorporação.

Dúvidas relacionadas

P: Como faço para testar a loja virtual antes de colocar o código no meu site? R: Para testar a loja virtual, acesse a grade de planos e clique no botão Testar localizado no rodapé da página.

P: É possível direcionar o cliente diretamente para a contratação sem passar pela grade de planos? R: Sim, basta alterar a linha do código substituindo a URL de exibição de grades pela URL de One Step Checkout indicando o ID do plano desejado.

Palavras-chave de busca

loja virtual, incorporar grade de planos, código iframe site, one step checkout, integração via script, personalização CSS area do cliente