Skip to Content
CheckoutGenel bakış
View as Markdown

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-ticaretPopup
Mobil webYönlendirme (popuplar mobilde sık sık engellenir)
Sıkı CSP-kilitli admin paneliYönlendirme
Uygulama içi webview / native checkout-in-a-pageGömme
White-label başlıkla tamamen özel bir alıcı akışı istiyorsanızGömme + hideHeader + kendi cüzdan bağlantınız

Alıcı ne görür

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

  1. Sipariş özeti (line item’lar, toplam, para birimi). Kendi tarafınızda zaten gösterdiyseniz hideSummary ile gizleyin.
  2. Varlık seçici — satıcı ayarlarında etkinleştirdiğiniz zincir × varlık kombinasyonlarının listesi. Alıcı birini seçer.
  3. 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. TRON, Solana ve TON’da alıcı doğrudan sizin cüzdanınıza öder; bkz. Doğrudan cüzdana ödeme yapan ağlar.
  4. Durum nabzı — “Transfer bekleniyor”, “Tx tespit edildi (3/12 onay)”, “Ödendi”.
  5. İptal butonu (her zaman mevcut) → onCancel’ı tetikler.

Sayfayı özelleştirme

KontrolNasılSınırlar
Sipariş özetini gizleSDK üzerinde hideSummary: trueAlıcı toplamı yine depozito panelinde görür
InfraIO Pay başlığını gizleSDK üzerinde hideHeader: trueTam white-label için walletAddress ile eşleştirin
Bir cüzdanı önceden bağlawalletAddress + walletChainId + onSignRequestWalletConnect modalını atlar
Yerel ayar (locale)SDK üzerinde locale — en, vi, ja, ko, es, pt-BR, ru, tr, zh-CN, zh-TW’den biriCheckout ve iade sayfalarını (ve cüzdan bağlama modalını) yerelleştirir. Bilinmeyen veya belirtilmemişse → en’e döner
Logo, marka rengiSatıcı panel → BrandingOturum 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’e bir HTML sandbox özelliği eklemeyin, çünkü cüzdan bağlantısını bozar. iframe, cross-origin sınırıyla ve frame-src CSP’nizle izole edilir.

Mobil hususları

Mobil tarayıcılar, özellikle Safari, popup’ları sık sık engeller. Trafiğinizin çoğu mobilse mode: "redirect" kullanın. Küçük ekranlarda popup katmanı klavye alanını da kaplar, bu da varlık seçimini zorlaştırır.

White-label branding

Tam white-label şunları gerektirir:

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

Sırada ne var

Ön ödemeli krediGenel bakış