🎨 Componentes

O public-sdk oferece componentes Vue 3 prontos para uso nas lojas:

PaymentHosted → formulário de pagamento hospedado
ColorTheme → aplica as cores e a fonte da loja
GoogleAuth e FacebookAuth → botões de login social
ExpandTransition → transição de expandir e recolher

ℹ️ Informação

Os componentes dependem de Vue 3. Importe-os da raiz (@uappi/public-sdk) ou de @uappi/public-sdk/components.

PaymentHosted

Renderiza o formulário de pagamento (cartão, etc.) dentro de um </code> isolado, servido pelo serviço de pagamentos da Uappi. Os dados sensíveis (número do cartão, CVV, etc.) trafegam diretamente entre o iframe e o gateway, sem passar pela loja.</p><p class="mb-4">Ao montar, o componente:</p><p class="mb-4">1. Gera um token de pagamento com <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Api.cart.paymentToken</code> 2. Monta a URL do iframe com esse token 3. Escuta as mensagens (<code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">postMessage</code>) do iframe e as converte em eventos do componente</p><p class="mb-4">O token é renovado automaticamente quando está perto de expirar, sem recarregar o iframe nem perder o que o cliente já preencheu. A altura do iframe se ajusta ao conteúdo do formulário.</p><p class="mb-4"><div class="relative code-block-wrapper mb-6"><pre class="bg-gray-900 dark:bg-gray-900"><code data-theme="olaolu-palenight" data-lang="vue" class="torchlight block text-sm"><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="text-gray-100"><script setup lang="ts"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="text-gray-100">import { PaymentHosted } from '@uappi/public-sdk';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="text-gray-100">import type {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="text-gray-100"> PaymentSuccessData,</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span class="text-gray-100"> PaymentRedirectData,</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span class="text-gray-100">} from '@uappi/public-sdk/components/PaymentHosted/types';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span class="text-gray-100">function onSuccess(data: PaymentSuccessData) {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span class="text-gray-100"> // pedido criado, mesmo formato retornado por Api.cart.buy</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span class="text-gray-100">}</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span class="text-gray-100">function onRedirect(url: string, data: PaymentRedirectData) {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span class="text-gray-100"> // o gateway pediu redirecionamento (ex: autenticação 3DS)</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span class="text-gray-100"> window.location.href = url;</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span class="text-gray-100">}</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span class="text-gray-100">function onError(errorCode: string | undefined, message: string) {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span class="text-gray-100"> // falha ao processar o pagamento</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span class="text-gray-100">}</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span class="text-gray-100"></script></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span class="text-gray-100"><template></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span class="text-gray-100"> <PaymentHosted</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span class="text-gray-100"> :option="selectedPaymentOption"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span class="text-gray-100"> cta-color="#FF0000"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span class="text-gray-100"> lang="pt-BR"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span class="text-gray-100"> country-code="BRA"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span class="text-gray-100"> @payment-success="onSuccess"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span class="text-gray-100"> @payment-redirect="onRedirect"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span class="text-gray-100"> @payment-error="onError"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span class="text-gray-100"> /></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">32</span><span class="text-gray-100"></template></span></div><div aria-hidden="true" hidden="" tabindex="-1" style="display: none;" class="torchlight-copy-target"><script setup lang="ts"> import { PaymentHosted } from '@uappi/public-sdk'; import type { PaymentSuccessData, PaymentRedirectData, } from '@uappi/public-sdk/components/PaymentHosted/types';</p><p class="mb-4">function onSuccess(data: PaymentSuccessData) { // pedido criado, mesmo formato retornado por Api.cart.buy }</p><p class="mb-4">function onRedirect(url: string, data: PaymentRedirectData) { // o gateway pediu redirecionamento (ex: autenticação 3DS) window.location.href = url; }</p><p class="mb-4">function onError(errorCode: string | undefined, message: string) { // falha ao processar o pagamento } </script></p><p class="mb-4"><template> <PaymentHosted :option="selectedPaymentOption" cta-color="#FF0000" lang="pt-BR" country-code="BRA" @payment-success="onSuccess" @payment-redirect="onRedirect" @payment-error="onError" /> </template></div></code></pre><button class="md:block hidden copyBtn" onclick="copyToClipboard(this)" aria-label="Copy to Clipboard" title="Copy to Clipboard"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2474 6.25033V2.91699H17.0807V13.7503H13.7474M13.7474 6.25033V17.0837H2.91406V6.25033H13.7474Z" stroke="currentColor" stroke-opacity="0.45" stroke-linecap="round"></path></svg></button></div></p><p class="mb-4"><h3 id="-componentes-props">Props</h3></p><p class="mb-4"><div class="overflow-visible mb-6"> <table class="w-full border-collapse border border-slate-300 dark:border-slate-600"><thead><tr class="bg-slate-50 dark:bg-slate-800"><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Prop</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Tipo</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Obrigatório</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Descrição</th></tr></thead><tbody><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">option</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">PaymentOption</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Sim</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Opção de pagamento selecionada (item retornado por <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Api.cart.listPayments</code>).</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">ctaColor</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Cor hex do botão do formulário (com ou sem <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">#</code>).</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">lang</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Idioma do formulário (<code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">pt-BR</code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">en-US</code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">es-ES</code>, ...). Padrão: <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">pt-BR</code>.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">countryCode</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Código Alpha-3 para pré-selecionar o DDI do telefone (<code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">BRA</code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">USA</code>, ...). Padrão: <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">BRA</code>.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">iframeHost</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Host do formulário. Tem prioridade sobre a variável <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">VITE_PAYMENT_IFRAME_HOST</code>. Padrão: <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">https://payments.uappi.store</code>.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">orderGroupPaymentCode</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Código do link de pagamento. Quando informado, o pagamento é feito para o pedido do link, e não para o carrinho.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">orderGroup</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">CustomerOrderResponse</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Grupo de pedido do link. Obrigatório junto com <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">orderGroupPaymentCode</code>.</td></tr></tbody></table></div> <h3 id="-componentes-eventos">Eventos</h3></p><p class="mb-4"><div class="overflow-visible mb-6"> <table class="w-full border-collapse border border-slate-300 dark:border-slate-600"><thead><tr class="bg-slate-50 dark:bg-slate-800"><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Evento</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Payload</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Quando é emitido</th></tr></thead><tbody><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">payment-ready</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">—</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">O formulário carregou e está pronto para interação.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">token-error</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">errorCode: string \</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">undefined</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Falha ao gerar o token de pagamento, antes de o formulário existir.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">payment-success</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">data: PaymentSuccessData</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Pagamento concluído. <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">data</code> tem o mesmo formato de <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Api.cart.buy</code>.</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">payment-redirect</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">url: string, data: PaymentRedirectData</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">O gateway exige redirecionamento (ex: autenticação 3DS).</td></tr><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">payment-error</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">errorCode: string \</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">undefined, message: string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Falha ao processar o pagamento.</td></tr></tbody></table></div> <h3 id="-componentes-tracking">Tracking</h3></p><p class="mb-4">O componente dispara o evento de compra sozinho quando o pagamento é concluído: <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">purchase</code> no GA4 e <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Purchase</code> no Facebook Pixel (quando o <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">fbq</code> está carregado). Não é necessário usar <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Tracking.cart.buy</code> junto com ele.</p><p class="mb-4">No fluxo de carrinho, os dados do evento vêm do carrinho lido antes do pagamento. No fluxo de link de pagamento, vêm do <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">orderGroup</code> informado.</p><p class="mb-4"><h3 id="-componentes-pagamento-por-link">Pagamento por link</h3></p><p class="mb-4">Para pagar um pedido criado pelo vendedor, sem carrinho ativo, consulte o link com <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Api.order.detailOrderPaymentCode</code> e repasse o código e o pedido ao componente:</p><p class="mb-4"><div class="relative code-block-wrapper mb-6"><pre class="bg-gray-900 dark:bg-gray-900"><code data-theme="olaolu-palenight" data-lang="vue" class="torchlight block text-sm"><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="text-gray-100"><script setup lang="ts"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="text-gray-100">import { ref, onMounted } from 'vue';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="text-gray-100">import { Api, PaymentHosted, type ApiTypes } from '@uappi/public-sdk';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span class="text-gray-100">const props = defineProps<{ code: string }>();</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span class="text-gray-100">const link = ref<ApiTypes.OrderPaymentCodeDetailResponse | null>(null);</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span class="text-gray-100">const selectedOption = ref<ApiTypes.PaymentOption | null>(null);</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span class="text-gray-100">onMounted(async () => {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span class="text-gray-100"> link.value = await Api.order.detailOrderPaymentCode(props.code);</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span class="text-gray-100"> selectedOption.value = link.value.paymentOptions[0]?.option ?? null;</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span class="text-gray-100">});</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span class="text-gray-100"></script></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span class="text-gray-100"><template></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span class="text-gray-100"> <PaymentHosted</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span class="text-gray-100"> v-if="link?.orderGroup && selectedOption"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span class="text-gray-100"> :option="selectedOption"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span class="text-gray-100"> :order-group-payment-code="link.code"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span class="text-gray-100"> :order-group="link.orderGroup"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span class="text-gray-100"> @token-error="onTokenError"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span class="text-gray-100"> @payment-success="onSuccess"</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span class="text-gray-100"> /></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span class="text-gray-100"></template></span></div><div aria-hidden="true" hidden="" tabindex="-1" style="display: none;" class="torchlight-copy-target"><script setup lang="ts"> import { ref, onMounted } from 'vue'; import { Api, PaymentHosted, type ApiTypes } from '@uappi/public-sdk';</p><p class="mb-4">const props = defineProps<{ code: string }>();</p><p class="mb-4">const link = ref<ApiTypes.OrderPaymentCodeDetailResponse | null>(null); const selectedOption = ref<ApiTypes.PaymentOption | null>(null);</p><p class="mb-4">onMounted(async () => { link.value = await Api.order.detailOrderPaymentCode(props.code); selectedOption.value = link.value.paymentOptions[0]?.option ?? null; }); </script></p><p class="mb-4"><template> <PaymentHosted v-if="link?.orderGroup && selectedOption" :option="selectedOption" :order-group-payment-code="link.code" :order-group="link.orderGroup" @token-error="onTokenError" @payment-success="onSuccess" /> </template></div></code></pre><button class="md:block hidden copyBtn" onclick="copyToClipboard(this)" aria-label="Copy to Clipboard" title="Copy to Clipboard"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2474 6.25033V2.91699H17.0807V13.7503H13.7474M13.7474 6.25033V17.0837H2.91406V6.25033H13.7474Z" stroke="currentColor" stroke-opacity="0.45" stroke-linecap="round"></path></svg></button></div></p><p class="mb-4">Os erros possíveis do link estão em <a href="/docs/public-sdk/modules/api/resources" class="text-blue-600 dark:text-blue-400 hover:underline">Api: Recursos → Order</a>.</p><p class="mb-4"><h2 id="-componentes-colortheme">ColorTheme</h2></p><p class="mb-4">Aplica as cores e a fonte da loja como variáveis CSS globais (<code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">--primary-cta-text</code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">--checkout-cta-default</code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">--neutral-background</code>, etc.) no <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">document.documentElement</code> assim que é montado. Não renderiza elementos próprios: apenas repassa o conteúdo do slot.</p><p class="mb-4"><div class="relative code-block-wrapper mb-6"><pre class="bg-gray-900 dark:bg-gray-900"><code data-theme="olaolu-palenight" data-lang="vue" class="torchlight block text-sm"><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="text-gray-100"><script setup lang="ts"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="text-gray-100">import { ColorTheme, type CSSVariables } from '@uappi/public-sdk';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="text-gray-100">const variables: CSSVariables = {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span class="text-gray-100"> font: {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span class="text-gray-100"> family: 'Inter',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span class="text-gray-100"> link: 'https://fonts.googleapis.com/css2?family=Inter',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span class="text-gray-100"> },</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span class="text-gray-100"> colors: {</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span class="text-gray-100"> CheckoutCTADefault: '#000000',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span class="text-gray-100"> CheckoutCTAHover: '#333333',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span class="text-gray-100"> CheckoutCTAText: '#FFFFFF',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span class="text-gray-100"> PrimaryCTAText: '#FFFFFF',</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span class="text-gray-100"> // ...demais cores do tipo CSSVariables</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span class="text-gray-100"> },</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span class="text-gray-100">};</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span class="text-gray-100"></script></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span class="text-gray-100"><template></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span class="text-gray-100"> <ColorTheme :variables="variables"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span class="text-gray-100"> <App /></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span class="text-gray-100"> </ColorTheme></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span class="text-gray-100"></template></span></div><div aria-hidden="true" hidden="" tabindex="-1" style="display: none;" class="torchlight-copy-target"><script setup lang="ts"> import { ColorTheme, type CSSVariables } from '@uappi/public-sdk';</p><p class="mb-4">const variables: CSSVariables = { font: { family: 'Inter', link: 'https://fonts.googleapis.com/css2?family=Inter', }, colors: { CheckoutCTADefault: '#000000', CheckoutCTAHover: '#333333', CheckoutCTAText: '#FFFFFF', PrimaryCTAText: '#FFFFFF', // ...demais cores do tipo CSSVariables }, }; </script></p><p class="mb-4"><template> <ColorTheme :variables="variables"> <App /> </ColorTheme> </template></div></code></pre><button class="md:block hidden copyBtn" onclick="copyToClipboard(this)" aria-label="Copy to Clipboard" title="Copy to Clipboard"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2474 6.25033V2.91699H17.0807V13.7503H13.7474M13.7474 6.25033V17.0837H2.91406V6.25033H13.7474Z" stroke="currentColor" stroke-opacity="0.45" stroke-linecap="round"></path></svg></button></div></p><p class="mb-4"><div class="overflow-visible mb-6"> <table class="w-full border-collapse border border-slate-300 dark:border-slate-600"><thead><tr class="bg-slate-50 dark:bg-slate-800"><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Prop</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Tipo</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Obrigatório</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Descrição</th></tr></thead><tbody><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">variables</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">CSSVariables</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Fonte e cores da loja. As cores seguem os grupos <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Checkout<em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Primary</em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Neutral<em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Success</em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Warning<em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Error</em></code>, <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Info<em></code> e <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Link</em></code>.</td></tr></tbody></table></div> <h2 id="-componentes-googleauth-e-facebookauth">GoogleAuth e FacebookAuth</h2></p><p class="mb-4">Botões de login social. Ao clicar, o componente obtém a URL de autenticação com <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">Api.thirdParty.oauthRedirect</code> e redireciona o cliente para o provedor.</p><p class="mb-4"><div class="relative code-block-wrapper mb-6"><pre class="bg-gray-900 dark:bg-gray-900"><code data-theme="olaolu-palenight" data-lang="vue" class="torchlight block text-sm"><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="text-gray-100"><script setup lang="ts"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="text-gray-100">import { GoogleAuth, FacebookAuth } from '@uappi/public-sdk';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="text-gray-100"></script></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span class="text-gray-100"><template></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span class="text-gray-100"> <GoogleAuth uri="/conta" /></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span class="text-gray-100"> <FacebookAuth uri="/conta" /></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span class="text-gray-100"></template></span></div><div aria-hidden="true" hidden="" tabindex="-1" style="display: none;" class="torchlight-copy-target"><script setup lang="ts"> import { GoogleAuth, FacebookAuth } from '@uappi/public-sdk'; </script></p><p class="mb-4"><template> <GoogleAuth uri="/conta" /> <FacebookAuth uri="/conta" /> </template></div></code></pre><button class="md:block hidden copyBtn" onclick="copyToClipboard(this)" aria-label="Copy to Clipboard" title="Copy to Clipboard"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2474 6.25033V2.91699H17.0807V13.7503H13.7474M13.7474 6.25033V17.0837H2.91406V6.25033H13.7474Z" stroke="currentColor" stroke-opacity="0.45" stroke-linecap="round"></path></svg></button></div></p><p class="mb-4"><div class="overflow-visible mb-6"> <table class="w-full border-collapse border border-slate-300 dark:border-slate-600"><thead><tr class="bg-slate-50 dark:bg-slate-800"><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Prop</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Tipo</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Obrigatório</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Descrição</th></tr></thead><tbody><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">uri</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">string</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Sim</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Prefixo de rota da loja usado para montar as URLs de retorno (<code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">{uri}/signin</code> e <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">{uri}/signup</code>).</td></tr></tbody></table></div> <h2 id="-componentes-expandtransition">ExpandTransition</h2></p><p class="mb-4">Wrapper sobre o <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded"><Transition></code> do Vue que anima altura e opacidade ao expandir e recolher. Útil para acordeões e listas condicionais.</p><p class="mb-4"><div class="relative code-block-wrapper mb-6"><pre class="bg-gray-900 dark:bg-gray-900"><code data-theme="olaolu-palenight" data-lang="vue" class="torchlight block text-sm"><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span class="text-gray-100"><script setup lang="ts"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span class="text-gray-100">import { ExpandTransition } from '@uappi/public-sdk';</span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span class="text-gray-100"></script></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span class="text-gray-100"></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span class="text-gray-100"><template></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span class="text-gray-100"> <ExpandTransition></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span class="text-gray-100"> <div v-if="open">Conteúdo</div></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span class="text-gray-100"> </ExpandTransition></span></div><div class="line"><span style="color:#6b7280; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span class="text-gray-100"></template></span></div><div aria-hidden="true" hidden="" tabindex="-1" style="display: none;" class="torchlight-copy-target"><script setup lang="ts"> import { ExpandTransition } from '@uappi/public-sdk'; </script></p><p class="mb-4"><template> <ExpandTransition> <div v-if="open">Conteúdo</div> </ExpandTransition> </template></div></code></pre><button class="md:block hidden copyBtn" onclick="copyToClipboard(this)" aria-label="Copy to Clipboard" title="Copy to Clipboard"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2474 6.25033V2.91699H17.0807V13.7503H13.7474M13.7474 6.25033V17.0837H2.91406V6.25033H13.7474Z" stroke="currentColor" stroke-opacity="0.45" stroke-linecap="round"></path></svg></button></div></p><p class="mb-4"><div class="overflow-visible mb-6"> <table class="w-full border-collapse border border-slate-300 dark:border-slate-600"><thead><tr class="bg-slate-50 dark:bg-slate-800"><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Prop</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Tipo</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Obrigatório</th><th class="border border-slate-300 dark:border-slate-600 px-4 py-2 text-left break-words whitespace-normal">Descrição</th></tr></thead><tbody><tr><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">mode</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal"><code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">'in-out' \</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">'out-in' \</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">'default'</code></td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Não</td><td class="border border-slate-300 dark:border-slate-600 px-4 py-2 align-top break-words whitespace-normal">Modo de transição do Vue. Padrão: <code class="bg-gray-100 dark:bg-gray-800 text-sm px-1 py-0.5 rounded">out-in</code>.</td></tr></tbody></table></div> <h2 id="-componentes--proximo-passo">🏁 Próximo passo</h2></p><p class="mb-4"><strong><a href="/docs/public-sdk/modules/overview" class="text-blue-600 dark:text-blue-400 hover:underline">SDK Público: visão geral dos módulos</a></strong></p> </div> </section> </section> </div> </section> <div class="hidden xl:block relative col-span-12 lg:pb-10 lg:col-span-9 lg:col-start-4 xl:col-start-auto xl:col-span-3"> <div class="relative lg:sticky lg:top-28 pl-10"> <div> <h3 class="text-xs font-medium text-sand-light-11 dark:text-sand-dark-11 mb-3"> Nesta página </h3> <div class="max-h-[calc(100vh-140px)] pb-5 overflow-y-auto"> <div id="on-this-page-content" class="border-l border-sand-light-5 dark:border-sand-dark-5 pr-4"> <ul> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes" id="-componentes" class="border-l-[3px] border-transparent right-menu-padding-1 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span class="http-method method- mr-2"></span> <span>🎨 Componentes</span> </a> </div> <ul class="mt-1.5"> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-paymenthosted" id="-componentes-paymenthosted" class="border-l-[3px] border-transparent right-menu-padding-2 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>PaymentHosted</span> </a> </div> <ul class="mt-1.5"> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-props" id="-componentes-props" class="border-l-[3px] border-transparent right-menu-padding-3 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>Props</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-eventos" id="-componentes-eventos" class="border-l-[3px] border-transparent right-menu-padding-3 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>Eventos</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-tracking" id="-componentes-tracking" class="border-l-[3px] border-transparent right-menu-padding-3 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>Tracking</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-pagamento-por-link" id="-componentes-pagamento-por-link" class="border-l-[3px] border-transparent right-menu-padding-3 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>Pagamento por link</span> </a> </div> </li> </ul></li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-colortheme" id="-componentes-colortheme" class="border-l-[3px] border-transparent right-menu-padding-2 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>ColorTheme</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-googleauth-e-facebookauth" id="-componentes-googleauth-e-facebookauth" class="border-l-[3px] border-transparent right-menu-padding-2 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>GoogleAuth e FacebookAuth</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes-expandtransition" id="-componentes-expandtransition" class="border-l-[3px] border-transparent right-menu-padding-2 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>ExpandTransition</span> </a> </div> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <div class="api-route-item"> <a href="#-componentes--proximo-passo" id="-componentes--proximo-passo" class="border-l-[3px] border-transparent right-menu-padding-2 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-uappi-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12 right-menu-link"> <span>🏁 Próximo passo</span> </a> </div> </li> </ul> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="text-sand-dark-10"> <div class="max-w-full w-full xl:max-w-[1400px] pt-10 md:pt-24 px-4 xl:px-16 mx-auto border-l border-sand-light-7 dark:border-sand-dark-6"> <div class="grid grid-cols-12 lg:gap-12"> <div class="col-span-12 lg:col-span-3 lg:mt-14"> <p class="text-pretty">Uappi é a melhor opção para o crescimento da sua loja!</p> <ul class="flex items-center justify-start my-8 space-x-6 lg:my-16"> <li> <a href="https://www.facebook.com/uappi.plataforma/" target="_blank" title="Uappi on Facebook" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M22.675 0H1.325C0.596 0 0 0.593 0 1.326v21.348C0 23.407 0.596 24 1.325 24h11.495v-9.294H9.691v-3.622h3.129V8.413c0-3.1 1.893-4.788 4.658-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.404 24 24 23.407 24 22.674V1.326C24 0.593 23.404 0 22.675 0z"/> </svg> </a> </li> <li> <a href="https://www.instagram.com/uappi.plataforma/?hl=en" target="_blank" title="Uappi on Instagram" class="transition duration-100 hover:text-sand-dark-6"> <svg width="35" height="30" viewBox="0 0 20 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/> </svg> </a> </li> <li> <a href="https://br.linkedin.com/company/uappi" target="_blank" title="Uappi on Linkedin" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M20.447 20.452H16.893V14.84c0-1.338-.024-3.063-1.868-3.063-1.868 0-2.154 1.46-2.154 2.967v5.708H9.316V9h3.4v1.561h.049c.474-.9 1.637-1.848 3.369-1.848 3.6 0 4.268 2.371 4.268 5.455v6.284zM5.337 7.433a1.967 1.967 0 1 1 0-3.934 1.967 1.967 0 0 1 0 3.934zM6.956 20.452H3.715V9h3.241v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.226.792 24 1.771 24h20.451C23.2 24 24 23.226 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> </li> <li> <a href="https://www.youtube.com/@uappi.plataforma/videos" target="_blank" title="Uappi on YouTube" class="transition duration-100 hover:text-sand-dark-6"> <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M33.892 3.75519C33.4994 2.27706 32.3428 1.11294 30.8742 0.717875C28.2124 0 17.5385 0 17.5385 0C17.5385 0 6.8648 0 4.20286 0.717875C2.7343 1.113 1.57768 2.27706 1.18511 3.75519C0.471863 6.43437 0.471863 12.0243 0.471863 12.0243C0.471863 12.0243 0.471863 17.6141 1.18511 20.2933C1.57768 21.7714 2.7343 22.8871 4.20286 23.2821C6.8648 24 17.5385 24 17.5385 24C17.5385 24 28.2123 24 30.8742 23.2821C32.3428 22.8871 33.4994 21.7714 33.892 20.2933C34.6052 17.6141 34.6052 12.0243 34.6052 12.0243C34.6052 12.0243 34.6052 6.43437 33.892 3.75519ZM14.0476 17.0994V6.94906L22.9688 12.0244L14.0476 17.0994Z" fill="currentColor"></path> </svg> </a> </li> </ul> <div> <ul class="flex justify-start space-x-8"> <li>© 2026 Uappi</li> <li><a href="https://status.uappi.store/" class="transition duration-100 hover:text-sand-dark-6">Status</a></li> </ul> </div> </div> <div class="grid grid-cols-subgrid col-span-12 lg:col-span-9"> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-1"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Institucional </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="https://uappi.com.br" target="_blank" class="transition duration-100 hover:text-sand-dark-6">Site Oficial</a> </li> <li> <a href="https://helpcenter.uappi.store/" target="_blank" class="transition duration-100 hover:text-sand-dark-6">Central de Ajuda</a> </li> <li> <a href="https://uappi.movidesk.com/" target="_blank" class="transition duration-100 hover:text-sand-dark-6">Central de Suporte</a> </li> </ul> </div> </div> <div class="flex items-center justify-center col-span-12 text-sand-light-1"> <a href="https://uappi.com.br/?utm_source=api.uappi.store&utm_medium=site&utm_content=footersite&utm_campaign=referencia_cliente" target="_blank"> <svg class="main-logo dark-logo" width="160px" height="40px" viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_14522_3253)"> <path d="M5.83782 19.5703H0.400757C0.179425 19.5703 0 19.7516 0 19.9752V25.4675C0 25.6911 0.179425 25.8723 0.400757 25.8723H5.83782C6.05915 25.8723 6.23857 25.6911 6.23857 25.4675V19.9752C6.23857 19.7516 6.05915 19.5703 5.83782 19.5703Z" fill="#FFFBF9"/> <path d="M14.4062 16.3298V25.2167C14.4062 25.5779 14.1157 25.8714 13.7571 25.8714H8.8157C8.45713 25.8714 8.16663 25.5779 8.16663 25.2167V16.3298C8.16663 15.9676 8.45713 15.6751 8.8157 15.6751H13.7571C14.1157 15.6751 14.4062 15.9685 14.4062 16.3298Z" fill="#FFFBF9"/> <path d="M22.5728 8.48498V16.5622C22.5728 17.1472 22.103 17.6217 21.523 17.6217H17.3831C16.803 17.6217 16.3333 17.1472 16.3333 16.5622V8.48498C16.3333 7.89904 16.803 7.42545 17.3831 7.42545H21.523C22.103 7.42545 22.5728 7.90001 22.5728 8.48498Z" fill="#FFFBF9"/> <path d="M22.172 19.5703H16.734C16.5127 19.5703 16.3333 19.7516 16.3333 19.9752V25.4675C16.3333 25.6911 16.5127 25.8723 16.734 25.8723H22.172C22.3934 25.8723 22.5728 25.6911 22.5728 25.4675V19.9752C22.5728 19.7516 22.3934 19.5703 22.172 19.5703Z" fill="#E85C13"/> <path d="M65.1383 10.8733C64.7423 10.1411 64.1891 9.52417 63.4796 9.02442C62.7702 8.52371 61.9428 8.14406 61.0003 7.88547C60.0559 7.62689 59.0406 7.49808 57.9563 7.49808C56.4951 7.49808 55.2191 7.71211 54.1299 8.13922C53.0389 8.56536 52.1587 9.16098 51.4857 9.92512C50.9641 10.5159 50.5758 11.1832 50.3208 11.9231C50.2038 12.264 50.4311 12.6272 50.7848 12.6737L54.6352 13.1793C54.8787 13.2112 55.1136 13.0795 55.2181 12.8558C55.3188 12.6417 55.4492 12.448 55.6093 12.2737C55.8595 11.9996 56.1797 11.7885 56.5709 11.6413C56.9621 11.4931 57.4079 11.4195 57.9093 11.4195C58.4107 11.4195 58.8374 11.4931 59.1921 11.6413C59.5468 11.7895 59.8182 12.0045 60.0061 12.2892C60.194 12.5749 60.288 12.9216 60.288 13.3333V13.3962C60.288 13.7555 60.148 14.0335 59.8651 14.2349C59.5833 14.4354 59.1403 14.5855 58.5354 14.6853C57.9294 14.785 57.1318 14.877 56.1414 14.9623C55.2545 15.0359 54.4204 15.184 53.6371 15.4039C52.8548 15.6257 52.1616 15.9472 51.5557 16.3685C50.9517 16.7898 50.478 17.337 50.1396 18.012C49.8012 18.6871 49.6315 19.5142 49.6315 20.4933C49.6315 21.6526 49.8759 22.6201 50.3678 23.3949C50.8577 24.1688 51.5375 24.7489 52.409 25.1334C53.2805 25.5188 54.2747 25.7106 55.3907 25.7106C56.2046 25.7106 56.9323 25.6021 57.5728 25.3871C58.2151 25.1702 58.7779 24.8574 59.2631 24.4467C59.7482 24.0361 60.148 23.5247 60.4596 22.9126H60.6005L61.2112 24.9862C61.2822 25.2283 61.5027 25.3949 61.7539 25.3949H65.168C65.4805 25.3949 65.7336 25.1392 65.7336 24.8235V13.3972C65.7336 12.449 65.5352 11.6084 65.1392 10.8762L65.1383 10.8733ZM60.5305 19.1006C60.5305 19.7272 60.3695 20.288 60.0502 20.7713C59.7357 21.2478 59.3072 21.6265 58.777 21.8986C58.2477 22.1669 57.6514 22.3034 57.0004 22.3034C56.5316 22.3034 56.1107 22.225 55.7492 22.0691C55.3753 21.9112 55.0714 21.6778 54.8499 21.3737C54.6198 21.0638 54.5038 20.6802 54.5038 20.2386C54.5038 19.797 54.6179 19.3941 54.8451 19.0696C55.0657 18.752 55.3878 18.4914 55.802 18.2929C56.1979 18.105 56.6802 17.9694 57.2286 17.8929C57.4453 17.8581 57.6706 17.8213 57.9026 17.7825L58.0407 17.7602C58.3513 17.707 58.6255 17.6556 58.8776 17.6024C59.1547 17.5462 59.4069 17.4813 59.6283 17.4116C59.8479 17.3428 60.0301 17.2692 60.1729 17.1927L60.5315 16.998V19.1006H60.5305Z" fill="#FFFBF9"/> <path d="M84.1934 11.4573C83.5415 10.114 82.6863 9.11836 81.6269 8.46947C80.5684 7.82155 79.4227 7.4971 78.1917 7.4971C77.2626 7.4971 76.4736 7.65884 75.8216 7.97941C75.1687 8.30095 74.6328 8.70965 74.209 9.20455C73.7862 9.70042 73.466 10.2166 73.2464 10.7541H73.0585L72.4325 8.15471C72.3711 7.89903 72.1439 7.71792 71.8831 7.71792H68.2264C67.9139 7.71792 67.6608 7.9736 67.6608 8.28933V31.4266C67.6608 31.7424 67.9139 31.9981 68.2264 31.9981H72.5552C72.8677 31.9981 73.1208 31.7424 73.1208 31.4266V22.5301H73.2464C73.4756 23.0569 73.8044 23.5576 74.232 24.0322C74.6596 24.5058 75.1994 24.8942 75.8514 25.1944C76.5033 25.4946 77.2732 25.6447 78.1591 25.6447C79.4534 25.6447 80.6317 25.3048 81.6968 24.6239C82.7611 23.9441 83.6048 22.933 84.2318 21.5897C84.8578 20.2454 85.1713 18.5728 85.1713 16.5709C85.1713 14.569 84.8444 12.8006 84.1925 11.4563L84.1934 11.4573ZM79.4639 19.7815C78.2712 22.4826 75.1342 22.1107 73.9319 20.349C73.3442 19.49 73.0585 18.5224 72.9713 17.4784C72.8466 15.984 72.9655 14.5264 73.6395 13.1773C74.6568 11.1377 77.2099 10.6215 78.7266 12.1536C79.4697 12.9042 79.7611 13.8979 79.9308 14.9429C80.019 15.4843 80.0468 16.0324 80.0449 16.5825C80.0478 17.6895 79.9117 18.7675 79.4639 19.7815Z" fill="#FFFBF9"/> <path d="M103.632 11.4582C102.98 10.1149 102.125 9.11934 101.065 8.47045C100.007 7.82252 98.8613 7.49808 97.6303 7.49808C96.7012 7.49808 95.9122 7.65982 95.2602 7.98039C94.6073 8.30193 94.0714 8.71063 93.6476 9.20553C93.2248 9.7014 92.9046 10.2176 92.685 10.7551H92.4971L91.8711 8.15568C91.8097 7.9 91.5825 7.71889 91.3217 7.71889H87.665C87.3525 7.71889 87.0994 7.97458 87.0994 8.29031V31.4276C87.0994 31.7433 87.3525 31.999 87.665 31.999H91.9938C92.3063 31.999 92.5594 31.7433 92.5594 31.4276V22.531H92.685C92.9142 23.0579 93.243 23.5586 93.6706 24.0332C94.0982 24.5068 94.638 24.8951 95.29 25.1954C95.9419 25.4956 96.7118 25.6457 97.5977 25.6457C98.892 25.6457 100.07 25.3058 101.135 24.6249C102.2 23.945 103.043 22.9339 103.67 21.5906C104.296 20.2464 104.61 18.5738 104.61 16.5719C104.61 14.57 104.283 12.8015 103.631 11.4573L103.632 11.4582ZM98.9035 19.7815C97.7108 22.4826 94.5738 22.1107 93.3715 20.349C92.7838 19.49 92.4981 18.5224 92.4108 17.4784C92.2862 15.984 92.4051 14.5264 93.0791 13.1773C94.0963 11.1377 96.6495 10.6215 98.1662 12.1536C98.9092 12.9042 99.2007 13.8979 99.3704 14.9429C99.4586 15.4843 99.4864 16.0324 99.4845 16.5825C99.4874 17.6895 99.3512 18.7675 98.9035 19.7815Z" fill="#FFFBF9"/> <path d="M111.434 7.4787H107.105C106.792 7.4787 106.539 7.73453 106.539 8.05011V24.8215C106.539 25.1371 106.792 25.3929 107.105 25.3929H111.434C111.747 25.3929 112 25.1371 112 24.8215V8.05011C112 7.73453 111.747 7.4787 111.434 7.4787Z" fill="#FFFBF9"/> <path d="M110.52 0H108.019C107.202 0 106.539 0.669493 106.539 1.49535V4.02119C106.539 4.84705 107.202 5.51654 108.019 5.51654H110.52C111.337 5.51654 112 4.84705 112 4.02119V1.49535C112 0.669493 111.337 0 110.52 0Z" fill="#FFFBF9"/> <path d="M47.1187 7.40219C47.4418 7.40219 47.7035 7.66659 47.7035 7.99297V17.9975C47.7035 22.3335 44.2232 25.8491 39.93 25.8491H38.3432C34.05 25.8491 30.5697 22.3335 30.5697 17.9965V7.99394C30.5697 7.66756 30.8314 7.40316 31.1545 7.40316H35.6127C35.9358 7.40316 36.1976 7.66756 36.1976 7.99394V18.1718C36.1976 19.7815 37.4363 21.1519 39.0278 21.209C40.6998 21.2691 42.0737 19.918 42.0737 18.2425V7.99297C42.0737 7.66659 42.3355 7.40219 42.6586 7.40219H47.1167H47.1187Z" fill="#FFFBF9"/> </g> <defs> <clipPath id="clip0_14522_3253"> <rect width="160" height="40" fill="white"/> </clipPath> </defs> </svg> <svg class="main-logo light-logo" width="160px" height="40px" viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_14522_3240)"> <path d="M5.83782 19.5703H0.400757C0.179425 19.5703 0 19.7516 0 19.9752V25.4675C0 25.6911 0.179425 25.8723 0.400757 25.8723H5.83782C6.05915 25.8723 6.23857 25.6911 6.23857 25.4675V19.9752C6.23857 19.7516 6.05915 19.5703 5.83782 19.5703Z" fill="#0E1013"/> <path d="M14.4062 16.3298V25.2167C14.4062 25.5779 14.1157 25.8714 13.7571 25.8714H8.8157C8.45713 25.8714 8.16663 25.5779 8.16663 25.2167V16.3298C8.16663 15.9676 8.45713 15.6751 8.8157 15.6751H13.7571C14.1157 15.6751 14.4062 15.9685 14.4062 16.3298Z" fill="#0E1013"/> <path d="M22.5728 8.48498V16.5622C22.5728 17.1472 22.103 17.6217 21.523 17.6217H17.3831C16.803 17.6217 16.3333 17.1472 16.3333 16.5622V8.48498C16.3333 7.89904 16.803 7.42545 17.3831 7.42545H21.523C22.103 7.42545 22.5728 7.90001 22.5728 8.48498Z" fill="#0E1013"/> <path d="M22.172 19.5703H16.734C16.5127 19.5703 16.3333 19.7516 16.3333 19.9752V25.4675C16.3333 25.6911 16.5127 25.8723 16.734 25.8723H22.172C22.3934 25.8723 22.5728 25.6911 22.5728 25.4675V19.9752C22.5728 19.7516 22.3934 19.5703 22.172 19.5703Z" fill="#E85C13"/> <path d="M65.1383 10.8733C64.7423 10.1411 64.1891 9.52417 63.4796 9.02442C62.7702 8.52371 61.9428 8.14406 61.0003 7.88547C60.0559 7.62689 59.0406 7.49808 57.9563 7.49808C56.4951 7.49808 55.2191 7.71211 54.1299 8.13922C53.0389 8.56536 52.1587 9.16098 51.4857 9.92512C50.9641 10.5159 50.5758 11.1832 50.3208 11.9231C50.2038 12.264 50.4311 12.6272 50.7848 12.6737L54.6352 13.1793C54.8787 13.2112 55.1136 13.0795 55.2181 12.8558C55.3188 12.6417 55.4492 12.448 55.6093 12.2737C55.8595 11.9996 56.1797 11.7885 56.5709 11.6413C56.9621 11.4931 57.4079 11.4195 57.9093 11.4195C58.4107 11.4195 58.8374 11.4931 59.1921 11.6413C59.5468 11.7895 59.8182 12.0045 60.0061 12.2892C60.194 12.5749 60.288 12.9216 60.288 13.3333V13.3962C60.288 13.7555 60.148 14.0335 59.8651 14.2349C59.5833 14.4354 59.1403 14.5855 58.5354 14.6853C57.9294 14.785 57.1318 14.877 56.1414 14.9623C55.2545 15.0359 54.4204 15.184 53.6371 15.4039C52.8548 15.6257 52.1616 15.9472 51.5557 16.3685C50.9517 16.7898 50.478 17.337 50.1396 18.012C49.8012 18.6871 49.6315 19.5142 49.6315 20.4933C49.6315 21.6526 49.8759 22.6201 50.3678 23.3949C50.8577 24.1688 51.5375 24.7489 52.409 25.1334C53.2805 25.5188 54.2747 25.7106 55.3907 25.7106C56.2046 25.7106 56.9323 25.6021 57.5728 25.3871C58.2151 25.1702 58.7779 24.8574 59.2631 24.4467C59.7482 24.0361 60.148 23.5247 60.4596 22.9126H60.6005L61.2112 24.9862C61.2822 25.2283 61.5027 25.3949 61.7539 25.3949H65.168C65.4805 25.3949 65.7336 25.1392 65.7336 24.8235V13.3972C65.7336 12.449 65.5352 11.6084 65.1392 10.8762L65.1383 10.8733ZM60.5305 19.1006C60.5305 19.7272 60.3695 20.288 60.0502 20.7713C59.7357 21.2478 59.3072 21.6265 58.777 21.8986C58.2477 22.1669 57.6514 22.3034 57.0004 22.3034C56.5316 22.3034 56.1107 22.225 55.7492 22.0691C55.3753 21.9112 55.0714 21.6778 54.8499 21.3737C54.6198 21.0638 54.5038 20.6802 54.5038 20.2386C54.5038 19.797 54.6179 19.3941 54.8451 19.0696C55.0657 18.752 55.3878 18.4914 55.802 18.2929C56.1979 18.105 56.6802 17.9694 57.2286 17.8929C57.4453 17.8581 57.6706 17.8213 57.9026 17.7825L58.0407 17.7602C58.3513 17.707 58.6255 17.6556 58.8776 17.6024C59.1547 17.5462 59.4069 17.4813 59.6283 17.4116C59.8479 17.3428 60.0301 17.2692 60.1729 17.1927L60.5315 16.998V19.1006H60.5305Z" fill="#0E1013"/> <path d="M84.1934 11.4573C83.5415 10.114 82.6863 9.11836 81.6269 8.46947C80.5684 7.82155 79.4227 7.4971 78.1917 7.4971C77.2626 7.4971 76.4736 7.65884 75.8216 7.97941C75.1687 8.30095 74.6328 8.70965 74.209 9.20455C73.7862 9.70042 73.466 10.2166 73.2464 10.7541H73.0585L72.4325 8.15471C72.3711 7.89903 72.1439 7.71792 71.8831 7.71792H68.2264C67.9139 7.71792 67.6608 7.9736 67.6608 8.28933V31.4266C67.6608 31.7424 67.9139 31.9981 68.2264 31.9981H72.5552C72.8677 31.9981 73.1208 31.7424 73.1208 31.4266V22.5301H73.2464C73.4756 23.0569 73.8044 23.5576 74.232 24.0322C74.6596 24.5058 75.1994 24.8942 75.8514 25.1944C76.5033 25.4946 77.2732 25.6447 78.1591 25.6447C79.4534 25.6447 80.6317 25.3048 81.6968 24.6239C82.7611 23.9441 83.6048 22.933 84.2318 21.5897C84.8578 20.2454 85.1713 18.5728 85.1713 16.5709C85.1713 14.569 84.8444 12.8006 84.1925 11.4563L84.1934 11.4573ZM79.4639 19.7815C78.2712 22.4826 75.1342 22.1107 73.9319 20.349C73.3442 19.49 73.0585 18.5224 72.9713 17.4784C72.8466 15.984 72.9655 14.5264 73.6395 13.1773C74.6568 11.1377 77.2099 10.6215 78.7266 12.1536C79.4697 12.9042 79.7611 13.8979 79.9308 14.9429C80.019 15.4843 80.0468 16.0324 80.0449 16.5825C80.0478 17.6895 79.9117 18.7675 79.4639 19.7815Z" fill="#0E1013"/> <path d="M103.632 11.4582C102.98 10.1149 102.125 9.11934 101.065 8.47045C100.007 7.82252 98.8613 7.49808 97.6303 7.49808C96.7012 7.49808 95.9122 7.65982 95.2602 7.98039C94.6073 8.30193 94.0714 8.71063 93.6476 9.20553C93.2248 9.7014 92.9046 10.2176 92.685 10.7551H92.4971L91.8711 8.15568C91.8097 7.9 91.5825 7.71889 91.3217 7.71889H87.665C87.3525 7.71889 87.0994 7.97458 87.0994 8.29031V31.4276C87.0994 31.7433 87.3525 31.999 87.665 31.999H91.9938C92.3063 31.999 92.5594 31.7433 92.5594 31.4276V22.531H92.685C92.9142 23.0579 93.243 23.5586 93.6706 24.0332C94.0982 24.5068 94.638 24.8951 95.29 25.1954C95.9419 25.4956 96.7118 25.6457 97.5977 25.6457C98.892 25.6457 100.07 25.3058 101.135 24.6249C102.2 23.945 103.043 22.9339 103.67 21.5906C104.296 20.2464 104.61 18.5738 104.61 16.5719C104.61 14.57 104.283 12.8015 103.631 11.4573L103.632 11.4582ZM98.9035 19.7815C97.7108 22.4826 94.5738 22.1107 93.3715 20.349C92.7838 19.49 92.4981 18.5224 92.4108 17.4784C92.2862 15.984 92.4051 14.5264 93.0791 13.1773C94.0963 11.1377 96.6495 10.6215 98.1662 12.1536C98.9092 12.9042 99.2007 13.8979 99.3704 14.9429C99.4586 15.4843 99.4864 16.0324 99.4845 16.5825C99.4874 17.6895 99.3512 18.7675 98.9035 19.7815Z" fill="#0E1013"/> <path d="M111.434 7.4787H107.105C106.792 7.4787 106.539 7.73453 106.539 8.05011V24.8215C106.539 25.1371 106.792 25.3929 107.105 25.3929H111.434C111.747 25.3929 112 25.1371 112 24.8215V8.05011C112 7.73453 111.747 7.4787 111.434 7.4787Z" fill="#0E1013"/> <path d="M110.52 0H108.019C107.202 0 106.539 0.669493 106.539 1.49535V4.02119C106.539 4.84705 107.202 5.51654 108.019 5.51654H110.52C111.337 5.51654 112 4.84705 112 4.02119V1.49535C112 0.669493 111.337 0 110.52 0Z" fill="#0E1013"/> <path d="M47.1187 7.40219C47.4418 7.40219 47.7035 7.66659 47.7035 7.99297V17.9975C47.7035 22.3335 44.2232 25.8491 39.93 25.8491H38.3432C34.05 25.8491 30.5697 22.3335 30.5697 17.9965V7.99394C30.5697 7.66756 30.8314 7.40316 31.1545 7.40316H35.6127C35.9358 7.40316 36.1976 7.66756 36.1976 7.99394V18.1718C36.1976 19.7815 37.4363 21.1519 39.0278 21.209C40.6998 21.2691 42.0737 19.918 42.0737 18.2425V7.99297C42.0737 7.66659 42.3355 7.40219 42.6586 7.40219H47.1167H47.1187Z" fill="#0E1013"/> </g> <defs> <clipPath id="clip0_14522_3240"> <rect width="160" height="40" fill="white"/> </clipPath> </defs> </svg> </a> </div> </div> </div> </div>; </body> </html>

Começando

Store Theme

Customização de Interface

Consumo de Dados

Tracking e SEO

Checkout

Consumo de Dados

Tracking e SEO

Ambiente de Pagamento

Área Restrita (Minha Conta)

Consumo de Dados

Tracking e SEO

SDK Público (public-sdk)

Modules

Api

Tracking

API Pública

Área Restrita (Minha Conta)

Carrinho de Compras

API Privada

Apps

Configurações Gerais

Clientes

Template

Avaliações

Notificações

ERPs

Filas

Grupo de Pedidos

Pedidos

Carrinhos

Pagamentos

Anti-Fraude

Produtos

Inteligência Artificial

Marcas

Categorias

Filtros

Atributos

Url

Relatórios

Render

Fretes

Usuários

Promocionais

Marketplace

Third Party

Datalogic

Busca

MCP

🎨 Componentes

PaymentHosted