> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# Boas práticas

> Diretrizes de segurança e performance para customizações no Editor de Código.

## Este guia define as diretrizes técnicas para desenvolver customizações e scripts no Editor de Código da sua loja virtual. O objetivo é garantir segurança, performance e a integração correta com os recursos nativos da plataforma.

## Segurança e consumo de APIs

> [!WARNING]
>
> **Nunca exponha credenciais privadas.** Token de acesso privado e chave secreta não podem aparecer no código frontend (JavaScript/HTML) — qualquer pessoa consegue ler esse valor pelo DevTools do navegador.

* **Use só endpoints públicos.** São as rotas da API feitas para rodar no frontend, sem autenticação privilegiada. Veja a lista completa em [Referência da API — Público](https://docs.yampi.com.br/api-reference/publico/catalogo/visualizar-informacoes-publicas-do-produto.md).
* **Prefira a instância `api` do axios.** O Rocket já expõe essa instância pronta, com os headers e UTMs certos. Não monte a URL nem os headers na mão com `fetch`. Veja [Plugins — Axios](https://docs.yampi.com.br/editor-codigo/plugins/axios.md).

### Exemplo

```javascript theme={"system"}
import api from '@/modules/axios/api';

async function loadProduct(slug) {
    try {
        const { data } = await api.get(`/catalog/products/${slug}`);
        return data;
    } catch (error) {
        console.error('Erro ao carregar produto:', error);
    }
}
```

***

## Performance

Antes de buscar um dado na API, veja se ele já está disponível na loja.

* **Consulte a Store antes de chamar a API.** Produto atual, ambiente e carrinho já chegam prontos na [Store](https://docs.yampi.com.br/editor-codigo/store/product.md), carregados a partir de `window.data` e `window.Yampi`.
* **Cacheie dados que mudam pouco.** Categorias, marcas e outras listas com baixa frequência de alteração podem usar o mixin `cache`, que grava no `localStorage` com TTL. Veja [Mixins — cache](https://docs.yampi.com.br/editor-codigo/mixins/cache.md).

> [!TIP]
>
> Só chame a API direto quando o dado não estiver na Store nem puder ser cacheado.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.