Custom Events for custom pixel

Question

I was using old pixel code which you have to put in checkout setting for pixel code, but now I am trying to implement custom events. Everything is working fine but I am not receiving checkout_id through

analytics.subscribe('checkout_completed', (event) => {
  // Example for accessing event data
  const checkout = event.data.checkout;

  const checkoutTotalPrice = checkout.totalPrice.amount;

  const allDiscountCodes = checkout.discountApplications.map((discount) => {
    if (discount.type === 'DISCOUNT_CODE') {
      return discount.title;
    }
  });

  const firstItem = checkout.lineItems[0];

  const firstItemDiscountedValue = firstItem.discountAllocations[0].amount;

  const customItemPayload = {
    quantity: firstItem.quantity,
    title: firstItem.title,
    discount: firstItemDiscountedValue,
  };

  const paymentTransactions = event.data.checkout.transactions.map((transaction) => {
    return {
        paymentGateway: transaction.gateway,
        amount: transaction.amount,
      };
  });

  const payload = {
    event_name: event.name,
    event_data: {
      totalPrice: checkoutTotalPrice,
      discountCodesUsed: allDiscountCodes,
      firstItem: customItemPayload,
      paymentTransactions: paymentTransactions,
    },
  };

  // Example for sending event data to third party servers
  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});

and why event.data.checkout.attributes is an empty array?

I need checkout_id for my attribution and gift_card amount and attribute array