Siga esta lista de verificação completa para configurar a sua conta no Zonos Dashboard e integrar o Zonos Checkout no seu site ou plataforma personalizada.
1
Criar uma conta Zonos
Para começar, contacte a nossa equipa de vendas para criar uma conta e assinar um contrato. Depois de assinado o contrato, receberá na sua conta dois microdepósitos que têm de ser verificados.
Envie os valores destes microdepósitos por e-mail para accounting@zonos.com, juntamente com o ID da sua loja no Dashboard (com o seu representante de vendas em CC).
Depois de verificados, os seus dados bancários serão apresentados em Dashboard -> Definições -> Faturação.
2
Configurar as definições do Dashboard e do Checkout
Depois de criar a sua conta Zonos, terá de configurar as definições no Dashboard para garantir que o Checkout funciona corretamente com a sua loja. Esta secção abrange todas as configurações essenciais do Dashboard.
Associe uma conta bancária para receber atempadamente os pagamentos do Checkout. Os pagamentos são processados diariamente, com um prazo de 2 dias a partir da captura do pagamento. Para tal, siga estes passos:
Será redirecionado para um portal da Stripe para concluir a configuração e fornecer as seguintes informações:
Informações da conta bancária.
EIN da empresa.
Número da Segurança Social (Social Security Number) de um proprietário com 25% da empresa. Para mais detalhes sobre o motivo deste requisito, consulte a documentação da Stripe.
Nota: Se precisar de alterar o calendário dos seus pagamentos, contacte support@zonos.com
O script Zonos JS requer uma lista de domínios permitidos por motivos de segurança. Isto impede que sites não autorizados carreguem o script e garante que este só é executado nos seus domínios aprovados. Sem esta configuração, o script devolverá erros de permissão.
Em URLs, adicione o seu domínio completo e todos os subdomínios onde o Checkout será utilizado. Por exemplo, se o seu domínio for example.com, deve adicionar example.com e test.example.com.
Para apresentar cotações de envio no checkout, terá de associar uma transportadora à sua conta Zonos. Isto permitir-lhe-á ativar níveis de serviço de envio específicos no checkout.
Para associar uma transportadora, siga estes passos:
Navegue até Dashboard -> Definições -> Envio -> Tarifas
Clique em Adicionar transportadora
Siga as instruções de configuração da transportadora.
Para mais detalhes sobre como associar contas de transportadoras, consulte a nossa documentação.
O país de origem e o código HS são utilizados para calcular com precisão os direitos aduaneiros e os impostos.
Se não indicar um país de origem ou um código HS específico, utilizaremos os valores de recurso configurados no Dashboard.
Para definir o país de origem e o código HS de recurso:
Navegue até Dashboard -> Definições -> Envio -> Catálogo.
Para o país de origem, selecione o país onde a maioria dos seus produtos é fabricada.
Para o código HS, introduza o código HS do seu produto mais comum. Se não tiver um código HS, navegue até Classify no Dashboard e introduza o nome e a descrição do produto para gerar um código HS preciso.
3
Instalar o snippet Zonos JS
O snippet Zonos JS é uma integração JavaScript do lado do cliente que ativa a funcionalidade de checkout global no seu site. Funciona como ponte entre a sua plataforma de comércio eletrónico e os serviços Zonos, tratando de:
Experiência de checkout: apresenta a interface do checkout e processa os pagamentos.
Serviços de localização: deteta a localização do visitante e gere a conversão de moeda.
Integração do carrinho: liga-se ao seu carrinho e sistema de encomendas existentes.
Segurança: valida os domínios e autentica os pedidos à API.
O snippet é carregado de forma assíncrona para não afetar o desempenho do seu site. É inicializado com as credenciais de API da sua loja e trata de todas as interações do lado do cliente de forma segura. A implementação foi concebida para ser pouco intrusiva, exigindo alterações mínimas ao seu fluxo de checkout existente.
Segue-se um exemplo completo, que inclui o carregamento do script, a inicialização e o tratamento de eventos, para consultar ao integrar o Checkout.
Recomendamos que acrescente um carimbo temporal ou outro identificador único ao URL para garantir que o script não fica em cache no navegador. Assim, garante que é sempre carregada a versão mais recente do script. Isto é apresentado na linha 10 do exemplo completo.
Depois de carregar o script Zonos JS, tem de o autenticar, passando uma chave de API pública da Zonos e o ID da loja à função Zonos.init. A chave de API pública utilizada para autenticar o Checkout foi concebida para ser publicável, ou seja, pode ser utilizada com segurança no código de frontend sem expor informações sensíveis.
Para encontrar o ID da sua loja e a chave de API, navegue até Dashboard -> Definições -> Integrações. Certifique-se de que não utiliza uma chave de API secreta, uma vez que esta não foi concebida para ser utilizada em código de frontend. Isto é apresentado nas linhas 29 e 30 do exemplo completo.
1Zonos.init({
2// ... other fields
3zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)
4storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)
Se o seu site definir uma Política de Segurança de Conteúdo, adicione os domínios abaixo às diretivas CSP correspondentes. Esta política aplica-se tanto ao Checkout como ao Hello: o snippet Zonos carrega scripts, folhas de estilo, tipos de letra e imagens, e efetua pedidos de rede, pelo que bloquear qualquer um destes recursos irá interromper o fluxo do Checkout ou a apresentação do Hello. A lista de style-src também se aplica a style-src-elem.
Nota: Ignore este passo se o seu site não enviar um cabeçalho CSP. Apenas os comerciantes que aplicam uma CSP personalizada nas suas páginas precisam de a atualizar.
1cdn.jsdelivr.net/npm/@zonos
2cdnjs.cloudflare.com/ajax/libs/zonos-elements
3unpkg.com/@zonos/elements
4js.zonos.com
5*.js.zonos.com
6assets.zonos.com
7zonos-store-assets.s3.amazonaws.com
8js.stripe.com
9a.stripecdn.com
10b.stripecdn.com
11c.stripecdn.com
12checkout.stripe.com
13f.stripecdn.com
14hcaptcha.com
15hooks.stripe.com
16m.stripe.com
17m.stripe.network
18pay.stripe.com
19payments.stripe.com
20q.stripe.com
21r.stripe.com
4
Configurar o Hello
O Hello é obrigatório quando utiliza o Checkout.
O Hello é responsável por detetar a localização, o idioma e a moeda do visitante e por lhe apresentar as informações adequadas. Pode configurar todas as definições do Hello no Dashboard ou no script Zonos JS. Se já tiver configurado o Hello no Dashboard, o script carregará e utilizará essas definições. Se especificar valores na propriedade helloSettings da função Zonos.init, o script utilizará esses valores em vez das definições, conforme mostrado abaixo.
O Hello utiliza seletores CSS para identificar os elementos do seu site que apresentam informações de moeda. Passe estes seletores à propriedade helloSettings.currencyElementSelector da função Zonos.init para que o Hello consiga detetar e apresentar a moeda correta ao comprador internacional.
Pode utilizar aqui qualquer seletor CSS válido, por exemplo #price, .price, para selecionar vários elementos diferentes. Isto é apresentado nas linhas 23 e 24 do exemplo completo.
1Zonos.init({
2// ... other fields
3helloSettings: {
4currencyElementSelector: '.price', // Replace with your actual selector
Por predefinição, o Hello só abre quando o visitante clica no botão da bandeira. Se pretender que o Hello abra automaticamente quando a página é carregada, pode chamar a função Zonos.openHelloDialog() depois de o script Zonos ter sido carregado. Isto é apresentado nas linhas 25 e 26 do exemplo completo.
Controle, a partir do Dashboard, que países dos compradores veem o Hello e que países aparecem na lista pendente do seletor de países. Navegue até Dashboard -> Definições -> Hello e procure a secção Regras de apresentação de países.
Controle que países dos compradores veem o widget Hello. Escolha uma das regras base e, em seguida, utilize as listas Mostrar sempre e Nunca mostrar para substituir a regra em países específicos.
Todos os países - Todos os países suportados pelo Hello.
Apenas países com envio - Os países para onde envia, de acordo com as suas definições de envio.
Mostrar sempre - Países que aparecem sempre, mesmo que a regra base os exclua.
Nunca mostrar - Países que nunca aparecem, mesmo que a regra base os inclua.
Controle que países aparecem na lista pendente do seletor de países do Hello, utilizando as mesmas regras base e as substituições Mostrar sempre e Nunca mostrar.
Opções JS descontinuadas
As propriedades showForCountries e showCountryList de helloSettings foram descontinuadas. Em vez disso, configure as regras de apresentação de países no Dashboard. Os valores definidos aí serão carregados automaticamente pelo script Zonos JS.
5
Configurar o Checkout
O Checkout permite ao cliente introduzir as suas informações de envio e de faturação, calcular o landed cost, efetuar o pagamento e concluir a encomenda.
O Checkout partilha dados contextuais com o Hello, como a localização, o idioma e a moeda do visitante. Isto garante que a experiência do cliente é consistente ao longo de todo o processo de compra.
Pode configurar todas as definições do Checkout tanto no Dashboard como no script Zonos JS. Se já tiver configurado o Checkout no Dashboard, o script carregará e utilizará essas definições. Se especificar valores na propriedade checkoutSettings da função Zonos.init, o script utilizará esses valores em vez das definições.
O script Zonos JS reconhece automaticamente os compradores internacionais e encaminha-os para o fluxo do Checkout. No entanto, terá de configurar o botão "efetuar encomenda" da sua plataforma para abrir o Checkout quando for clicado. Para tal, passe um seletor CSS à propriedade checkoutSettings.placeOrderButtonSelector da função Zonos.init.
Se tiver vários botões que possam ser utilizados para efetuar uma encomenda, certifique-se de que passa um seletor para cada botão. Por exemplo, #placeOrder, .place-order.
Isto é apresentado na linha 21 do exemplo completo.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
Para apresentar os detalhes do carrinho ao cliente, tem de criar uma função do lado do servidor que chame a API da Zonos para criar um carrinho e, em seguida, devolva o ID desse carrinho ao seu frontend. Isto garante que os detalhes do carrinho não ficam expostos ao cliente de uma forma que possa ser manipulada.
A chamada à API a partir do seu backend utilizará um token de credencial GraphQL secreto, que é diferente do token público que utiliza para autenticar o script Zonos JS. Pode obter este token em Dashboard -> Definições -> Integrações. O token secreto tem de ser passado como cabeçalho na sua chamada à API.
A mutação cartCreate aceita uma lista de artigos, que deve ser formatada de acordo com o esquema de artigos do carrinho.
1// Create new cart from serverside
2asyncfunctioncreateCart() {
3/**
4 * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate
5 * */
6const graphql = JSON.stringify({
7query: `
8mutation cartCreate($input: CartCreateInput!){
9 cartCreate(input: $input) {
10 id
11 adjustments {
12 amount
13 currencyCode
14 description
15 productId
16 sku
17 type
18 }
19 items {
20 id
21 name
22 amount
23 currencyCode
24 quantity
25 sku
26 description
27 metadata {
28 key
29 value
30 }
31 }
32 metadata {
33 key
34 value
35 }
36 }
37}`,
38variables: {
39/**
40 * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput
Sugerimos que crie um endpoint de API no seu servidor e que, em seguida, chame esse endpoint a partir da sua integração JS no frontend, conforme detalhado no passo seguinte.
Depois de criar um carrinho no servidor, tem de passar o ID do carrinho ao script Zonos JS. Pode fazê-lo através da função de callback createCartId, que faz parte da função Zonos.init. Ao ser aberto, o Checkout obtém de forma segura os detalhes do carrinho junto da Zonos, impedindo qualquer adulteração do carrinho. Consulte o exemplo de código abaixo.
O valor de createCartId não pode ser um valor estático; tem de ser uma função.
Se precisar de apresentar uma mensagem curta e dinâmica no Checkout — por exemplo, uma divulgação regulamentar quando um produto específico está no carrinho —, pode devolver uma matriz customMessage a partir da função de callback createCartId. Cada entrada da matriz é apresentada numa linha própria de um único banner informativo, diretamente abaixo de Total da encomenda.
A sintaxe de ligações Markdown — [link label] seguido de (https://example.com) — é apresentada como uma etiqueta de âncora, para que os compradores possam clicar na ligação. Os URLs https:// simples no texto também são convertidos automaticamente em ligações. Tudo o resto é apresentado como texto simples, pelo que o HTML nas strings é escapado em vez de executado.
É apresentado apenas um banner por Checkout, independentemente do número de linhas que passar.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4createCartId: async () => {
5const response = awaitfetch(
6'https://api.merchant.com/api/get-zonos-cart',
7 {
8method: 'POST',
9headers: {
10'Content-Type': 'application/json',
11 },
12 },
13 );
14const json = await response.json();
15
16return {
17cartId: json.id,
18// Each item is rendered on a new line of the same info banner.
19// Markdown links `[text](url)` become `<a>` tags.
20customMessage: [
21'Some items in your cart are subject to California regulations.',
22'Please review the required notice [here](https://oag.ca.gov/prop65).',
23 ],
24 };
25 },
26 },
27});
Nota: O texto da mensagem é apresentado como texto simples — as etiquetas HTML nas strings são escapadas, pelo que apenas a sintaxe de ligações Markdown é interpretada. Decida no servidor, com base no conteúdo do carrinho, se deve incluir customMessage, para que o banner só apareça quando for relevante.
Se tiver lógica personalizada e precisar de acionar o checkout da Zonos de forma programática, pode utilizar a função Zonos.triggerCheckoutInternational() para abrir a janela de checkout da Zonos depois de a Zonos ser inicializada. Isto invoca a função de callback createCartId definida em Zonos.init acima e abre a janela de checkout da Zonos.
1// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")
2const domesticCountry = 'US';
3document.querySelector('.country-select').addEventListener('change', e => {
Se pretender separar o processo de checkout para compradores nacionais e internacionais, pode adicionar um botão International checkout ao seu site. Em vez de acionar manualmente o Zonos Checkout com Zonos.triggerCheckoutInternational, pode configurar Zonos.init com o seletor adequado. O seletor fica desativado até a Zonos ser inicializada; quando o botão for clicado, acionará automaticamente o checkout da Zonos. Isto invoca a função de callback createCartId definida em Zonos.init e abre a janela de checkout da Zonos.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout
O Zonos Checkout pode encaminhar todo o funil de checkout para as suas ferramentas de análise existentes. Em cada passo, a Zonos emite:
O evento original zonos-checkout-... para o GA4 (através de gtag('event', ...)) e para a Meta como evento personalizado (através de fbq('trackCustom', ...)).
O evento padrão correspondente para a Meta, quando existe — InitiateCheckout, AddPaymentInfo e Purchase —, para que a otimização e os relatórios de conversões integrados da Meta funcionem de imediato.
A forma como os eventos chegam aos seus fornecedores depende da forma como o Checkout é apresentado no seu site. Escolha o caminho que corresponde à sua integração.
Quando o elemento personalizado <zonos-checkout> é montado na sua própria página (a predefinição da integração com o script Zonos JS descrita acima), os objetos window.gtag e window.fbq da própria página já estão no âmbito. A Zonos chama-os diretamente — não é necessário qualquer relay nem a transmissão do ID do pixel.
Configuração:
Certifique-se de que a sua página já carrega a etiqueta base do GA4 e/ou o código base do Meta Pixel (da mesma forma que faria o acompanhamento de qualquer outra página do seu site).
Ative os fornecedores pretendidos no dashboard da Zonos em Definições do Checkout → Acompanhamento (Google Analytics, Facebook Pixel ou ambos).
E é tudo. Sem script de relay, sem customHTML, sem IDs adicionais a passar — a Zonos deteta gtag / fbq na página e dispara os eventos diretamente.
Quando o Checkout está alojado num iframe numa origem diferente, não consegue aceder diretamente a gtag / fbq da sua página. A Zonos disponibiliza um pequeno script de relay — analyticsRelayOnInit.js — que escuta os eventos postMessage do iframe do Checkout e os reencaminha para os fornecedores que tiver na sua página. Um único relay trata simultaneamente do GA4 e do Facebook Pixel.
Configuração:
Ative os fornecedores pretendidos no dashboard da Zonos em Definições do Checkout → Acompanhamento.
Adicione a etiqueta base do GA4 e/ou o código base do Meta Pixel ao <head> da página que aloja o iframe do Checkout.
Adicione o script de relay a seguir às etiquetas dos fornecedores:
Passe os IDs correspondentes através do customHTML do Checkout para que o relay saiba em que propriedade/pixel deve disparar os eventos:
1
2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';
3 window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';
4
Para instruções passo a passo para iframes, a referência completa de eventos (incluindo o mapeamento do payload de purchase / Purchase) e sugestões de depuração, consulte:
Sincroniza o número de encomenda nativo da sua conta com o Dashboard. Documentação →
orderAddTrackingNumber
Obrigatória apenas se não imprimir as etiquetas no Dashboard. Garante que o número de seguimento aparece no Dashboard para que a Zonos possa garantir os seus cálculos de landed cost. Documentação →
Necessário para enviar as encomendas do Checkout para a sua plataforma nativa. Documentação →
ORDER_STATUS_CHANGED
Mantém o seu sistema sincronizado com a Zonos quando o estado das encomendas muda (por exemplo, expedida, cancelada). Documentação →
7
Testar a sua integração
Antes de colocar a sua integração do Checkout em produção, é importante testar exaustivamente todos os aspetos da integração para garantir uma experiência sem problemas para o cliente. Isto inclui testar o fluxo de checkout, o processamento de pagamentos, a criação de encomendas e o funcionamento dos webhooks.
Siga o nosso guia de testes para verificar se a sua integração está a funcionar corretamente e para identificar e corrigir eventuais problemas antes de a lançar em produção.
Perguntas frequentes
Seguem-se algumas perguntas frequentes sobre o processo de integração.
Configure a experiência pós-compra em Dashboard -> Definições -> Definições do Checkout, em Tipo de página de sucesso. Estão disponíveis três opções:
Mostrar a página de sucesso da Zonos (predefinição, recomendada) — A Zonos apresenta uma página de agradecimento integrada depois de a encomenda ser efetuada. A página é sempre apresentada, mesmo que a importação da encomenda para o seu sistema falhe, pelo que o comprador recebe sempre uma confirmação.
Redirecionar para uma página de sucesso — A Zonos aguarda num breve ecrã "Encomenda concluída" até a encomenda ser criada e, em seguida, redireciona para o URL de sucesso configurado, acrescentando zOrderNumber (e orderId para carrinhos antigos) como parâmetros de consulta.
Fechar o modal do checkout — A Zonos fecha o seu modal assim que o pagamento é capturado. Se também configurar um URL de sucesso, a Zonos redireciona para esse URL imediatamente depois de a Stripe cobrar o pagamento — sem esperar que a encomenda seja criada — e acrescenta zonosCheckoutSessionId como parâmetro de consulta. Utilize esta opção quando pretender o regresso mais rápido possível à sua própria página de sucesso.
Quando utiliza Fechar o modal do checkout com um URL de redirecionamento, a encomenda pode demorar alguns segundos a ficar associada à sessão de checkout após o redirecionamento. Leia zonosCheckoutSessionId a partir do URL e consulte periodicamente a query GraphQL checkoutSession a partir do seu servidor, utilizando o seu token de credencial secreto, até a encomenda estar pronta. Nunca faça esta chamada a partir do navegador — o token de credencial secreto tem de permanecer no servidor.
1query getCheckoutSession($id: String!){
2 checkoutSession(id:$id) {
3 order {
4 id
5}
6}
7}
Envie a query para https://api.zonos.com/graphql com o seu token de credencial secreto, obtido em Dashboard -> Definições -> Integrações, passado no cabeçalho do pedido credentialToken.
Sim. Se pretender receber notificações quando for criada uma encomenda, pode introduzir, no Dashboard, na secção E-mail das Definições do Checkout, o endereço de e-mail dos membros da equipa que devem ser notificados quando uma encomenda for criada, expedida ou cancelada.
Integração personalizada
Integração personalizada
Crie uma integração completa do Checkout no seu site personalizado.
Lista de verificação da integração
Siga esta lista de verificação completa para configurar a sua conta no Zonos Dashboard e integrar o Zonos Checkout no seu site ou plataforma personalizada.
Criar uma conta Zonos
Para começar, contacte a nossa equipa de vendas para criar uma conta e assinar um contrato. Depois de assinado o contrato, receberá na sua conta dois microdepósitos que têm de ser verificados.
Envie os valores destes microdepósitos por e-mail para accounting@zonos.com, juntamente com o ID da sua loja no Dashboard (com o seu representante de vendas em CC).
Depois de verificados, os seus dados bancários serão apresentados em Dashboard -> Definições -> Faturação.
Configurar as definições do Dashboard e do Checkout
Depois de criar a sua conta Zonos, terá de configurar as definições no Dashboard para garantir que o Checkout funciona corretamente com a sua loja. Esta secção abrange todas as configurações essenciais do Dashboard.
Configurar os pagamentos ao comerciante
Associe uma conta bancária para receber atempadamente os pagamentos do Checkout. Os pagamentos são processados diariamente, com um prazo de 2 dias a partir da captura do pagamento. Para tal, siga estes passos:
Configurar os domínios permitidos
O script Zonos JS requer uma lista de domínios permitidos por motivos de segurança. Isto impede que sites não autorizados carreguem o script e garante que este só é executado nos seus domínios aprovados. Sem esta configuração, o script devolverá erros de permissão.
Para configurar:
example.com, deve adicionarexample.cometest.example.com.Personalizar as definições de marca
Configure as definições de marca no Dashboard para corresponderem à imagem e ao estilo da sua loja.
Para tal, siga estes passos:
Para mais informações sobre as definições de marca, consulte a nossa documentação.
Associar uma transportadora
Para apresentar cotações de envio no checkout, terá de associar uma transportadora à sua conta Zonos. Isto permitir-lhe-á ativar níveis de serviço de envio específicos no checkout.
Para associar uma transportadora, siga estes passos:
Para mais detalhes sobre como associar contas de transportadoras, consulte a nossa documentação.
Configurar zonas de envio
As zonas de envio permitem configurar que transportadoras e níveis de serviço estão disponíveis para as diferentes regiões do mundo.
Para configurar zonas de envio, siga estes passos:
Para mais detalhes sobre as zonas de envio, consulte a nossa documentação.
Definir um país de origem e um código HS de recurso
O país de origem e o código HS são utilizados para calcular com precisão os direitos aduaneiros e os impostos.
Se não indicar um país de origem ou um código HS específico, utilizaremos os valores de recurso configurados no Dashboard.
Para definir o país de origem e o código HS de recurso:
Instalar o snippet Zonos JS
O snippet Zonos JS é uma integração JavaScript do lado do cliente que ativa a funcionalidade de checkout global no seu site. Funciona como ponte entre a sua plataforma de comércio eletrónico e os serviços Zonos, tratando de:
O snippet é carregado de forma assíncrona para não afetar o desempenho do seu site. É inicializado com as credenciais de API da sua loja e trata de todas as interações do lado do cliente de forma segura. A implementação foi concebida para ser pouco intrusiva, exigindo alterações mínimas ao seu fluxo de checkout existente.
Segue-se um exemplo completo, que inclui o carregamento do script, a inicialização e o tratamento de eventos, para consultar ao integrar o Checkout.
(async function () {const timestamp = new Date().getTime();const zonosScript = document.querySelector(`script[src*="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js"]`,);if (!zonosScript) {const script = document.createElement('script');script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=`;script.(, {..({: {: () => {{: ,};},: ,},: {: ,: {.();},},: ,: ,});});..(script);}})();Gerir a cache do navegador
Recomendamos que acrescente um carimbo temporal ou outro identificador único ao URL para garantir que o script não fica em cache no navegador. Assim, garante que é sempre carregada a versão mais recente do script. Isto é apresentado na linha 10 do exemplo completo.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Autenticar o snippet Zonos JS
Depois de carregar o script Zonos JS, tem de o autenticar, passando uma chave de API pública da Zonos e o ID da loja à função
Zonos.init. A chave de API pública utilizada para autenticar o Checkout foi concebida para ser publicável, ou seja, pode ser utilizada com segurança no código de frontend sem expor informações sensíveis.Para encontrar o ID da sua loja e a chave de API, navegue até Dashboard -> Definições -> Integrações. Certifique-se de que não utiliza uma chave de API secreta, uma vez que esta não foi concebida para ser utilizada em código de frontend. Isto é apresentado nas linhas 29 e 30 do exemplo completo.
Zonos.init({// ... other fieldszonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)// ... other fields});Atualizar a sua Política de Segurança de Conteúdo (CSP)
Se o seu site definir uma Política de Segurança de Conteúdo, adicione os domínios abaixo às diretivas CSP correspondentes. Esta política aplica-se tanto ao Checkout como ao Hello: o snippet Zonos carrega scripts, folhas de estilo, tipos de letra e imagens, e efetua pedidos de rede, pelo que bloquear qualquer um destes recursos irá interromper o fluxo do Checkout ou a apresentação do Hello. A lista de
style-srctambém se aplica astyle-src-elem.cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comassets.zonos.comzonos-store-assets.s3.amazonaws.comjs.stripe.coma.stripecdn.comb.stripecdn.comc.stripecdn.comcheckout.stripe.comf.stripecdn.comhcaptcha.comhooks.stripe.comm.stripe.comm.stripe.networkpay.stripe.compayments.stripe.comq.stripe.comr.stripe.comConfigurar o Hello
O Hello é obrigatório quando utiliza o Checkout.
O Hello é responsável por detetar a localização, o idioma e a moeda do visitante e por lhe apresentar as informações adequadas. Pode configurar todas as definições do Hello no Dashboard ou no script Zonos JS. Se já tiver configurado o Hello no Dashboard, o script carregará e utilizará essas definições. Se especificar valores na propriedade
helloSettingsda funçãoZonos.init, o script utilizará esses valores em vez das definições, conforme mostrado abaixo.Configurar a conversão de moeda do Hello no script JS
O Hello utiliza seletores CSS para identificar os elementos do seu site que apresentam informações de moeda. Passe estes seletores à propriedade
helloSettings.currencyElementSelectorda funçãoZonos.initpara que o Hello consiga detetar e apresentar a moeda correta ao comprador internacional.Pode utilizar aqui qualquer seletor CSS válido, por exemplo
#price, .price, para selecionar vários elementos diferentes. Isto é apresentado nas linhas 23 e 24 do exemplo completo.Zonos.init({// ... other fieldshelloSettings: {currencyElementSelector: '.price', // Replace with your actual selector},// ... other fields});Abrir o Hello automaticamente ao carregar a página
Por predefinição, o Hello só abre quando o visitante clica no botão da bandeira. Se pretender que o Hello abra automaticamente quando a página é carregada, pode chamar a função
Zonos.openHelloDialog()depois de o script Zonos ter sido carregado. Isto é apresentado nas linhas 25 e 26 do exemplo completo.Zonos.init({// ... other fieldshelloSettings: {// ... other hello settingsonInitSuccess: () => {Zonos.openHelloDialog();},},});Configurar as regras de apresentação de países no Dashboard
Controle, a partir do Dashboard, que países dos compradores veem o Hello e que países aparecem na lista pendente do seletor de países. Navegue até Dashboard -> Definições -> Hello e procure a secção Regras de apresentação de países.
Visibilidade do widget
Controle que países dos compradores veem o widget Hello. Escolha uma das regras base e, em seguida, utilize as listas Mostrar sempre e Nunca mostrar para substituir a regra em países específicos.
Seletor de países
Controle que países aparecem na lista pendente do seletor de países do Hello, utilizando as mesmas regras base e as substituições Mostrar sempre e Nunca mostrar.
As propriedades
showForCountrieseshowCountryListdehelloSettingsforam descontinuadas. Em vez disso, configure as regras de apresentação de países no Dashboard. Os valores definidos aí serão carregados automaticamente pelo script Zonos JS.Configurar o Checkout
O Checkout permite ao cliente introduzir as suas informações de envio e de faturação, calcular o landed cost, efetuar o pagamento e concluir a encomenda.
O Checkout partilha dados contextuais com o Hello, como a localização, o idioma e a moeda do visitante. Isto garante que a experiência do cliente é consistente ao longo de todo o processo de compra.
Pode configurar todas as definições do Checkout tanto no Dashboard como no script Zonos JS. Se já tiver configurado o Checkout no Dashboard, o script carregará e utilizará essas definições. Se especificar valores na propriedade
checkoutSettingsda funçãoZonos.init, o script utilizará esses valores em vez das definições.Configurar o botão "efetuar encomenda" no script JS
O script Zonos JS reconhece automaticamente os compradores internacionais e encaminha-os para o fluxo do Checkout. No entanto, terá de configurar o botão "efetuar encomenda" da sua plataforma para abrir o Checkout quando for clicado. Para tal, passe um seletor CSS à propriedade
checkoutSettings.placeOrderButtonSelectorda funçãoZonos.init.Se tiver vários botões que possam ser utilizados para efetuar uma encomenda, certifique-se de que passa um seletor para cada botão. Por exemplo,
#placeOrder, .place-order.Isto é apresentado na linha 21 do exemplo completo.
Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)},});Criar os detalhes do carrinho de forma segura no servidor
Para apresentar os detalhes do carrinho ao cliente, tem de criar uma função do lado do servidor que chame a API da Zonos para criar um carrinho e, em seguida, devolva o ID desse carrinho ao seu frontend. Isto garante que os detalhes do carrinho não ficam expostos ao cliente de uma forma que possa ser manipulada.
A chamada à API a partir do seu backend utilizará um token de credencial GraphQL secreto, que é diferente do token público que utiliza para autenticar o script Zonos JS. Pode obter este token em Dashboard -> Definições -> Integrações. O token secreto tem de ser passado como cabeçalho na sua chamada à API.
A mutação
cartCreateaceita uma lista de artigos, que deve ser formatada de acordo com o esquema de artigos do carrinho.// Create new cart from serversideasync function createCart() {/*** Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate* */const graphql = JSON.stringify({query: `mutation cartCreate($input: CartCreateInput!){cartCreate(input: $input) {idadjustments {amountcurrencyCodedescriptionproductIdskutype}items {idnameamountcurrencyCodequantityskudescriptionmetadata {keyvalue}}metadata {keyvalue}}}`,variables: {/*** input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput*/input: {/*** Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput*/adjustments: [{amount: -10,currencyCode: 'USD',/*** Enum value: https://zonos.com/developer/types/CartAdjustmentType*/type: 'CART_TOTAL',},],/*** Cart item input: https://zonos.com/developer/types/ItemInput*/items: [{name: 'Item 1',amount: 150.99,currencyCode: 'USD',description: 'Item 1 description',quantity: 2,},],/*** Cart metadata input: https://zonos.com/developer/types/CartMetadataInput*/metadata: [{: ,: ,},],},},});response = (, {: ,: {: ,: ,},: graphql,});{ data } = response.();data..;}Sugerimos que crie um endpoint de API no seu servidor e que, em seguida, chame esse endpoint a partir da sua integração JS no frontend, conforme detalhado no passo seguinte.
Passar o ID do carrinho ao Checkout através do frontend
Depois de criar um carrinho no servidor, tem de passar o ID do carrinho ao script Zonos JS. Pode fazê-lo através da função de callback
createCartId, que faz parte da funçãoZonos.init. Ao ser aberto, o Checkout obtém de forma segura os detalhes do carrinho junto da Zonos, impedindo qualquer adulteração do carrinho. Consulte o exemplo de código abaixo.O valor de
createCartIdnão pode ser um valor estático; tem de ser uma função.Zonos.init({// ... other fieldscheckoutSettings: {// Replace with your actual selector(s)createCartId: async () => {const response = await fetch('https://api.merchant.com/api/get-cart', {method: 'POST',headers: {'Content-Type': 'application/json',},});const json = await response.json();return json.id; // Only need to return the cart ID},},});(Opcional) Apresentar um aviso abaixo do Total da encomenda
Se precisar de apresentar uma mensagem curta e dinâmica no Checkout — por exemplo, uma divulgação regulamentar quando um produto específico está no carrinho —, pode devolver uma matriz
customMessagea partir da função de callbackcreateCartId. Cada entrada da matriz é apresentada numa linha própria de um único banner informativo, diretamente abaixo de Total da encomenda.A sintaxe de ligações Markdown —
[link label]seguido de(https://example.com)— é apresentada como uma etiqueta de âncora, para que os compradores possam clicar na ligação. Os URLshttps://simples no texto também são convertidos automaticamente em ligações. Tudo o resto é apresentado como texto simples, pelo que o HTML nas strings é escapado em vez de executado.É apresentado apenas um banner por Checkout, independentemente do número de linhas que passar.
Zonos.init({// ... other fieldscheckoutSettings: {createCartId: async () => {const response = await fetch('https://api.merchant.com/api/get-zonos-cart',{method: 'POST',headers: {'Content-Type': 'application/json',},},);const json = await response.json();return {cartId: json.id,// Each item is rendered on a new line of the same info banner.// Markdown links `[text](url)` become `<a>` tags.customMessage: ['Some items in your cart are subject to California regulations.','Please review the required notice [here](https://oag.ca.gov/prop65).',],};},},});(Opcional) Acionar o checkout da Zonos de forma programática
Se tiver lógica personalizada e precisar de acionar o checkout da Zonos de forma programática, pode utilizar a função
Zonos.triggerCheckoutInternational()para abrir a janela de checkout da Zonos depois de a Zonos ser inicializada. Isto invoca a função de callbackcreateCartIddefinida emZonos.initacima e abre a janela de checkout da Zonos.// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")const domesticCountry = 'US';document.querySelector('.country-select').addEventListener('change', e => {const country = e.target.value;if (country !== domesticCountry) {Zonos.triggerCheckoutInternational();}});(Opcional) Seletor que aciona sempre o checkout da Zonos
Se pretender separar o processo de checkout para compradores nacionais e internacionais, pode adicionar um botão
International checkoutao seu site. Em vez de acionar manualmente o Zonos Checkout comZonos.triggerCheckoutInternational, pode configurarZonos.initcom o seletor adequado. O seletor fica desativado até a Zonos ser inicializada; quando o botão for clicado, acionará automaticamente o checkout da Zonos. Isto invoca a função de callbackcreateCartIddefinida emZonos.inite abre a janela de checkout da Zonos.Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsalwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout},});(Opcional) Acompanhar o funil de checkout com o GA4 ou o Facebook Pixel
O Zonos Checkout pode encaminhar todo o funil de checkout para as suas ferramentas de análise existentes. Em cada passo, a Zonos emite:
zonos-checkout-...para o GA4 (através degtag('event', ...)) e para a Meta como evento personalizado (através defbq('trackCustom', ...)).InitiateCheckout,AddPaymentInfoePurchase—, para que a otimização e os relatórios de conversões integrados da Meta funcionem de imediato.A forma como os eventos chegam aos seus fornecedores depende da forma como o Checkout é apresentado no seu site. Escolha o caminho que corresponde à sua integração.
Integração nativa (o Checkout é apresentado diretamente no seu site)
Quando o elemento personalizado
<zonos-checkout>é montado na sua própria página (a predefinição da integração com o script Zonos JS descrita acima), os objetoswindow.gtagewindow.fbqda própria página já estão no âmbito. A Zonos chama-os diretamente — não é necessário qualquer relay nem a transmissão do ID do pixel.Configuração:
E é tudo. Sem script de relay, sem
customHTML, sem IDs adicionais a passar — a Zonos detetagtag/fbqna página e dispara os eventos diretamente.Integração por iframe (iframe antigo do Checkout em
iglobalstores.com)Quando o Checkout está alojado num iframe numa origem diferente, não consegue aceder diretamente a
gtag/fbqda sua página. A Zonos disponibiliza um pequeno script de relay —analyticsRelayOnInit.js— que escuta os eventos postMessage do iframe do Checkout e os reencaminha para os fornecedores que tiver na sua página. Um único relay trata simultaneamente do GA4 e do Facebook Pixel.Configuração:
<head>da página que aloja o iframe do Checkout.asyncsrc="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">customHTMLdo Checkout para que o relay saiba em que propriedade/pixel deve disparar os eventos:window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';Para instruções passo a passo para iframes, a referência completa de eventos (incluindo o mapeamento do payload de
purchase/Purchase) e sugestões de depuração, consulte:Sincronizar o acompanhamento e o estado das encomendas com o Dashboard
Para sincronizar as encomendas entre o seu sistema e o Zonos Dashboard, implemente estas chamadas à API e estes webhooks:
Mutações obrigatórias
orderUpdateAccountOrderNumberorderAddTrackingNumberWebhooks obrigatórios
ORDER_CREATEDORDER_STATUS_CHANGEDTestar a sua integração
Antes de colocar a sua integração do Checkout em produção, é importante testar exaustivamente todos os aspetos da integração para garantir uma experiência sem problemas para o cliente. Isto inclui testar o fluxo de checkout, o processamento de pagamentos, a criação de encomendas e o funcionamento dos webhooks.
Siga o nosso guia de testes para verificar se a sua integração está a funcionar corretamente e para identificar e corrigir eventuais problemas antes de a lançar em produção.
Perguntas frequentes
Seguem-se algumas perguntas frequentes sobre o processo de integração.
Como é que a Zonos trata a confirmação de encomendas?
Configure a experiência pós-compra em Dashboard -> Definições -> Definições do Checkout, em Tipo de página de sucesso. Estão disponíveis três opções:
zOrderNumber(eorderIdpara carrinhos antigos) como parâmetros de consulta.zonosCheckoutSessionIdcomo parâmetro de consulta. Utilize esta opção quando pretender o regresso mais rápido possível à sua própria página de sucesso.Procurar a encomenda a partir de
zonosCheckoutSessionIdQuando utiliza Fechar o modal do checkout com um URL de redirecionamento, a encomenda pode demorar alguns segundos a ficar associada à sessão de checkout após o redirecionamento. Leia
zonosCheckoutSessionIda partir do URL e consulte periodicamente a query GraphQLcheckoutSessiona partir do seu servidor, utilizando o seu token de credencial secreto, até a encomenda estar pronta. Nunca faça esta chamada a partir do navegador — o token de credencial secreto tem de permanecer no servidor.query getCheckoutSession($id: String!) {checkoutSession(id: $id) {order {id}}}Envie a query para
https://api.zonos.com/graphqlcom o seu token de credencial secreto, obtido em Dashboard -> Definições -> Integrações, passado no cabeçalho do pedidocredentialToken.Posso ser notificado quando é criada uma encomenda?
Sim. Se pretender receber notificações quando for criada uma encomenda, pode introduzir, no Dashboard, na secção E-mail das Definições do Checkout, o endereço de e-mail dos membros da equipa que devem ser notificados quando uma encomenda for criada, expedida ou cancelada.
Esta página foi útil?