Skip to Content
Construindo uma Ticketeira Completa4. Criar pedido e checkout

4. Criar pedido e redirecionamento para checkout

Após o usuário adicionar itens ao carrinho e (opcionalmente) aplicar um cupom, crie o pedido e redirecione para a URL do checkout (whitelabel), onde o pagamento será concluído.

Escolha a abordagem que prefere:

Core SDK

const { order, clientSecret } = await sdk.orders.create({
  eventId: 'event-id',
  tickets: [
    { id: 'ticket-id', amount: 2 },
    { id: 'product-id', amount: 1 },
    // Para ingressos com assentos: { id: 'ticket-id', amount: 1, seatIds: ['A1'] }
  ],
  couponId: 'coupon-id', // opcional
  utmSource: 'google',
  utmCampaign: 'campaign-123',
  middlewareData: { customField: 'value' },
  buyer: {
    name: 'João Silva',
    email: 'joao@example.com',
    document: '12345678900',
    phoneNumber: '+5511999999999',
  },
});
 
// order.id é usado na URL do checkout

Parâmetros de create:

ParâmetroObrigatórioDescrição
eventIdSimID do evento
ticketsSimArray de { id, amount, seatIds? }
couponIdNãoID do cupom aplicado
utmSourceNãoOrigem da campanha (ex.: google)
utmCampaignNãoNome da campanha
middlewareDataNãoDados para integrações
buyerNão*Dados do comprador (*pode ser coletado no checkout)

URL do checkout (whitelabel)

Após criar o pedido, redirecione o usuário para a URL do checkout. O formato base é:

{CHECKOUT_URL}/orders/{orderId}?event_slug={eventSlug}

Parâmetros aceitos na URL

ParâmetroObrigatórioDescrição
orderIdSimID do pedido (path: /orders/{orderId})
event_slugRecomendadoSlug do evento para contexto e validação

Exemplo:

https://checkout.seudominio.com/orders/cml5d0rwd000dju0v1sam6u2o?event_slug=meu-evento-rock

Variável de ambiente

Configure a URL base do checkout:

NEXT_PUBLIC_MEAPLE_CHECKOUT_URL=https://checkout.seudominio.com

O checkout (whitelabel) é uma aplicação separada que recebe o usuário nessa URL, exibe os dados do pedido e processa o pagamento. Parâmetros adicionais podem ser aceitos conforme a implementação do seu checkout.

Fluxo completo

  1. Usuário preenche o carrinho (ingressos + produtos)
  2. (Opcional) Aplica cupom
  3. Clica em “Finalizar compra”
  4. Sua aplicação chama orders.create com os itens do carrinho
  5. Redireciona para {CHECKOUT_URL}/orders/{orderId}?event_slug={eventSlug}
  6. O checkout exibe o pedido e processa o pagamento
  7. Após o pagamento, o usuário pode ser redirecionado de volta ou para a página do pedido

Tratamento de erros

Em caso de erro na criação do pedido (ex.: estoque insuficiente, cupom inválido), a API retorna uma mensagem de erro. Trate o erro e exiba feedback ao usuário:

try {
  const { order } = await createOrder.mutateAsync({ ... });
  router.push(checkoutUrl);
} catch (err: any) {
  const message = err?.response?.data?.message ?? 'Erro ao criar pedido';
  // Exibir toast ou mensagem de erro
}
Last updated on
3. Aplicar cupom5. Pedido comprado