Checkout storefront

Situs marketing menjual Solo dan Pro sebagai pembelian one-time lewat payment link Mayar yang di-host. Jalur ini terpisah dari checkout membership STARTER yang terautentikasi.

Variabel lingkungan

Setel di .env root (lihat Environment):

Buat payment link di dashboard Mayar (sandbox: web.mayar.club).

Alur checkout

sequenceDiagram
  participant User
  participant Marketing
  participant Checkout as POST_/api/checkout
  participant Mayar

  User->>Marketing: Klik Solo atau Pro
  Marketing->>Checkout: plan solo atau pro
  Checkout->>Checkout: getStorefrontCheckoutUrl
  Checkout-->>Marketing: checkoutUrl
  Marketing->>Mayar: Redirect ke payment link

1. UI Pricing memanggil useCreateCheckout() (apps/marketing/src/mutations/use-create-checkout.ts).
2. POST /api/checkout dengan { plan: "solo" | "pro" } (apps/marketing/src/app/api/checkout/route.ts).
3. Server menyelesaikan URL lewat getStorefrontCheckoutUrl di packages/payments/src/storefront.ts.
4. Client mengalihkan dengan window.location.assign(checkoutUrl).
5. Setelah bayar, pengguna masuk ke /[locale]/checkout/success (halaman terima kasih).

export function getStorefrontCheckoutUrl(plan: StorefrontPlan): string | null {
	const url =
		plan === "solo"
			? env.MAYAR_PAYMENT_LINK_SOLO
			: env.MAYAR_PAYMENT_LINK_PRO;
	return url || null;
}

Webhook

Arahkan webhook Mayar ke:

{MARKETING_URL}/api/webhooks/mayar

Otorisasi dengan x-mayar-webhook-secret atau Authorization: Bearer <MAYAR_WEBHOOK_SECRET>.

Handler memvalidasi payload dan memperlakukan product ID Solo/Pro yang dikenal sebagai event storefront. Product ID non-storefront dijawab { received: true } dan diabaikan. Route ini saat ini meng-ack event storefront; tidak menulis baris Subscription.

Terkait

• Provider Mayar
• Ringkasan pembayaran
• Apps