Apps Kit SDK logoApps Kit SDK
Documentação · Portal do Apps Kit SDK

Paywalls

O grupo Paywall na barra lateral (Produtos, Ofertas de produtos, Modelos de paywall) é uma área de recursos independente para criar e vender assinaturas e compras únicas no app sem precisar programar a interface do paywall. Os três componentes se complementam em um fluxo fixo: um Produto é um SKU individual da loja (um plano base de assinatura, uma oferta ou uma compra única), importado do Google Play, da App Store ou da Amazon, ou cadastrado manualmente; uma Oferta de produtos reúne vários Produtos de um app em um grupo nomeado, com um produto marcado como seleção padrão; e um Modelo de paywall é o layout da tela em si — criado visualmente no Portal — que apresenta os produtos de uma Oferta de produtos e inicia a compra. Depois de publicado, o modelo é conectado aos pontos de exibição reais no app em Detalhes do app → Paywalls para placeholders do app, descrito anteriormente neste guia.

Produtos

A página Produtos (/paywall-products) exibe uma tabela única com os produtos de todos os apps que você gerencia: #, Título, App (ícone, nome e pacote), Loja (um ícone da plataforma — Google Play, Apple App Store ou Amazon Appstore — ou um traço cinza se o app não tiver uma loja reconhecida), Identificador na loja (a string do produto/SKU na loja, exibida em fonte monoespaçada), Período, um selo de Status (Ativo/Inativo), Criado em e ações por linha. O campo de busca pesquisa por título, SKU, descrição, nome do app ou pacote, e os filtros App, Status, Loja e Período refinam ainda mais a lista, com o mesmo rodapé de paginação usado em todas as páginas de Paywall.

1789744318189-products-list.png

Clique em Criar produto (no canto superior direito) para começar um novo cadastro ou clique em uma linha existente para editá-la. Em ambos os casos, você acessa um editor com dois painéis: primeiro, escolha o App ao qual o produto pertence (nenhum outro campo é habilitado antes disso); depois, use Importar para trazer produtos da loja desse app ou Adicionar produto para criar um manualmente.

1789744336705-products-tree-grouped.png

Quando um app já tem produtos, o painel esquerdo os agrupa por tipo — Produtos manuais (criados diretamente no Portal), Produtos de compra única e cada Assinatura, que pode ser expandida para mostrar seus Planos base e as Ofertas vinculadas a cada plano base (um plano base é a unidade de cobrança/preço da loja dentro de uma mesma assinatura — por exemplo, um plano base "Pro semanal" e outro "Pro mensal" podem pertencer à mesma assinatura).

Importação do Google Play (Android). Para um app do Google Play, Importar → Conectar ao Google Play guia você por uma configuração única em duas etapas, em vez de apresentar apenas um formulário:

1789744372767-products-import-google-play.png

  • 1. Google Cloud — crie uma conta de serviço no Google Cloud Console, ative a Google Play Android Developer API para ela e baixe sua chave JSON.
  • 2. Play Console — convide o e-mail dessa conta de serviço para o Play Console com as permissões Ver informações do app e Gerenciar presença na loja (a janela modal mostra o e-mail para copiar e fornece links diretos para os dois consoles).

Faça upload da chave JSON da conta de serviço que você baixou, marque opcionalmente Incluir planos base e ofertas inativos (desmarcado por padrão — apenas o que está ativo no Play Console é importado) e clique em Buscar produtos. Cada resultado se torna um rascunho de produto com título, descrição, prévia do preço, status e — exclusivamente no Google — a árvore completa de planos base/ofertas (ID da assinatura, ID do plano base e tipo, preços, fases e elegibilidade de cada oferta) já preenchidos. Executar a importação novamente atualiza os rascunhos não salvos com os dados do Play Console, sem alterar nada que você já tenha salvo.

