Crie uma integração de assinaturas
Crie e gerencie assinaturas para aceitar pagamentos recorrentes.

Customizar com a API Appearance.
Use este guia para saber como vender assinaturas de preço fixo . você usará o Payment Element com a Checkout Sessions API para criar um formulário de pagamento personalizado que será incorporado à sua inscrição.
Se você não quiser criar um formulário de pagamento personalizado, poderá integrar o checkout hospedado. Para obter uma versão imersiva desse guia de integração de ponta a ponta, consulte o início rápido do Billing .
Se você não estiver pronto para codificar uma integração, pode configurar assinaturas básicas manualmente no Dashboard. Você também pode usar o Payment Links para configurar assinaturas sem precisar escrever nenhum código. Saiba mais sobre como projetar uma integração para entender as decisões que você precisa tomar e os recursos necessários.
O que você vai criar
Este guia ensina a:
- Modelar seus negócios criando um catálogo de produtos.
- Construir um processo de registro que cria um cliente.
- Criar assinaturas e coletar dados de pagamento.
- Testar e monitorar o status do pagamento e da assinatura.
- Permitir que os clientes alterem o plano ou cancelem a assinatura.
Definições de objetos de API
| Recurso | Definição |
|---|---|
| Cliente | Representa um cliente que compra uma assinatura. Use o objeto Customer associado a uma assinatura para fazer e rastrear cobranças recorrentes e para gerenciar os produtos dos quais têm assinatura. |
| Direito | Representa o acesso de um cliente a um recurso incluído em um produto de serviço que assina. Quando você cria uma assinatura para a compra recorrente de um produto por um cliente, um direito ativo é automaticamente criado para cada recurso associado a esse produto. Quando um cliente acessa seus serviços, use os direitos ativos para habilitar os recursos incluídos na assinatura. |
| Recurso | Representa uma função ou capacidade que seus clientes podem acessar quando assinam um produto de serviço. Você pode incluir recursos em um produto criando ProductFeatures. |
| Fatura | Uma declaração de valores devidos por um cliente que acompanha os status de pagamento desde o esboço até o pagamento (ou outro tipo de finalização). As assinaturas geram faturas automaticamente. |
| PaymentIntent | Uma maneira de criar fluxos de pagamentos dinâmicos. Um PaymentIntent acompanha o ciclo de vida do fluxo de checkout de um cliente e aciona etapas adicionais de autenticação quando for exigido por mandatos regulatórios, regras personalizadas contra fraudes do Radar ou formas de pagamento baseadas em redirecionamento. As faturas criam PaymentIntents automaticamente. |
| PaymentMethod | As formas de pagamento que um cliente usa para pagar seus produtos. Por exemplo, você pode armazenar um cartão de crédito em um objeto Customer e usá-lo para fazer pagamentos recorrentes para esse cliente. Normalmente usado com as APIs Payment Intents ou Setup Intents. |
| Price | Define o preço unitário, a moeda e o ciclo de faturamento de um produto. |
| Product | Um produto ou serviço que sua empresa vende. Um produto de serviço pode incluir um ou mais recursos. |
| ProductFeature | Representa a inclusão de um único recurso em um único produto. Cada produto está associado a um ProductFeature para cada recurso que é incluído, e cada recurso é associado a um ProductFeature para cada produto que o inclui. |
| Subscription | Representa a compra recorrente agendada de um produto por um cliente. Use uma assinatura para coletar pagamentos e fornecer entregas repetidas ou acesso contínuo a um produto. |
Aqui está um exemplo de como produtos, recursos e direitos funcionam juntos. Imagine que você deseja configurar um serviço de assinatura que oferece dois níveis: um produto padrão com funções básicas e um produto avançado que adiciona funções estendidas.
- Você cria dois recursos:
basic_efeatures extended_.features - Você cria dois produtos:
standard_eproduct advanced_.product - Para o produto padrão, você cria uma ProductFeature que associa
basic_comfeatures standard_.product - Para o produto avançado, você cria duas ProductFeatures: uma que associa
basic_comfeatures advanced_e outra que associaproduct extended_comfeatures advanced_.product
Um cliente, first_, assina o produto padrão. Quando você cria a assinatura, a Stripe cria automaticamente um Entitlement que associa first_ com basic_.
Outro cliente, second_, assina o produto avançado. Quando você cria a assinatura, a Stripe cria automaticamente dois Entitlements: um que associa second_ a basic_ e outro que associa second_ com extended_.
É possível determinar quais recursos fornecer para um cliente recuperando seus direitos ativos ou escutando o evento Active Entitlement Summary. Você não precisa buscar as assinaturas, os produtos e os recursos dele.
Configurar a Stripe
Instale o cliente Stripe de sua escolha:
Em seguida, instale o Stripe CLI. O CLI fornece testes de webhooks, e você pode executá-lo para fazer chamadas de API para a Stripe. Este guia mostra a você como usar o CLI para configurar um modelo de preços em uma seção posterior.
Para obter opções de instalação adicionais, consulte Comece a usar o Stripe CLI.
Criar o modelo de preçosStripe CLI ou Dashboard
Crie seus produtos e preços usando o Dashboard ou a Stripe CLI.
Este exemplo usa um serviço de preço fixo com duas opções diferentes de nível de serviço: Básico e Premium. Para cada opção de nível de serviço, você precisa criar um produto e um preço recorrente. (Se quiser adicionar uma cobrança avulsa para um item como tarifa de configuração, crie um terceiro produto com um preço avulso. Para simplificar, este exemplo não inclui uma cobrança avulsa.)
Neste exemplo, o faturamento de cada produto é mensal. O produto básico custa 5 USD e o produto Premium custa 15 USD.
Criar o clienteCliente e servidor
A Stripe exige um Customer para cada assinatura criada. No front-end da aplicação, colete todas as informações necessárias dos usuários e envie ao servidor.
Se for necessário coletar informações de endereço, o Address Element permite que você colete endereço de entrega ou de cobrança dos seus clientes. Para mais detalhes sobre esse componente, veja a página do Address Element.
<form id="signup-form"> <label> Email <input id="email" type="email" placeholder="Email address" value="test@example.com" required /> </label> <button type="submit"> Register </button> </form>
const emailInput = document.querySelector('#email'); fetch('/create-customer', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email: emailInput.value, }), }).then(r => r.json());
No servidor, crie o objeto Customer da Stripe.
Observação
Certifique-se de armazenar o ID do cliente para utilizá-lo ao iniciar uma sessão de checkout.
Criar uma sessão do CheckoutServidor
No back-end de sua inscrição, defina um endpoint que crie a sessão para ser chamada pelo front-end. você precisará da ID de preço da assinatura na qual o cliente está registrando-se - seu front end passa esse valor.
Se você criou um preço único no passo 2, envie também essa ID de preço. Depois de criar uma Checkout Session, certifique-se de passar o segredo do cliente de volta para o cliente na resposta.
Observação
You can use lookup_keys to fetch prices rather than Price IDs. See the sample application for an example.
No Dashboard , ative as formas de pagamento que você deseja aceitar de seus clientes. O Checkout aceita várias formas de pagamento.
Colete dados de pagamentoCliente
Colete dados de pagamento no cliente com o Payment Element. O Payment Element é um componente de IU que simplifica a coleta de dados de pagamento para diversas formas de pagamento.
Procuro por webhooksServidor
Para concluir a integração, você precisa processar webhooks enviados pela Stripe. Esses eventos são acionados sempre que o status na Stripe muda, como assinaturas que criam novas faturas. No seu aplicativo, configure um manipulador HTTP para aceitar uma solicitação POST contendo o evento webhook e verifique a assinatura do evento:
Durante o desenvolvimento, use a CLI da Stripe para observar Webhooks e encaminhá-los para sua inscrição. Execute o seguinte em um novo terminal enquanto seu aplicativo de desenvolvimento estiver em execução:
stripe listen --forward-to localhost:4242/webhook
Para produção, configure um URL de endpoint de webhook no Dashboard ou use a API Webhook Endpoints.
Você precisa ouvir alguns eventos para concluir as etapas restantes deste guia. Consulte Eventos de assinatura para obter mais detalhes sobre Webhooks específicos de assinatura.
Providenciar acesso ao seu serviçoCliente e servidor
Agora que a assinatura está ativa, dê ao usuário acesso ao seu serviço. Para fazer isso, ouça os eventos customer., customer. e customer.. Esses eventos passam um objeto de assinatura que contém um campo status indicando se a assinatura está ativa, vencida ou cancelada. Consulte o ciclo de vida da assinatura para obter uma lista completa de status.
No seu gerenciador de webhooks:
- Verifique o status da assinatura. Se estiver
active, então o usuário pagou pelo seu produto. - Confira o produto que o cliente assinou e conceda acesso ao serviço. Verificar o produto em vez do preço proporciona mais flexibilidade, caso seja necessário alterar os preços ou o período de faturamento.
- Armazene o
product.,id subscription.eid subscription.no seu banco de dados junto com ostatus customer.que já salvou. Verifique esse registro quando determinar quais recursos precisam ser ativados para o usuário no seu aplicativo.id
O status de uma assinatura pode mudar a qualquer momento durante sua existência, mesmo que seu aplicativo não faça chamadas diretas para a Stripe. Por exemplo, uma renovação pode falhar devido a um cartão de crédito expirado, o que coloca a assinatura em um status de vencida. Ou, se você implementar o portal do cliente, um usuário pode cancelar a assinatura sem acessar diretamente seu aplicativo. A implementação correta do manipulador mantém o status do seu aplicativo sincronizado com a Stripe.
Cancelar a assinaturaCliente e servidor
É comum permitir que os clientes cancelem suas assinaturas. Este exemplo adiciona uma opção de cancelamento à página de configurações da conta.

