add payment and integration with midtrans

app/trips/[id]/payment/page.tsx

@@ -11,6 +11,7 @@ import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
 import { isFreeTrip } from "@/lib/trip-pricing";
 import { categoryMeta } from "@/lib/activity-category";
 import { MarkPaidButton } from "@/features/booking/components/mark-paid-button";
+import { MidtransPayButton } from "@/features/booking/components/midtrans-pay-button";
 import { CopyButton } from "@/features/booking/components/copy-button";
 
 export const metadata: Metadata = {
@@ -293,8 +294,22 @@ async function PaidTripSection({
         </div>
       )}
 
-      {canMarkPaid && bankAvailable && (
-        <MarkPaidButton tripId={tripId} />
+      {canMarkPaid && (
+        <div className="space-y-3">
+          {bankAvailable && (
+            <>
+              <MarkPaidButton tripId={tripId} />
+              <div className="flex items-center gap-3">
+                <span className="h-px flex-1 bg-neutral-200" />
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-neutral-400">
+                  atau
+                </span>
+                <span className="h-px flex-1 bg-neutral-200" />
+              </div>
+            </>
+          )}
+          <MidtransPayButton tripId={tripId} />
+        </div>
       )}
 
       {hasMarkedPaid && (