4. Criar pedido e redirecionamento para checkout

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',
});
 
// order.id é usado na URL do checkout

import { useCreateOrder } from '@meaple-com/react-query';
import { useCart } from '@meaple-com/react-headless-components';
import { useRouter, useSearchParams } from 'next/navigation';
import type { FormEvent } from 'react';
import type { EventProps } from '@meaple-com/types';
 
function CheckoutButton({ event }: { event: EventProps }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const createOrder = useCreateOrder();
  const cart = useCart();
 
  const handleCreateOrder = async (e: FormEvent) => {
    e.preventDefault();
 
    const utmSource = searchParams?.get('utm_source') ?? undefined;
    const utmCampaign = searchParams?.get('utm_campaign') ?? undefined;
 
    try {
      const { order } = await createOrder.mutateAsync({
        eventId: event.id,
        tickets: cart.items.map(item => ({
          id: item.id,
          amount: item.amount,
          seatIds: item.seats?.map(s => s.label),
        })),
        couponId: cart.coupon?.id,
        utmSource,
        utmCampaign,
      });
 
      const params = new URLSearchParams({
        icon_url: `${process.env.NEXT_PUBLIC_APP_URL}/logo.png`,
        theme: process.env.NEXT_PUBLIC_THEME ?? '',
        primary_color: process.env.NEXT_PUBLIC_PRIMARY_COLOR ?? '',
        callbackUrl: `${process.env.NEXT_PUBLIC_APP_URL}/orders/${order.id}`,
      });
 
      const checkoutUrl = `${process.env.NEXT_PUBLIC_MEAPLE_CHECKOUT_URL}/checkout/${order.id}?${params.toString()}`;
      router.push(checkoutUrl);
    } catch (error) {
      console.error('Erro ao criar pedido', error);
    }
  };
 
  return (
    <form onSubmit={handleCreateOrder}>
      <button
        type="submit"
        disabled={createOrder.isPending || cart.items.length === 0}
      >
        {createOrder.isPending ? 'Processando...' : 'Finalizar compra'}
      </button>
    </form>
  );
}