Shopify Plus Ödeme Genişletilebilirliği: Özel Ödeme Deneyimleri

Shopify'ın ödeme oranı ortalama %15 oranında dönüşüm sağlıyor; bu, e-ticaretteki en yüksek oranlardan biri. Bu istatistik, Shopify'ın geçmişte ödeme özelleştirmesini kısıtlamasının nedenidir: Ödeme işlemleri iyi optimize edilmiştir ve özel değişiklikler, dönüşümü azaltma eğilimindedir. Ancak satıcıların özelleştirme yapmak için meşru nedenleri vardır: sadakat puanlarının gösterimi, teslimat tercihleri, hediye mesajları, B2B satın alma siparişi alanları ve standart ödemenin karşılayamayacağı uyumluluk gereksinimleri.

Ödeme Genişletilebilirliği, Shopify Plus'ın bu gerilime verdiği yanıttır. Shopify'ın optimize edilmiş ödeme mimarisini korurken ve Shopify platformu geliştirdikçe otomatik güncellemeleri sürdürürken anlamlı ödeme özelleştirmesine olanak tanır. Kullanımdan kaldırılan checkout.liquid yaklaşımı, Shopify'ın ödeme işlemini her güncellediğinde bozuldu. Uzantıların tasarımı gereği yükseltme güvenlidir.

Önemli Çıkarımlar

• Ödeme Genişletilebilirliği, kullanımdan kaldırılan checkout.liquid'in yerini alıyor — tüm Plus satıcılarının 2025 yılına kadar geçiş yapması gerekiyor (zaten geçmiş)
• Kullanıcı Arayüzü Uzantıları, Shopify'ın temel ödeme şablonunu geçersiz kılmadan belirli ödeme alanlarına React bileşenleri ekler
• Ödeme İşlevleri indirimler, gönderim ve ödeme yöntemi filtreleme için özel sunucu tarafı mantığını etkinleştirir
• Uzantılar korumalı bir ortamda yürütülür; oluşturma hedefleri dışında DOM'a erişemezler
• Branding API, ödeme renklerinin, tipografinin ve köşe yarıçapının tamamen görsel olarak özelleştirilmesine olanak tanır
• Satın alma sonrası uzantılar, sipariş onayından sonra tek tıklamayla ek satış teklifleri ekler (en yüksek dönüşüm yerleşimi)
• Teşekkür ederiz sayfası ve Sipariş Durumu sayfası artık uzantılarla tamamen özelleştirilebilir
• Performans: Uzantılar, Shopify'ın altyapısında sunucu tarafında oluşturulur; istemci tarafında performans kaybı yaşanmaz

---

Ödeme Genişletilebilirliğinin Mimarisi

Teknik mimariyi anlamak, neyi nasıl inşa edeceğiniz konusunda daha iyi kararlar vermenize yardımcı olur.

Uzatma Noktaları (Yuvalar)

Shopify'ın ödeme kullanıcı arayüzünde, özel React bileşenlerini ekleyebileceğiniz belirli konumlar olan önceden tanımlanmış uzantı noktaları bulunur. Bunları, onaylanmış bileşenleri kabul eden bir ödeme şablonundaki yapılandırılmış alanlar olarak düşünün:

Uzantı Korumalı Alanı

Uzantılar yalıtılmış bir JavaScript ortamında çalışır. Doğrudan DOM manipülasyonu yerine standartlaştırılmış bir API (@shopify/ui-extensions paketi) aracılığıyla Shopify'ın ödeme işlemiyle iletişim kurarlar. Bu şu anlama gelir:

• Uzantılar ödeme sayfasının diğer bölümlerini okuyamaz veya değiştiremez
• Uzantılar tarayıcı çerezlerine, localStorage'a veya harici JavaScript'e erişemez
• Uzantılardan gelen ağ istekleri Shopify'ın onaylı uç noktalarından geçmelidir
• Uzantılar API aracılığıyla ödeme verilerini (sepet içeriği, müşteri bilgileri, gönderim seçimi) okuyabilir

Bu korumalı alan oluşturma, uzantıların yükseltme açısından güvenli olmasının nedenidir: Shopify, uzantı entegrasyonlarını bozmadan ödeme şablonunu güncelleyebilir.

---

Uzantı Geliştirme Ortamınızı Kurma

Önkoşullar

• Geliştirme mağazası erişimine sahip Shopify Plus mağazası
• Node.js 18+ ve npm/pnpm
• Shopify CLI 3.x

İlk Kurulum

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

Bu, Shopify uygulama dizininizde bir ödeme uzantısı iskelesi oluşturur.

