Os códigos personalizados no checkout, também chamados de snippets, permitem inserir código de desenvolvimento na página de finalização da compra e adaptar essa etapa às necessidades do seu negócio. Com eles, você pode exibir avisos, informações sobre frete ou orientações antes do pagamento, por exemplo.
Neste tutorial, te mostramos como funciona os códigos personalizados no checkout e como incluir na sua loja.
O que é possível fazer?
Os códigos personalizados funcionam dentro dos componentes e limites suportados pelo Nube SDK. Isso significa que você pode adicionar pequenos elementos em pontos definidos do checkout e também definir a aparência desses elementos.
Alguns exemplos do que você pode incluir:
- Avisos e comunicados para quem está finalizando a compra;
- Informações sobre frete e prazos de entrega;
- Orientações antes da etapa de pagamento;
- Mensagens na tela de confirmação do pedido.
Helpjuice Warning Callout Title
Recomendamos ter conhecimento técnico em desenvolvimento para escrever e testar os códigos personalizados na loja. Se você não trabalha com isso ou não possui conhecimento técnico, indicamos contatar uma pessoa desenvolvedora ou com um parceiro especialista para essa implementação.
Para conferir a documentação completa de como utilizar os códigos personalizado no checkout, acessar a página: Nube SDK
Limitações
Não é possível alterar livremente os campos, os botões ou a estrutura original do checkout com os códigos personalizados.
Helpjuice Success Callout Title
Os códigos personalizados no checkout estão disponíveis apenas para lojas do plano Nuvemshop Next. Se sua loja utiliza outro plano, essa funcionalidade não está disponível.
Como adicionar um código personalizado no checkout?
Para inserir um código personalizado na página de finalização da sua loja, seguir os passos abaixo:
1. Acessar o administrador da sua loja Nuvemshop.
2. Ir em "Configurações > Opções de checkout".
3. Descer até a seção "Códigos personalizados" e, em "Desenvolvimento", clicar em "Adicionar código".
4. No painel "Desenvolvimento", preencher o campo "Scripts" com o código JSX baseado na biblioteca Nube SDK.
5. Se você quiser permitir a edição do conteúdo e do design desse código a partir de "Códigos personalizados", preencher o campo "Configuração (opcional)" com o JSON correspondente.
6. Clicar em “Salvar” para fechar a janela lateral. E depois em “Salvar” novamente para finalizar.
Pronto!
O código personalizado passa a ser aplicado no checkout da sua loja. Para conferir o resultado, faça uma compra de teste e acompanhe as etapas de finalização.
Helpjuice Info Callout Title
Como o código é aplicado em uma etapa crítica da compra, recomendamos testar cada alteração antes de deixá-la ativa. Em implementações mais sensíveis, você pode contar com o acompanhamento do seu gerente de contas ou parceiros desenvolvedores.
Para conhecer as outras configurações da página de finalização da sua loja, acessar o tutorial: Como personalizar o checkout na Nuvemshop?
Perguntas frequentes
Preciso solicitar a liberação dos códigos personalizados no checkout?
As lojas do plano Nuvemshop Next têm acesso direto à funcionalidade pelo administrador, sem precisar abrir uma solicitação para o nosso time. Nos demais planos, a funcionalidade não está indisponível.
Preciso saber programar para usar os códigos personalizados no checkout?
Sim. O campo "Scripts" espera código JSX baseado na biblioteca Nube SDK, então é necessário conhecimento de desenvolvimento para escrever e testar o código.
Se você não trabalha com desenvolvimento, conte com uma pessoa desenvolvedora ou com um parceiro Nuvemshop para essa implementação.
Onde encontro a documentação técnica do Nube SDK?
Na própria seção "Códigos personalizados" do administrador existe o link "Mais sobre códigos personalizados", que leva diretamente à documentação para desenvolvedores. Ou você também pode acessar ela clicando aqui.
Lá você encontra os componentes disponíveis, os pontos do checkout em que é possível renderizar conteúdo e os exemplos de uso da biblioteca.