Configurações da conta com a capacidade de cancelar a assinatura
function cancelSubscription(subscriptionId) { return fetch('/cancel-subscription', { method: 'post', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, }), }) .then(response => { return response.json(); }) .then(cancelSubscriptionResponse => { // Display to the user that the subscription has been canceled. }); }
No back-end, configure um endpoint para ser chamado pelo front-end.
Seu aplicativo recebe um evento customer..
Após o cancelamento da assinatura, atualize seu banco de dados para remover o ID da assinatura do Stripe previamente armazenado e restrinja o acesso ao seu serviço.
Quando uma assinatura é cancelada, você não pode reativá-la. Em vez disso, recolha as informações de faturamento atualizadas do cliente, atualize as formas de pagamento padrão e crie uma nova assinatura com o registro de cliente existente.
Teste a integração
Testar formas de pagamento
Use a tabela a seguir para testar diferentes formas de pagamento e cenários.
| Forma de pagamento | Cenário | Como testar |
|---|---|---|
| Débito automático BECS | O cliente paga com débito automático BECS. | Preencha o formulário usando o número da conta 900123456 e BSB 000000. O PaymentIntent confirmado inicialmente passa para o status processing, depois passa para succeeded três minutos depois. |
| Débito automático BECS | O pagamento do cliente falha com um código de erro account_. | Preencha o formulário usando o número da conta 111111113 e BSB 000000. |
| Cartão de crédito | O pagamento com cartão é bem-sucedido e não precisa de autenticação. | Preencha o formulário do cartão de crédito usando o número de cartão de crédito 4242 4242 4242 4242 com qualquer validade, CVC e código postal. |
| Cartão de crédito | O pagamento com cartão precisa de autenticação. | Preencha o formulário do cartão de crédito usando o número 4000 0025 0000 3155 com qualquer validade, CVC e código postal. |
| Cartão de crédito | O cartão é recusado com um código de recusa como insufficient_. | Preencha o formulário do cartão de crédito usando o número 4000 0000 0000 9995 com qualquer validade, CVC e código postal. |
| Débito automático SEPA | O cliente paga com débito automático SEPA. | Preencha o formulário usando o número de conta AT321904300235473204. Inicialmente, o status do PaymentIntent muda para processing e, três minutos depois, para succeeded. |
| Débito automático SEPA | O status do PaymentIntent do cliente muda de processing para requires_. | Preencha o formulário usando o número de conta AT861904300235473202. |
Monitorar eventos
Configure Webhooks para ouvir os eventos de alteração de assinatura, como upgrades e cancelamentos. Saiba mais sobre os Webhooks de assinatura . você pode visualizar eventos no Dashboard ou com o Stripe CLI.
Para obter mais detalhes, consulte testando sua integração com o Billing.
OpcionalPermita que os clientes alterem seus planosCliente e servidor
Para permitir que seus clientes alterem assinaturas, obtenha o ID do preço da opção para a qual desejam mudar. Em seguida, envie o ID do novo preço do front-end para um endpoint de back-end. Este exemplo também passa o ID da assinatura, mas é possível acessá-la no seu banco de dados para seu usuário conectado.
function updateSubscription(priceId, subscriptionId) { return fetch('/update-subscription', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ subscriptionId: subscriptionId, newPriceId: priceId, }), }) .then(response => { return response.json(); }) .then(response => { return response; }); }
No back-end, defina o endpoint para a chamada do seu front-end, passando o ID da assinatura e o ID do novo preço. A assinatura agora é Premium, a US$ 15 por mês, em vez de Básica a US$ 5 por mês.
Seu aplicativo recebe um evento customer..
OpcionalPrévia de uma alteração de preçoCliente e servidor
Quando o cliente altera sua assinatura, geralmente há um ajuste no valor devido, conhecido como pro rata. Você pode usar o endpoint create preview invoice para exibir o valor ajustado aos seus clientes.
No front-end, envie os detalhes da fatura gerada para um endpoint do backend.
function createPreviewInvoice( customerId, subscriptionId, newPriceId, trialEndDate ) { return fetch('/create-preview-invoice', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ customerId: customerId, subscriptionId: subscriptionId, newPriceId: newPriceId, }), }) .then(response => { return response.json(); }) .then((invoice) => { return invoice; }); }
No back-end, configure um endpoint para ser chamado pelo front-end.
OpcionalExibir a forma de pagamento do clienteCliente e servidor
Exibir a bandeira e os últimos quatro dígitos do cartão do seu cliente informa qual cartão está sendo cobrado ou se é preciso atualizar a forma de pagamento.
No front-end, envie o ID do método de pagamento para um endpoint de back-end que recupera os detalhes do método de pagamento.
function retrieveCustomerPaymentMethod(paymentMethodId) { return fetch('/retrieve-customer-payment-method', { method: 'post', headers: { 'Content-type': 'application/json', }, body: JSON.stringify({ paymentMethodId: paymentMethodId, }), }) .then((response) => { return response.json(); }) .then((response) => { return response; }); }
No back-end, configure um endpoint para ser chamado pelo front-end.
Exemplo de resposta:
{ "id": "pm_1GcbHY2eZvKYlo2CoqlVxo42", "object": "payment_method", "billing_details": { "address": { "city": null, "country": null, "line1": null, "line2": null, "postal_code": null,
Observação
Recomendamos que você salve paymentMethod. e last4 no banco de dados (por exemplo, paymentMethod. como stripeCustomerPaymentMethodId na coleção ou tabela users). Você também pode armazenar exp_, exp_, fingerprint e billing_ conforme necessário. Assim, você reduz o número de chamadas à Stripe para melhorar o desempenho e evitar possíveis limitações de fluxo.
Divulgue a Stripe para seus clientes
A Stripe coleta informações sobre interações do cliente com o Elements para fornecer serviços a você, evitar fraudes e melhorar os serviços. Isso inclui o uso de cookies e endereços IP para identificar quais Elements o cliente visualizou durante uma única sessão de checkout. Você é responsável por divulgar e obter todos os direitos e consentimentos necessários para que a Stripe use os dados dessas maneiras. Para saber mais, acesse nossa central de privacidade.