Importação da Apple App Store (iOS). Para um app da App Store, Importar produtos da App Store solicita o Bundle ID do app (preenchido automaticamente), o Key ID, o Issuer ID e o upload de um arquivo de chave de compras dentro do app (.p8) — os três últimos são obtidos na página Usuários e acesso → Integrações → Compras dentro do app do App Store Connect, acessível por um link direto na janela modal. Buscar produtos permanece desabilitado até que o Key ID, o Issuer ID e o arquivo .p8 tenham sido fornecidos. Devido à hierarquia da Apple (grupo de assinaturas → produto), os produtos importados não têm a mesma árvore de planos base dos produtos do Google; o status é derivado do estado real de análise na Apple, portanto apenas uma assinatura que esteja de fato APPROVED é importada como Ativa — qualquer uma que ainda esteja em análise, precise de uma ação do desenvolvedor ou tenha sido rejeitada é importada como Inativa.

Importação da Amazon Appstore. O fluxo da Amazon usa arquivos em vez de credenciais: faça upload de um JSON do catálogo de produtos (uma exportação de produtos do Amazon App Tester) e clique em Importar produtos. Itens do tipo SUBSCRIPTION se tornam produtos de assinatura; itens ENTITLED e CONSUMABLE se tornam produtos de compra única. A Amazon não tem o conceito de plano base, então cada produto importado usa diretamente seu ID de produto/SKU da Amazon, em vez de uma árvore de planos base.

Criação manual de um produto. Clicar em Adicionar produto cria um rascunho no qual você informa manualmente os identificadores na loja, em vez de importá-los — útil se você ainda não configurou o produto no console da loja ou quer prepará-lo primeiro no Portal. Os campos de identificação exibidos dependem da loja do app: o Google Play solicita ID da assinatura, ID do plano base e Período de cobrança; a App Store solicita Grupo de assinaturas e ID do produto; a Amazon solicita ID do produto e tipo de produto. Também é possível marcar um produto como compra única em vez de assinatura recorrente.

Depois que um campo é preenchido por uma importação bem-sucedida, ele se torna somente leitura e exibe a dica "Importado da loja. Edite no Google Play / App Store / Amazon e importe novamente" — você faz a alteração no console da loja e executa a importação novamente, em vez de editar o campo diretamente aqui.

1789744448829-products-base-plan-offers.png

Independentemente da loja, todo produto tem um Título (100 caracteres), uma Descrição obrigatória (500 caracteres), tags opcionais de Recursos / Benefícios, Parâmetros personalizados no formato chave/valor e um Status (Ativo/Inativo) que você pode alternar mesmo em um produto importado. O Período pode ser semanal, mensal, trimestral, semestral, anual, vitalício ou um Período personalizado em texto livre. Os produtos salvos são vinculados a uma Oferta de produtos na próxima etapa.

A exclusão de um produto ainda referenciado por uma Oferta de produtos ou um Modelo de paywall não falha silenciosamente — o Portal exibe uma segunda confirmação, indicando exatamente a quais itens ele ainda está vinculado, e exige que você marque explicitamente uma caixa de seleção confirmando que ele também será removido desses locais antes de permitir a exclusão.

Ofertas de produtos

Uma Oferta de produtos agrupa vários Produtos de um app em um único conjunto nomeado que pode ser apresentado por um Modelo de paywall — essa é a camada que define quais produtos um determinado paywall pode vender e qual deles fica pré-selecionado.

1789744472318-offerings-list.png

A página Ofertas de produtos (/paywall-offerings) lista #, Nome da oferta de produtos, App, quantidade de Produtos, Status, Criado em e ações, com o mesmo padrão de busca e filtros de App/Status da página Produtos. Clique em Criar oferta de produtos para começar.

1789744566510-offerings-edit-products.png

