Checkout — Genel bakış

Barındırılan checkout, alıcının fiilen fon gönderdiği sayfadır. Varlık seçicisini, depozito adresini veya QR’ı kendiniz render etmezsiniz — SDK sayfamızı (https://checkout.infraio.xyz/<session_key> üzerinde) açar ve arayüzü biz hallederiz.

Üç mod

Ortalanmış katman popup’ı, varsayılan ~560×780. Mağaza yerinde kalır. onSuccess, ödeme sonrası popup kapanınca tetiklenir. Varsayılan mod.

Popup

Checkout’a sert navigasyon. Popup engelleyen tarayıcılar veya mobil web için en iyisi, katmanların rahatsız edici hissettiği yerlerde. Alıcı oturumdaki success_url / cancel_url’nizden geri döner.

Yönlendirme

Sayfanız içinde iframe. Düzeni uçtan uca kontrol ettiğinizde ve sıfır bağlam değişikliği istediğinizde en iyisi. postMessage üzerinden otomatik yeniden boyutlanır.

Gömme

Mod-seçme sezgisi

Eğer…	Kullanın
Masaüstü web, varsayılan e-ticaret	Popup
Mobil web	Yönlendirme (popuplar + mobil = üzücü)
Sıkı CSP-kilitli admin paneli	Yönlendirme
Uygulama içi webview / native checkout-in-a-page	Gömme
White-label başlıkla tamamen özel bir alıcı akışı istiyorsanız	Gömme + `hideHeader` + kendi cüzdan bağlantınız

Alıcı ne görür

Moddan bağımsız olarak, sayfa şunları gösterir:

Sipariş özeti (line item’lar, toplam, para birimi). Kendi tarafınızda zaten gösterdiyseniz hideSummary ile gizleyin.
Varlık seçici — satıcı ayarlarında etkinleştirdiğiniz zincir × varlık kombinasyonlarının listesi. Alıcı birini seçer.
Seçilen kombinasyon için depozito adresi + QR + tutar. Alıcı ya tarar, ya bir cüzdan bağlar (WalletConnect butonu), ya da SDK aracılığıyla sağladığınız önceden bağlı bir cüzdandan öder.
Durum nabzı — “Transfer bekleniyor”, “Tx tespit edildi (3/12 onay)”, “Ödendi”.
İptal butonu (her zaman mevcut) → onCancel’ı tetikler.

Sayfayı özelleştirme

Kontrol	Nasıl	Sınırlar
Sipariş özetini gizle	SDK üzerinde `hideSummary: true`	Alıcı toplamı yine depozito panelinde görür
InfraIO başlığını gizle	SDK üzerinde `hideHeader: true`	Tam white-label için `walletAddress` ile eşleştirin
Bir cüzdanı önceden bağla	`walletAddress` + `walletChainId` + `onSignRequest`	WalletConnect modalını atlar
Yerel ayar (locale)	SDK üzerinde `locale` — `en`, `vi`, `ja`, `ko`, `es`, `pt-BR`, `ru`, `tr`, `zh-CN`, `zh-TW`’den biri	Checkout ve iade sayfalarını (ve cüzdan bağlama modalını) yerelleştirir. Bilinmeyen veya belirtilmemişse → `en`’e döner
Logo, marka rengi	Satıcı panel → Branding	Oturum başına değil, global olarak uygulanır

Dönüş URL davranışı

Yönlendirme modu için alıcı her zaman şunlardan birine döner:

Oturumdan success_url (tahsil edilen ödemede)
Oturumdan cancel_url (iptal/terk durumunda)
Bunları ayarlamadıysanız, SDK checkout’u açan sayfaya geri döner, ?session_id=…&status=success|cancel eklenmiş olarak

Popup ve gömme modları için navigasyon yoktur — kontrol onSuccess / onCancel aracılığıyla sayfanıza geri döner. Bunları, sıradaki UI’ın ne olacağına karar vermek için kullanın.

CSP ve gömme

Gömme modu kullanırsanız, CSP’niz frame-src içinde origin’imize izin vermelidir:


Content-Security-Policy:
  frame-src https://checkout.infraio.xyz https://checkout-dev.infraio.xyz;

iframe allow="payment; clipboard-write" izin politikasını taşır — Payment Request API’sini çağırabilir ve panoya yazabilir, daha fazlası değil. iframe HTML-sandbox değildir: checkout sayfası, postMessage güvenliği (her iki tarafta origin kontrolleri) ve üçüncü taraf cüzdan SDK’ları (WalletConnect, Coinbase, MetaMask) gerçek bir same-origin scripting bağlamı gerektiren tam bir cüzdan-bağlayan uygulamadır, bu yüzden bir HTML sandbox özelliği, ihmal edilebilir bir izolasyon kazancı için cüzdan bağlantısını bozar. İzolasyon bunun yerine cross-origin sınırından, katı postMessage origin kontrollerinden ve frame-src CSP’nizden gelir.

Mobil hususları

Popup’lar mobil Safari’de agresif şekilde engellenir. Trafiğiniz çoğunlukla mobilse, varsayılan olarak mode: "redirect" kullanın. Popup katmanı küçük ekranlarda klavye alanını da kaplar — tutar girişi için iyidir, varlık seçimi için garip.

Branding (white-label kalabalığı için)

Tam white-label şunları gerektirir:

SDK üzerinde hideHeader: true
Önceden bağlı walletAddress (alıcı WalletConnect görmez)
Satıcı panel branding’inde logonuz + marka renginiz ayarlı
(Opsiyonel) Checkout sayfası için özel alan adı — checkout.infraio.xyz yerine pay.your-shop.com. CNAME’iniz doğrulandıktan sonra panel üzerinden self-servis.

Sırada ne var

SDK → JavaScript — mod başına tam seçenek referansı.
Kavramlar → Oturumlar — alıcı sayfada iken sunucu tarafında ne oluyor.
Kavramlar → Zincirler ve varlıklar — seçicide hangi zincir×varlık kombinasyonlarının mevcut olduğu.