Uzantı Dosya Yapısı

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

Minimal Uzantı (TypeScript/React)

Özel bir mesaj görüntüleyen bir ödeme uzantısı:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

Not: Kod örnekleri açıklayıcıdır; gerçek Shopify Kullanıcı Arayüzü Uzantıları API'si gelişir; her zaman güncel Shopify geliştirici belgelerine başvurun.

---

Yüksek Değerli Uzantı Kullanım Durumları

1. Sadakat Puanlarının Görüntülenmesi ve Kullanılması

Müşterinin mevcut bağlılık puanı bakiyesini gösterin ve puanları indirim olarak uygulamasına olanak tanıyın:

Uzantı, ödeme bağlamından müşterinin kimliğini okur, Shopify'ın fetch proxy'si aracılığıyla bağlılık platformunuzun API'sini (Smile.io, LoyaltyLion) çağırır, bakiyeyi görüntüler ve onaylandıktan sonra Shopify'ın indirim API'si aracılığıyla bir indirim kodu uygular.

Bu, ortak bir anlaşmazlık noktasının yerini alıyor: Bağlılık puanlarını kullanmak isteyen ancak kodlarını bulmak için ödeme işleminden çıkmak zorunda kalan müşteriler, bu da genellikle sepetin terk edilmesiyle sonuçlanır.

Beklenen dönüşüm etkisi: Mevcut puanları gören bağlılık programı üyelerinin ödeme tamamlama oranında %3-8 artış.

2. Hediye Mesajı ve Paketleme Seçenekleri

Ödeme sayfasına bir hediye mesajı alanı ve hediye paketleme seçeneği ekleyin. Uzantı:

• "Bu bir hediyedir" seçeneğini görüntüler
• Etkinleştirildiğinde hediye mesajı için bir metin alanı görüntülenir
• İsteğe bağlı olarak hediye paketi satışını gösterir (satır öğesi olarak sabit fiyat eklenir)
• Mesajı, paketleme iş akışınızda erişilebilen bir sipariş özelliği olarak kaydeder

Beklenen etki: Siparişlerin %2-5'inde hediye mesajı kullanılıyor; ek satış, artan gelir yaratır.

3. B2B Satınalma Sipariş Numarası Alanı

B2B alıcıları, tedarik sistemleri için bir PO numarasına ihtiyaç duyar. Bu alan olmadan B2B ödeme anlaşmazlığı önemlidir:

Uzantı, bir "Satın Alma Sipariş Numarası" metin giriş alanı ekler, bunu B2B müşterileri için gerekli olarak işaretler (müşteri etiketleri aracılığıyla algılanır) ve PO numarasını bir sipariş özelliği olarak kaydeder. PO numarası faturalarda ve sipariş yöneticisinde görünür.

Uygulamada dikkate alınması gerekenler: useCustomer kancasını kullanarak müşteri etiketlerini kontrol ederek B2B müşterilerini tespit edin.

4. Teslimat Tarihi Tercihi

Birden fazla teslimat hızı seçeneği sunan satıcılar için, tahmini teslimat tarihlerinin gönderim seçenekleriyle birlikte görüntülenmesi, karar belirsizliğini azaltır ve premium gönderim seçimini artırır:

Uzantı, her gönderim seçeneğinin altına bir teslimat tarihi hesaplaması eklemek için purchase.checkout.shipping-option-item.render-after'a bağlanır. Tarih hesaplamasında geçerli tarih + gönderim transit günleri (operatör API'nizden alınır veya gönderim bölgesine göre sabit kodlanır) kullanılır.

Beklenen etki: Doğru teslimat tarihleri ​​gösterildiğinde hızlandırılmış gönderim seçiminde %8-15 artış.

5. Ödeme Sırasında Ek Satış/Çapraz Satış

"Siparişi Tamamla" düğmesinden önce bir ürün satış bloğu - satın almadan önce AOV'yi artırmak için son fırsat:

Uzantı, sepet içeriğini okur, öneri motoru API'nizi çağırır ve tek tıklamayla sepete eklemeyle 1-2 ilgili eklenti ürünü görüntüler. Uzantı aracılığıyla eklenen öğeler, Shopify ödeme toplamını gerçek zamanlı olarak günceller.

Beklenen etki: Alıcıların %5-12'si, ödeme aşamasında ek satış bloğundan bir ürün ekliyor.

---

Satın Alma Sonrası Uzatmalar: En Yüksek Yatırım Getirisi Fırsatı

Satın alma sonrası uzantılar, müşteri ödeme işlemini tamamladıktan hemen sonra sipariş onay sayfasında görünür. Müşteri son derece olumlu bir durumda; istedikleri bir şeyi satın aldılar. Bu, üst satış teklifleri için en yüksek dönüşüm sağlayan yerleşimdir.