Toda Oferta de produtos pertence a exatamente um App — escolha-o primeiro, pois ele determina quais produtos estarão disponíveis para seleção (alterar o App depois limpa a seleção em andamento). Preencha um Nome (100 caracteres) e uma Descrição opcional (500 caracteres); depois, use a lista de seleção Produtos na oferta para marcar quais produtos desse app (incluindo variantes individuais de planos base) pertencem a essa Oferta de produtos — há um atalho Selecionar todos e um campo de busca próprio. Cada produto marcado tem seu próprio botão Padrão; clicar nele define esse produto como o pacote padrão/pré-selecionado da Oferta de produtos, desmarcando automaticamente o produto que era o padrão anterior, para que haja sempre exatamente um padrão por Oferta de produtos. Pelo menos um produto precisa estar selecionado para salvar.

Um Modelo de paywall é vinculado a exatamente uma Oferta de produtos (definida na janela Configurar app do modelo, descrita a seguir) — cada cartão de preço inserido na área de edição desse modelo fica vinculado a um produto específico da Oferta de produtos associada, o que determina quais produtos e preços um paywall pode exibir.

Modelos de paywall

Em Modelos de paywall, você cria visualmente a tela do paywall — sem precisar programar uma interface nativa. Um modelo é criado uma única vez, vinculado a um app e a uma Oferta de produtos, e pode ser traduzido para vários idiomas; ao publicá-lo, ele fica disponível para ser conectado a pontos de exibição reais em Detalhes do app.

1789744608353-paywall-templates-list.png

Lista de modelos

A página Modelos de paywall (/paywall-templates) lista todos os paywalls que você criou: #, Nome do modelo, Status (Publicado/Rascunho), os Apps aos quais ele está atribuído, Atualizado em e ações. Os filtros Status e App refinam a lista, e o campo de busca pesquisa por nome.

Como começar um novo paywall

Clicar em Criar paywall oferece dois pontos de partida: Começar do zero ("Abra uma tela de celular em branco e adicione seus próprios contêineres de empilhamento, textos, pacotes, botões e links legais") ou Usar modelo ("Escolha um paywall existente e crie um novo rascunho com a mesma área de edição e os mesmos componentes").

1789744746399-paywall-create-picker.png

Usar modelo abre uma galeria dividida entre Modelos padrão — alguns layouts iniciais integrados (cada um com nome e descrição próprios) que você pode usar como ponto de partida e personalizar totalmente — e Seus modelos, com os modelos já salvos na sua conta. Escolher qualquer cartão duplica a área de edição e os componentes daquele modelo em um novo rascunho; como os vínculos com produtos não são transferidos, depois você precisa associar cada cartão de preço à sua própria Oferta de produtos. Já Começar do zero abre uma área de edição completamente em branco.

1789744771801-paywall-use-template-gallery.png

Criação do layout de um paywall (área de edição)

Ao abrir um modelo — novo ou existente — você acessa o editor visual.

1789744792287-paywall-builder-overview.png

O cabeçalho (título, um ícone de lápis ao lado para renomeá-lo, Configurar app, um seletor Rascunho / Publicado, um seletor de idioma e Limpar / Descartar rascunho / Salvar rascunho / Publicar) fica em uma única linha acima da área de trabalho. O painel esquerdo alterna entre Camadas — uma árvore com todos os elementos presentes na área de edição, com controles para copiar/colar contêineres de empilhamento — e, ao clicar em + em qualquer contêiner de empilhamento, Adicionar componentes — a paleta de blocos disponíveis para inserção. O painel central é uma prévia em tempo real, em tamanho real, dentro de uma moldura de celular; o painel direito é um Inspetor do elemento selecionado, organizado em Conteúdo, Layout, Ordem das camadas, Aparência e Ações.

1789744812066-paywall-add-components.png