Tek Tıklamayla Satın Alma Sonrası Ek Satış

Satın alma sonrası uzantı, yeni bir ödeme akışı olmadan müşterinin önceden yetkilendirilmiş ödeme yönteminden ücret alan bir ürün eklentisi sunabilir:

1. Müşteri 1234 numaralı Siparişi tamamlar
2. Uzantı görünür: "Satın alma işleminizi tamamlayın - 19 ABD doları karşılığında [Ürün] ekleyin (tek tıklamayla, ödeme bilgilerinin yeniden girilmesi gerekmez)"
3. Müşteri kabul eder veya reddeder
4. Kabul edilirse: yeni bir ödeme ve yeni bir sipariş satır öğesi oluşturur
5. Müşteri son sipariş durumu sayfasına yönlendirilir

Beklenen etki: Doğru fiyat noktasında iyi yapılandırılmış satın alma sonrası tekliflerde %8-20 kabul oranı (100 ABD Doları'nın üzerindeki birincil sipariş için 10-30 ABD Doları teklif).

Teşekkür ederim Sayfası Özelleştirmeleri

Teşekkür sayfası uzantısı, ek satışların ötesinde şunları yapabilir:

• Bu siparişten kazanılan bağlılık puanlarını görüntüleyin
• Önceden doldurulmuş paylaşım bağlantısıyla tavsiye programı CTA'sını göster
• Sarf malzemelerini tek seferlik satın alanlar için abonelik yükseltmesi sunun
• Teşvikle sosyal medya takibi talep edin
• Kategoriyi ilk kez satın alanlar için ürün bakım talimatlarını görüntüleyin

---

Ödeme İşlevleri: Sunucu Tarafı Mantık Uzantıları

Ödeme İşlevleri, kullanıcı arayüzü uzantılarından daha güçlüdür; temel ödeme hesaplama mantığını değiştirirler. Derlenmiş WebAssembly olarak sunucu tarafında çalışırlar; bu, hızlı oldukları ve istemci tarafı manipülasyonuyla atlanamayacakları anlamına gelir.

İndirim İşlevleri

Shopify'ın yerel indirim motorunun desteklemediği karmaşık indirim mantığını uygulayın:

Gönderim İşlevleri

Shopify'ın kargo seçeneklerini hesaplama ve sunma şeklini değiştirin:

• Sepet içeriğine göre belirli gönderim yöntemlerini gizleyin (büyük boyutlu ürünler için standart gönderim yoktur)
• Lojistik sağlayıcınızdan özel nakliye ücretlerini enjekte edin
• Uzak teslimat adresleri için nakliye ek ücretleri uygulayın
• Sepet belirli bir eşiğe ulaştığında ücretsiz gönderim teklif edin (gerçek zamanlı olarak hesaplanır)

Ödeme Özelleştirme İşlevleri

Hangi ödeme yöntemlerinin görüneceğini kontrol edin:

• Uluslararası siparişler için "Teslimatta Ödeme" seçeneğini gizle
• 10.000$'ın üzerindeki siparişler için yalnızca banka havalesini göster
• Belirli ürün kategorileri için PayPal'ı gizleyin (uyumluluk nedenleri)
• Özel ödeme yöntemi açıklamalarını veya simgelerini görüntüleyin

---

Markalama API'si: Görsel Ödeme Özelleştirmesi

Ödeme Markalama API'si, ödeme mantığına dokunmadan kapsamlı görsel özelleştirmeye olanak tanır:

Neleri Özelleştirebilirsiniz

Shopify Yöneticisi → Ayarlar → Ödeme ve Müşteri Hesapları → Ödemeyi özelleştir veya birden fazla mağazada programatik yapılandırma için doğrudan Markalama API'si aracılığıyla yapılandırın.

---

checkout.liquid'den geçiş

Shopify Plus mağazanız checkout.liquid kullanıyorsa (Ağustos 2024'te kullanımdan kaldırıldı, zorunlu geçiş tamamlandı) özelleştirmeleri uzantı olarak yeniden oluşturmanız gerekir. Yaygın checkout.liquid özelleştirmeleri ve bunların uzantı eşdeğerleri:

Sınırlamalar ve checkout.liquid

Uzantılar, rastgele JavaScript enjeksiyonunu veya tam şablon manipülasyonunu kopyalayamaz. checkout.liquid dosyanız karmaşık koşullu mantık veya derinlemesine özelleştirilmiş kullanıcı arayüzü düzenleri içeriyorsa, bazı işlevlerin Ödeme İşlevleri ile yeniden oluşturulması gerekebilir veya uzantı çerçevesinde hiç kopyalanamayabilir.

---

Sıkça Sorulan Sorular

Ödeme Genişletilebilirliği özellikleri mobil ve masaüstü cihazlarda çalışır mı?

Evet. Kullanıcı Arayüzü Uzantıları, Shopify'ın doğası gereği duyarlı olan kullanıcı arayüzü bileşenlerini kullanarak oluşturulur. Shopify'ın ödeme özelliği, düzen duyarlılığını yönetir; uzantınız, ekran boyutuna otomatik olarak uyum sağlayan belirlenen yuvada oluşturulur. Mobil ve masaüstü düzenlerini ayrı ayrı yazmanıza gerek yok.

Uzantılar ödeme deneyimini yavaşlatabilir mi?

Kullanıcı arayüzü uzantıları, Shopify'ın altyapısı dahilinde sunucu tarafından oluşturulur; ilk oluşturma için istemci tarafında JavaScript yürütülmesini gerektirmezler. Ancak API çağrıları yapan uzantılar (bağlılık bakiyelerini, öneri verilerini vb. almak için) ağ gecikmesine neden olur. Yanıtları önbelleğe alarak ve uç noktalarınızı optimize ederek API çağrılarını 200 ms'nin altında tutun. Ödeme işlemini sürekli olarak yavaşlatan uzantılar Shopify tarafından tespit edilir ve devre dışı bırakılabilir.

Ödeme Uzantılarını yayınlanmadan önce nasıl test ederim?

Üretim ödemenizi etkilemeden uzantıları test etmek için Shopify'ın geliştirme mağazasını kullanın. Shopify CLI, uzantınızı gerçek Shopify ödeme ortamında önizleyen yerel bir geliştirme sunucusu sağlar. Uzantılar ayrıca üretim mağazanıza yalnızca bir önizleme URL'si aracılığıyla görülebilen "gizli" bir durumda da dağıtılabilir; bu, genel kullanıma sunulmadan önce paydaşların incelemesi için faydalıdır.

Ödeme Uzantıları oluşturmak için hangi teknik beceriler gereklidir?

UI Uzantıları React ve TypeScript bilgisi gerektirir. Ödeme İşlevleri Rust veya JavaScript gerektirir (Shopify tarafından sağlanan bir araç zinciri aracılığıyla WebAssembly'ye derlenir). React deneyimine sahip çoğu geliştirici, Shopify'ın belgelerini inceledikten sonra kullanıcı arayüzü uzantıları oluşturabilir. Ödeme İşlevleri teknik açıdan daha zorludur; arka uç deneyimine sahip kıdemli bir geliştirici, önemsiz olmayan işlevler için uygundur.

Ödeme Uzantıları Plus dışındaki Shopify planlarında mevcut mu?

Satın alma sonrası uzantılar ve teşekkür sayfası uzantıları tüm Shopify planlarında mevcuttur. Ödeme Kullanıcı Arayüzü Uzantıları (ödeme ortasında özelleştirme) yalnızca Plus'a özeldir. Ödeme İşlevleri yalnızca Plus'ta mevcuttur. Ödeme görseli özelleştirmesine yönelik Markalama API'si yalnızca Plus'a yöneliktir (ancak temel tema düzenleyici ödeme özelleştirmesi tüm planlarda mevcuttur).

---

Sonraki Adımlar

Ödeme Genişletilebilirliği, Shopify Plus özellik kümesindeki teknik açıdan en karmaşık özelliktir. Yatırım getirisi açıktır; sadakat kullanımı, B2B alanları, satın alma sonrası ek satışlar ve teslimat tarihi şeffaflığının tümü belgelenmiş dönüşüm etkisine sahiptir. Uygulama, React geliştirme becerisi ve Shopify'ın uzantı API'lerine aşinalık gerektirir.

ECOSIRE'ın Shopify Plus ekibi, DTC markalarından B2B distribütörlerine kadar çeşitli satıcılar için Ödeme Uzantıları oluşturur ve bakımını yapar. Geliştiricilerimiz, Ödeme Genişletilebilirliği, Ödeme İşlevleri ve Markalama API'sı konusunda özel deneyime sahip Shopify Plus Sertifikalı İş Ortaklarıdır.

Ödeme özelleştirme gereksinimlerinizi görüşmek için bize ulaşın — İhtiyaçlarınızı değerlendireceğiz ve ödeme performansından ödün vermeden dönüşümleri artıran bir uzantı mimarisi tasarlayacağız.