A paleta de componentes é agrupada por finalidade: blocos Básicos (Texto, Imagem, GIF, Botão de fechar, Vídeo e contêineres de Empilhamento — vertical, horizontal ou em camadas — além de um bloco de Cabeçalho combinado e um contêiner Personalizado em branco); blocos de Paywall (Pacote — cartões de preço clicáveis em sete variantes: Simples, Destaque, Compacto, Teste grátis, Desconto percentual, Desconto fixo e Preço introdutório —, um Botão de compra, um Botão de compra única e botões de Checkout expresso); blocos Interativos (Abas, para alternar entre grupos de planos, como Mensal/Anual; Interruptor; Botão; Carrossel); e blocos de Conteúdo (um depoimento de Prova social, uma Lista de recursos, um Selo, um selo de "Prêmio"/melhor oferta e um Link legal para Termos/Privacidade).

Vinculação dos preços

1789744829200-paywall-package-product-data.png

Cada cartão de Pacote tem uma lista suspensa Pacote da oferta de produtos na seção Conteúdo, preenchida apenas com produtos da Oferta de produtos definida em Configurar app (Assinatura → Plano base → Oferta preferencial, nessa ordem) — selecionar um item vincula o cartão exatamente àquele produto. O Inspetor passa a exibir uma prévia Dados do produto, atualizada em tempo real e somente leitura (título, descrição, prévia do preço e recursos), obtida diretamente desse produto, além de uma dica informando que você também pode referenciá-lo em outros pontos da área de edição com tokens de preço como {planKey.price}. Se o layout visual de um cartão não corresponder ao que o pacote selecionado exige (por exemplo, um cartão de preço simples vinculado a um produto configurado com teste grátis), o Inspetor sinaliza isso com um atalho Aplicar layout [x] para manter os dois consistentes. Botões de compra e cartões de preço também podem ser configurados como Visível na aba, para que um cartão só apareça enquanto a opção correspondente do componente Abas estiver selecionada.

Configurar app é onde você define de qual app e de qual Oferta de produtos vêm os produtos de um modelo:

1789744847559-paywall-configure-app.png

Escolha um App à esquerda e, em seguida, uma das Ofertas de produtos desse app à direita (cada opção mostra uma prévia de sua chave e de até cinco chaves de pacotes de produtos) — um modelo é direcionado a exatamente um app e uma Oferta de produtos por vez.

Idiomas e traduções

1789744871233-paywall-language-dropdown.png

A lista suspensa de idiomas no cabeçalho mostra o idioma padrão e todos os idiomas adicionados, cada um marcado como Padrão, Traduzido, Precisa de atualização ou Rascunho. Gerenciar idiomas adiciona ou remove idiomas (com quantidade limitada pelo seu plano); Traduzir com IA traduz automaticamente os idiomas selecionados (também sujeito a limites por hora/dia conforme o plano). Uma tradução não é uma cópia separada do layout — é uma camada de substituições de texto sobre o único design no idioma padrão. Por isso, selecionar um idioma diferente do padrão coloca a área de edição no modo "Texto da tradução editável, estilo bloqueado": você não pode adicionar, mover, redimensionar ou alterar o estilo de nenhum elemento enquanto traduz, mas o Inspetor de cada campo de texto passa para o modo de inserção de tradução, e o que você digita ali salva apenas o texto daquele idioma.

Rascunho, versão publicada e publicação

O seletor Rascunho / Publicado alterna a versão do modelo que você está visualizando — a versão Publicada é somente leitura, então você precisa mudar para Rascunho antes de fazer alterações. Limpar deixa a área de edição em branco localmente (nada é excluído no servidor até você salvar). Descartar rascunho remove permanentemente o rascunho não salvo e recarrega a última versão publicada. Salvar rascunho salva o estado atual da área de edição como rascunho, sem alterar a versão que está publicada. Publicar permanece desabilitado até que exatamente um app e uma Oferta de produtos estejam configurados e todos os cartões de Pacote estejam de fato vinculados a produtos reais; depois que essas verificações são concluídas com sucesso, o rascunho atual passa a ser a nova versão publicada — o que permite atribuí-lo a um placeholder do app, em Detalhes do app → Paywalls para placeholders do app.