Zonos Dashboard hesabınızı kurmak ve Zonos Checkout'u özel sitenize veya platformunuza entegre etmek için bu kapsamlı kontrol listesini izleyin.
1
Zonos hesabı oluşturun
Başlamak için, bir hesap oluşturmak ve bir anlaşma imzalamak amacıyla lütfen satış ekibimizle iletişime geçin. Bir anlaşma imzalandıktan sonra, doğrulanması gereken hesabınıza iki mikro depozit alacaksınız.
Lütfen bu mikro depozit tutarlarını accounting@zonos.com adresine Dashboard mağaza kimliğiniz ile e-posta gönderin (satış temsilcinizi CC'ye alın).
Zonos hesabınızı oluşturduktan sonra, Checkout'un mağazanızla düzgün çalışmasını sağlamak için Dashboard'da ayarları yapılandırmanız gerekecektir. Bu bölüm tüm temel Dashboard yapılandırmalarını kapsamaktadır.
Checkout'tan zamanında ödeme almak için bir banka hesabı bağlayın. Ödemeler, yakalanan ödemeden itibaren 2 günlük bir gecikmeyle günlük olarak işlenir. Bunu yapmak için lütfen şu adımları izleyin:
Zonos JS betiği, güvenlik amacıyla izin verilen etki alanlarının bir listesini gerektirir. Bu, yetkisiz sitelerin betiği yüklemesini önler ve yalnızca onaylı etki alanlarınızda çalıştığından emin olur. Bu yapılandırma olmadan, betik izin hataları döndürecektir.
URLs bölümünde Checkout'un kullanılacağı tam etki alanınız ve alt etki alanlarınızı ekleyin. Örneğin, etki alanınız example.com ise, example.com ve test.example.com eklemelisiniz.
Checkout'ta kargo fiyatı sağlamak için, Zonos hesabınıza bir kargo taşıyıcısı bağlamanız gerekecektir. Bu, checkout'ta belirli kargo hizmet seviyelerini etkinleştirmenizi sağlayacaktır.
Bir kargo taşıyıcısını bağlamak için, lütfen şu adımları izleyin:
Kargo bölgeleri, dünyanın farklı bölgeleri için hangi kargo taşıyıcılarının ve hizmet seviyelerinin kullanılabilir olduğunu yapılandırmanıza izin verir.
Kargo bölgelerini ayarlamak için, lütfen şu adımları izleyin:
Menşe ülkesi için, ürünlerinizin çoğunluğunun üretildiği ülkeyi seçin.
HS kodu için, en yaygın ürününüzün HS kodunu girin. HS kodunuz yoksa, Dashboard'da Classify sayfasına gidin ve ürünün adını ve açıklamasını girerek doğru bir HS kodu oluşturun.
3
Zonos JS snippet'ini yükleyin
Zonos JS snippet'i, sitenizde küresel checkout işlevselliğini etkinleştiren istemci tarafı JavaScript entegrasyonudur. E-ticaret platformunuz ve Zonos hizmetleri arasında köprü görevi görür ve şunları işler:
Checkout Deneyimi: Checkout kullanıcı arayüzünü oluşturur ve ödemeleri işler.
Konum Hizmetleri: Ziyaretçi konumunu algılar ve para birimi dönüşümünü yönetir.
Sepet Entegrasyonu: Mevcut sepet ve sipariş sisteminiz ile bağlanır.
Güvenlik: Etki alanlarını doğrular ve API isteklerinin kimliğini doğrular.
Snippet, sitenizin performansı üzerinde hiçbir olumsuz etki olmaksızın asenkron olarak yüklenir. Mağazanızın API kimlik bilgileriyle başlatılır ve tüm istemci tarafı etkileşimlerini güvenli bir şekilde işler. Uygulama, müdahaleci olmayacak şekilde tasarlanmıştır ve mevcut checkout akışında minimum değişiklik gerektirir.
Aşağıda, Checkout'u entegre ederken referans alabilmek için betik yükleme, başlatma ve olay işlemeyi içeren kapsamlı bir örnek verilmiştir.
Betiğin tarayıcı tarafından önbelleğe alınmaması için URL'ye bir zaman damgası veya başka bir benzersiz tanımlayıcı eklemenizi öneririz. Bu, her zaman betiğin en son sürümünün yüklendiğinden emin olacaktır. Bu, tam örneğin 10. satırında gösterilmiştir.
Zonos JS betiğini yükledikten sonra, ortak bir Zonos API anahtarı ve mağaza kimliğini Zonos.init işlevine geçirerek kimliğini doğrulamanız gerekir. Checkout'un kimliğini doğrulamak için kullanılan ortak API anahtarı yayınlanabilir olacak şekilde tasarlanmıştır, yani ön uç kodunda hassas bilgileri ortaya çıkarmadan güvenli bir şekilde kullanılabilir.
Mağaza kimliğinizi ve API anahtarınızı bulmak için Dashboard -> Settings -> Integrations sayfasına gidin. Ön uç kodunda kullanmak için tasarlanmadığı için Secret API key kullanmadığınızdan emin olun. Bu, tam örneğin 29. ve 30. satırlarında gösterilmiştir.
1Zonos.init({
2// ... other fields
3zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)
4storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)
Siteniz bir Content Security Policy ayarlarsa, aşağıdaki etki alanlarını ilgili CSP yönergelerine ekleyin. Bu politika, Checkout ve Hello için de geçerlidir — Zonos snippet'i betikleri, stil sayfalarını, yazı tiplerini, görüntüleri yükler ve ağ istekleri yapar, bu nedenle bu kaynaklardan herhangi birini engelleme Checkout akışını veya Hello ekranını bozacaktır. style-src listesi, style-src-elem için de geçerlidir.
Not: Siteniz bir CSP başlığı göndermiyorsa bu adımı atlayın. Yalnızca sayfalarında özel bir CSP uygulayan satıcıların bunu güncellemesi gerekir.
1cdn.jsdelivr.net/npm/@zonos
2cdnjs.cloudflare.com/ajax/libs/zonos-elements
3unpkg.com/@zonos/elements
4js.zonos.com
5*.js.zonos.com
6assets.zonos.com
7zonos-store-assets.s3.amazonaws.com
8js.stripe.com
9a.stripecdn.com
10b.stripecdn.com
11c.stripecdn.com
12checkout.stripe.com
13f.stripecdn.com
14hcaptcha.com
15hooks.stripe.com
16m.stripe.com
17m.stripe.network
18pay.stripe.com
19payments.stripe.com
20q.stripe.com
21r.stripe.com
4
Hello'yu ayarlayın
Hello, Checkout kullanırken gereklidir.
Hello, ziyaretçinin konumunu, dilini ve para birimini algılamaktan ve uygun bilgileri göstermekten sorumludur. Tüm Hello ayarlarını Dashboard'da veya Zonos JS betiğinde yapılandırabilirsiniz. Hello'yu Dashboard'da zaten yapılandırdıysanız, betik bu ayarları yükleyecek ve kullanacaktır. Zonos.init işlevinin helloSettings özelliğinde herhangi bir değer belirtirseniz, betik bunun yerine aşağıda gösterilen değerleri kullanacaktır.
Hello, sitenizde para birimi bilgisini görüntüleyen öğeleri tanımlamak için CSS seçicileri kullanır. Hello'nun uluslararası alıcının doğru para birimini algılayabilmesi ve gösterebilmesi için bu seçicileri Zonos.init işlevinin helloSettings.currencyElementSelector özelliğine geçirin.
Burada herhangi bir geçerli CSS seçicisi kullanabilirsiniz, örneğin birden fazla farklı öğeyi seçmek için #price, .price. Bu, tam örneğin 23. ve 24. satırlarında gösterilmiştir.
1Zonos.init({
2// ... other fields
3helloSettings: {
4currencyElementSelector: '.price', // Replace with your actual selector
Varsayılan olarak, Hello yalnızca ziyaretçi bayrak düğmesine tıkladığında açılacaktır. Sayfa yüklendiğinde Hello'yu otomatik olarak açmak istiyorsanız, Zonos betiği yüklendikten sonra Zonos.openHelloDialog() işlevini çağırabilirsiniz. Bu, tam örneğin 25. ve 26. satırlarında gösterilmiştir.
Hello'yu hangi alıcı ülkelerine gösterileceğini ve ülke seçici açılır menüsünde hangi ülkelerin görüneceğini Dashboard'dan kontrol edin. Dashboard -> Settings -> Hello sayfasına gidin ve Country display rules bölümünü bulun.
Hello widget'ının hangi alıcı ülkelerine gösterilecek olduğunu kontrol edin. Temel kurallardan birini seçin, ardından belirli ülkeleri geçersiz kılmak için Always show ve Never show listelerini kullanın.
All countries - Hello'nun desteklediği her ülke.
Only shippable countries - Kargo ayarlarınızdan sevk ettiğiniz ülkeler.
Always show - Temel kural onları hariç tutsa bile her zaman görünen ülkeler.
Never show - Temel kural onları içerse bile hiçbir zaman görünmeyen ülkeler.
Hello ülke seçici açılır menüsünde hangi ülkelerin görüneceğini, aynı temel kuralları artı Always show ve Never show geçersiz kılmalarını kontrol edin.
Kullanımdan kaldırılan JS seçenekleri
helloSettings üzerindeki showForCountries ve showCountryList özellikleri kullanım dışı bırakılmıştır. Dashboard sayfasında ülke görüntüleme kurallarını yapılandırın — oraya ayarlanan değerler Zonos JS betiği tarafından otomatik olarak yüklenecektir.
5
Checkout'u ayarlayın
Checkout, müşterinin kargo ve fatura bilgilerini girmesine, landed cost hesaplamasına, ödeme toplamasına ve siparişi tamamlamasına izin vermekten sorumludur.
Checkout, Hello ile bağlamsal veriler paylaşacaktır; örneğin ziyaretçinin konumu, dili ve para birimi. Bu, müşterinin tüm alışveriş süreci boyunca deneyimin tutarlı olmasını sağlar.
Checkout ayarlarının tümünü hem Dashboard'da hem de Zonos JS betiğinde yapılandırabilirsiniz. Checkout'u Dashboard'da zaten yapılandırdıysanız, betik bu ayarları yükleyecek ve kullanacaktır. Zonos.init işlevinin checkoutSettings özelliğinde herhangi bir değer belirtirseniz, betik bunun yerine bu değerleri kullanacaktır.
Zonos JS betiği, uluslararası alıcıları otomatik olarak tanıyacak ve Checkout akışına yönlendirecektir. Ancak, tıklandığında Checkout'u açmak için platformunuzdaki 'place order' düğmesini yapılandırmanız gerekecektir. Bu, Zonos.init işlevinin checkoutSettings.placeOrderButtonSelector özelliğine bir CSS seçicisi geçirerek yapılabilir.
Sipariş vermek için kullanılabilen birden fazla düğmeniz varsa, her düğme için bir seçici geçtiğinizden emin olun. Örneğin, #placeOrder, .place-order.
Bu, tam örneğin 21. satırında gösterilmiştir.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
Sepet detaylarını müşteriye göstermek için, Zonos API'sini çağıracak ve ardından bu sepet kimliğini ön yüzünüze geri geçirecek sunucu tarafı bir işlev oluşturmanız gerekecektir. Bu, sepet detaylarının müşteri tarafından manipüle edilebilecek bir şekilde açığa çıkarılmadığından emin olacaktır.
Arka uç API çağrınız, Zonos JS betiğinin kimliğini doğrulamak için kullandığınız ortak belirteçten farklı olan bir gizli GraphQL kimlik bilgisi belirteci kullanacaktır. Bu belirteç, Dashboard -> Settings -> Integrations sayfasından alınabilir. Gizli belirteç, API çağrınızda başlık olarak geçilmesi gerekecektir.
cartCreate mutasyonu, sepet öğesi şemasına göre biçimlendirilmesi gereken bir öğe listesini kabul eder.
1// Create new cart from serverside
2asyncfunctioncreateCart() {
3/**
4 * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate
5 * */
6const graphql = JSON.stringify({
7query: `
8mutation cartCreate($input: CartCreateInput!){
9 cartCreate(input: $input) {
10 id
11 adjustments {
12 amount
13 currencyCode
14 description
15 productId
16 sku
17 type
18 }
19 items {
20 id
21 name
22 amount
23 currencyCode
24 quantity
25 sku
26 description
27 metadata {
28 key
29 value
30 }
31 }
32 metadata {
33 key
34 value
35 }
36 }
37}`,
38variables: {
39/**
40 * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput
Sunucu tarafınızda bir API uç noktası oluşturmanızı ve ardından bu uç noktayı ön uç JS entegrasyonunuzdan çağırmanızı öneririz, bu, bir sonraki adımda ayrıntılı olarak açıklanmıştır.
Sunucu tarafınızda bir sepet oluşturduktan sonra, sepet kimliğini Zonos JS betiğine geçirmeniz gerekecektir. Bu, Zonos.init işlevinin bir parçası olan createCartId geri çağırması kullanılarak yapılabilir. Checkout, daha sonra, sepet detaylarını Zonos'tan güvenli bir şekilde alacak, sepet'le herhangi bir oynanmayı önleyecektir. Aşağıdaki kod örneğine bakın.
createCartId değeri statik bir değer olamaz, bir işlev olmalıdır.
Sipariş toplamının altında Checkout'un içine kısa, dinamik bir mesaj göstermeniz gerekiyorsa - örneğin, belirli bir ürün sepete varsa düzenleyici bir açıklama - createCartId geri çağırmasından bir customMessage dizisi döndürebilirsiniz. Dizideki her giriş, doğrudan Order total altında tek bir info banner'ın kendi satırında oluşturulur.
Markdown bağlantı sözdizimi - [link label] ardından (https://example.com) - bir anchor etiketi olarak oluşturulur, böylece alıcılar tıklayabilir. Metindeki düz https:// URL'leri de otomatik olarak bağlanır. Diğer her şey düz metin olarak oluşturulur, bu nedenle dizelerdeki HTML yürütülmek yerine kaçış karakterleriyle işlenir.
Kaç satır geçirirseniz geçirin, Checkout başına sadece bir banner gösterilir.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4createCartId: async () => {
5const response = awaitfetch(
6'https://api.merchant.com/api/get-zonos-cart',
7 {
8method: 'POST',
9headers: {
10'Content-Type': 'application/json',
11 },
12 },
13 );
14const json = await response.json();
15
16return {
17cartId: json.id,
18// Each item is rendered on a new line of the same info banner.
19// Markdown links `[text](url)` become `<a>` tags.
20customMessage: [
21'Some items in your cart are subject to California regulations.',
22'Please review the required notice [here](https://oag.ca.gov/prop65).',
23 ],
24 };
25 },
26 },
27});
Not: İleti metni düz metin olarak oluşturulur — dizelerdeki HTML etiketleri kaçış karakterleriyle işlenir, bu nedenle yalnızca Markdown bağlantı sözdizimi yorumlanır. Banner'ın yalnızca ilgili olduğunda görünmesi için sepet içeriğine bağlı olarak sunucu tarafında customMessage'i ekleyip eklememeye karar verin.
Özel mantığınız varsa ve Zonos checkout'u programlı olarak tetiklemeniz gerekiyorsa, Zonos başlatıldıktan sonra Zonos checkout penceresini açmak için Zonos.triggerCheckoutInternational() işlevini kullanabilirsiniz. Bu, yukarıdaki Zonos.init içinde tanımlanan createCartId geri çağırmasını çağıracak ve Zonos checkout penceresini açacaktır.
1// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")
2const domesticCountry = 'US';
3document.querySelector('.country-select').addEventListener('change', e => {
İç ve uluslararası alıcılar için checkout işlemini ayırmak istiyorsanız, sitenize bir International checkout düğmesi ekleyebilirsiniz. Zonos.triggerCheckoutInternational ile Zonos Checkout'u manuel olarak tetiklemek yerine, Zonos.init'i uygun seçici ile yapılandırabilirsiniz. Seçici, Zonos başlatılana kadar devre dışı bırakılacak, düğmeye tıklandığında Zonos checkout'u otomatik olarak tetikleyecektir. Bu, Zonos.init içinde tanımlanan createCartId geri çağırmasını çağıracak ve Zonos checkout penceresini açacaktır.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout
Zonos Checkout, tüm checkout hunisini mevcut analiz araçlarınıza iletebilir. Her adım için Zonos şunları gönderir:
Orijinal zonos-checkout-... etkinliğini GA4'e (gtag('event', ...) aracılığıyla) ve özel bir etkinlik olarak Meta'ya (fbq('trackCustom', ...) aracılığıyla).
Varsa, Meta'ya eşleşen standart etkinliği — InitiateCheckout, AddPaymentInfo ve Purchase — böylece Meta'nın yerleşik optimizasyonu ve dönüşüm raporlaması kutudan çıktığı gibi çalışır.
Olayların sağlayıcılarınıza nasıl ulaştığı, Checkout'un sitenizde nasıl oluşturulduğuna bağlıdır. Entegrasyonunuzla eşleşen yolu seçin.
<zonos-checkout> özel öğesi kendi sayfanıza monte edildiğinde (yukarıda açıklanan Zonos JS betik entegrasyonu için varsayılan), sayfanızın kendi window.gtag ve window.fbq işlevleri zaten kapsam içindedir. Zonos bunları doğrudan çağırır — hiçbir röle veya piksel kimliği el değiştirmesi gerekli değildir.
Kurulum:
Sayfanızda GA4 temel etiketi ve/veya Meta Pixel temel kodu zaten yüklü olduğundan emin olun (sitenizde başka herhangi bir sayfayı izleyeceğiniz şekilde).
Zonos Dashboard'da Checkout settings → Tracking altında istediğiniz sağlayıcıları etkinleştirin (Google Analytics, Facebook Pixel veya her ikisi).
Bu kadar. Hiçbir röle betiği yok, hiçbir customHTML yok, hiçbir ekstra kimlik geçilmesi yok — Zonos sayfadaki gtag / fbq algılar ve olayları doğrudan tetikler.
Checkout farklı bir kaynakta bir iframe'de barındırıldığında, sayfanızdaki gtag / fbq işlevlerine doğrudan erişemez. Zonos, Checkout iframe'inden gelen postMessage olaylarını dinleyen ve bunları sayfanızda bulunan sağlayıcılara ileten küçük bir röle betiği olan analyticsRelayOnInit.js'i yayınlar. Tek bir röle hem GA4 hem de Facebook Pixel'i aynı anda işler.
Kurulum:
Zonos Dashboard'da Checkout settings → Tracking altında istediğiniz sağlayıcıları etkinleştirin.
GA4 temel etiketini ve/veya Meta Pixel temel kodunu, Checkout iframe'ini barındıran sayfanın <head> bölümüne ekleyin.
Sağlayıcı etiketlerinden sonra röle betiğini ekleyin:
Checkout siparişlerini yerel platformunuza göndermek için gereklidir. Docs →
ORDER_STATUS_CHANGED
Sipariş durumları değiştiğinde (ör., yerine getirildi, iptal edildi) sisteminizi Zonos ile senkronize tutar. Docs →
7
Entegrasyonunuzu test edin
Checkout entegrasyonunuz ile canlı olmadan önce, sorunsuz bir müşteri deneyimi sağlamak için entegrasyonun tüm yönlerini iyice test etmek önemlidir. Buna checkout akışı, ödeme işleme, sipariş oluşturma ve webhook işlevselliğinin test edilmesi dahildir.
Test rehberimizi izleyin entegrasyonunuzun düzgün çalıştığını doğrulamak ve üretim ortamında başlatmadan önce sorunları belirlemek ve gidermek için.
Sık sorulan sorular
Entegrasyon süreci hakkında sık sorulan sorular aşağıdadır.
Dashboard -> Settings -> Checkout settings sayfasında Success page type altında satın alma sonrası deneyimini yapılandırın. Üç seçenek kullanılabilir:
Show Zonos success page (varsayılan, önerilen) — Zonos, sipariş verilmesinin ardından yerleşik bir teşekkür sayfası görüntüler. Sayfa her zaman gösterilir, hatta sipariş sisteminize aktarılamasa bile, bu nedenle alıcı her zaman bir onay alır.
Redirect to a success page — Zonos, kısa bir "Order complete" ekranında bekler, ardından yapılandırılan başarı URL'nize zOrderNumber (ve eski sepetler için orderId) sorgu parametreleri eklenerek yönlendirir.
Close the checkout modal — Zonos, ödeme yakalandıktan sonra modal'ını kapatır. Ayrıca bir başarı URL'si yapılandırırsanız, Zonos, siparişin oluşturulması için beklemeden — Stripe ödemeyi topladıktan sonra hemen başarı URL'nize yönlendirir ve zonosCheckoutSessionId'yi sorgu parametresi olarak ekler. Bu seçeneği, kendi başarı sayfanıza en hızlı geçişi istediğinizde kullanın.
Close the checkout modal seçeneğini yönlendirme URL'si ile kullandığınızda, yeniden yönlendirmeden sonra siparişin checkout oturumuna eklenmesi birkaç saniye sürebilir. URL'den zonosCheckoutSessionId okuyun ve gizli kimlik bilgisi belirteci kullanarak sunucunuzdan checkoutSession GraphQL sorgusunu siparişin hazır olması için yoklayın. Bunu tarayıcıdan asla çağırmayın — gizli kimlik bilgisi belirteci sunucu tarafında kalmalıdır.
1query getCheckoutSession($id: String!){
2 checkoutSession(id:)
3 order
4 id
Sorguyu, Dashboard -> Settings -> Integrations sayfasından aldığınız gizli kimlik bilgisi belirtecinizi credentialToken istek başlığı olarak geçirerek https://api.zonos.com/graphql adresine gönderin.
Evet. Bir sipariş oluşturulduğunda bildirim almak istiyorsanız, Dashboard'da Checkout settings sayfasının Email bölümünde, bir siparişin oluşturulduğu, gönderildiği veya iptal edildiği zaman bildirilmesi gereken ekip üyelerinin e-posta adresini girebilirsiniz.
Özel entegrasyon
Özel entegrasyon
Zonos Checkout'u özel sitenize entegre etmek için uçtan uca bir entegrasyon oluşturun.
Entegrasyon kontrol listesi
Zonos Dashboard hesabınızı kurmak ve Zonos Checkout'u özel sitenize veya platformunuza entegre etmek için bu kapsamlı kontrol listesini izleyin.
Zonos hesabı oluşturun
Başlamak için, bir hesap oluşturmak ve bir anlaşma imzalamak amacıyla lütfen satış ekibimizle iletişime geçin. Bir anlaşma imzalandıktan sonra, doğrulanması gereken hesabınıza iki mikro depozit alacaksınız.
Lütfen bu mikro depozit tutarlarını accounting@zonos.com adresine Dashboard mağaza kimliğiniz ile e-posta gönderin (satış temsilcinizi CC'ye alın).
Doğrulanma tamamlandıktan sonra, banka bilgileriniz Dashboard -> Settings -> Billing sayfasında görüntülenecektir.
Dashboard ve Checkout ayarlarını yapılandırın
Zonos hesabınızı oluşturduktan sonra, Checkout'un mağazanızla düzgün çalışmasını sağlamak için Dashboard'da ayarları yapılandırmanız gerekecektir. Bu bölüm tüm temel Dashboard yapılandırmalarını kapsamaktadır.
Ödemeleri ayarlayın
Checkout'tan zamanında ödeme almak için bir banka hesabı bağlayın. Ödemeler, yakalanan ödemeden itibaren 2 günlük bir gecikmeyle günlük olarak işlenir. Bunu yapmak için lütfen şu adımları izleyin:
İzin verilen etki alanlarını ayarlayın
Zonos JS betiği, güvenlik amacıyla izin verilen etki alanlarının bir listesini gerektirir. Bu, yetkisiz sitelerin betiği yüklemesini önler ve yalnızca onaylı etki alanlarınızda çalıştığından emin olur. Bu yapılandırma olmadan, betik izin hataları döndürecektir.
Bunu kurmak için:
example.comise,example.comvetest.example.comeklemelisiniz.Markalaşma ayarlarını özelleştirin
Dashboard'da markalaşma ayarlarınızı mağazanızın görünüş ve hissiyatıyla eşleşecek şekilde yapılandırın.
Bunu yapmak için lütfen şu adımları izleyin:
Markalaşma ayarları hakkında daha fazla bilgi için belgelerimize bakın.
Bir kargo taşıyıcısını bağlayın
Checkout'ta kargo fiyatı sağlamak için, Zonos hesabınıza bir kargo taşıyıcısı bağlamanız gerekecektir. Bu, checkout'ta belirli kargo hizmet seviyelerini etkinleştirmenizi sağlayacaktır.
Bir kargo taşıyıcısını bağlamak için, lütfen şu adımları izleyin:
Taşıyıcı hesaplarını bağlama hakkında daha fazla ayrıntı için belgelerimize bakın.
Kargo bölgelerini ayarlayın
Kargo bölgeleri, dünyanın farklı bölgeleri için hangi kargo taşıyıcılarının ve hizmet seviyelerinin kullanılabilir olduğunu yapılandırmanıza izin verir.
Kargo bölgelerini ayarlamak için, lütfen şu adımları izleyin:
Kargo bölgeleri hakkında daha fazla ayrıntı için belgelerimize bakın.
Yedek menşe ülkesini ve HS kodunu ayarlayın
Menşe ülkesi ve HS kodu, doğru gümrük ve vergileri hesaplamak için kullanılır.
Belirli bir menşe ülkesi veya HS kodu sağlamazsanız, Dashboard'da ayarlanan yedekleri kullanacağız.
Yedek Menşe Ülkesi ve HS kodunu ayarlamak için:
Zonos JS snippet'ini yükleyin
Zonos JS snippet'i, sitenizde küresel checkout işlevselliğini etkinleştiren istemci tarafı JavaScript entegrasyonudur. E-ticaret platformunuz ve Zonos hizmetleri arasında köprü görevi görür ve şunları işler:
Snippet, sitenizin performansı üzerinde hiçbir olumsuz etki olmaksızın asenkron olarak yüklenir. Mağazanızın API kimlik bilgileriyle başlatılır ve tüm istemci tarafı etkileşimlerini güvenli bir şekilde işler. Uygulama, müdahaleci olmayacak şekilde tasarlanmıştır ve mevcut checkout akışında minimum değişiklik gerektirir.
Aşağıda, Checkout'u entegre ederken referans alabilmek için betik yükleme, başlatma ve olay işlemeyi içeren kapsamlı bir örnek verilmiştir.
(async function () {const timestamp = new Date().getTime();const zonosScript = document.querySelector(`script[src*="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js"]`,);if (!zonosScript) {const script = document.createElement('script');script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;script.addEventListener('load', () => {window.Zonos.({: {: () => {{: ,};},: ,},: {: ,: {.();},},: ,: ,});});..(script);}})();Tarayıcı önbelleğini işleme
Betiğin tarayıcı tarafından önbelleğe alınmaması için URL'ye bir zaman damgası veya başka bir benzersiz tanımlayıcı eklemenizi öneririz. Bu, her zaman betiğin en son sürümünün yüklendiğinden emin olacaktır. Bu, tam örneğin 10. satırında gösterilmiştir.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Zonos JS snippet'ini kimlik doğrulaması yapın
Zonos JS betiğini yükledikten sonra, ortak bir Zonos API anahtarı ve mağaza kimliğini
Zonos.initişlevine geçirerek kimliğini doğrulamanız gerekir. Checkout'un kimliğini doğrulamak için kullanılan ortak API anahtarı yayınlanabilir olacak şekilde tasarlanmıştır, yani ön uç kodunda hassas bilgileri ortaya çıkarmadan güvenli bir şekilde kullanılabilir.Mağaza kimliğinizi ve API anahtarınızı bulmak için Dashboard -> Settings -> Integrations sayfasına gidin. Ön uç kodunda kullanmak için tasarlanmadığı için Secret API key kullanmadığınızdan emin olun. Bu, tam örneğin 29. ve 30. satırlarında gösterilmiştir.
Zonos.init({// ... other fieldszonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)// ... other fields});İçerik Güvenlik Politikanızı (CSP) Güncelleyin
Siteniz bir Content Security Policy ayarlarsa, aşağıdaki etki alanlarını ilgili CSP yönergelerine ekleyin. Bu politika, Checkout ve Hello için de geçerlidir — Zonos snippet'i betikleri, stil sayfalarını, yazı tiplerini, görüntüleri yükler ve ağ istekleri yapar, bu nedenle bu kaynaklardan herhangi birini engelleme Checkout akışını veya Hello ekranını bozacaktır.
style-srclistesi,style-src-elemiçin de geçerlidir.cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comassets.zonos.comzonos-store-assets.s3.amazonaws.comjs.stripe.coma.stripecdn.comb.stripecdn.comc.stripecdn.comcheckout.stripe.comf.stripecdn.comhcaptcha.comhooks.stripe.comm.stripe.comm.stripe.networkpay.stripe.compayments.stripe.comq.stripe.comr.stripe.comHello'yu ayarlayın
Hello, Checkout kullanırken gereklidir.
Hello, ziyaretçinin konumunu, dilini ve para birimini algılamaktan ve uygun bilgileri göstermekten sorumludur. Tüm Hello ayarlarını Dashboard'da veya Zonos JS betiğinde yapılandırabilirsiniz. Hello'yu Dashboard'da zaten yapılandırdıysanız, betik bu ayarları yükleyecek ve kullanacaktır.
Zonos.initişlevininhelloSettingsözelliğinde herhangi bir değer belirtirseniz, betik bunun yerine aşağıda gösterilen değerleri kullanacaktır.Hello'da para birimi dönüşümünü JS Script'te yapılandırın
Hello, sitenizde para birimi bilgisini görüntüleyen öğeleri tanımlamak için CSS seçicileri kullanır. Hello'nun uluslararası alıcının doğru para birimini algılayabilmesi ve gösterebilmesi için bu seçicileri
Zonos.initişlevininhelloSettings.currencyElementSelectorözelliğine geçirin.Burada herhangi bir geçerli CSS seçicisi kullanabilirsiniz, örneğin birden fazla farklı öğeyi seçmek için
#price, .price. Bu, tam örneğin 23. ve 24. satırlarında gösterilmiştir.Zonos.init({// ... other fieldshelloSettings: {currencyElementSelector: '.price', // Replace with your actual selector},// ... other fields});Sayfa yüklendiğinde Hello'yu otomatik olarak açın
Varsayılan olarak, Hello yalnızca ziyaretçi bayrak düğmesine tıkladığında açılacaktır. Sayfa yüklendiğinde Hello'yu otomatik olarak açmak istiyorsanız, Zonos betiği yüklendikten sonra
Zonos.openHelloDialog()işlevini çağırabilirsiniz. Bu, tam örneğin 25. ve 26. satırlarında gösterilmiştir.Zonos.init({// ... other fields: {: {.();},},});Dashboard'da ülke görüntüleme kurallarını yapılandırın
Hello'yu hangi alıcı ülkelerine gösterileceğini ve ülke seçici açılır menüsünde hangi ülkelerin görüneceğini Dashboard'dan kontrol edin. Dashboard -> Settings -> Hello sayfasına gidin ve Country display rules bölümünü bulun.
Widget görünürlüğü
Hello widget'ının hangi alıcı ülkelerine gösterilecek olduğunu kontrol edin. Temel kurallardan birini seçin, ardından belirli ülkeleri geçersiz kılmak için Always show ve Never show listelerini kullanın.
Ülke seçici
Hello ülke seçici açılır menüsünde hangi ülkelerin görüneceğini, aynı temel kuralları artı Always show ve Never show geçersiz kılmalarını kontrol edin.
helloSettingsüzerindekishowForCountriesveshowCountryListözellikleri kullanım dışı bırakılmıştır. Dashboard sayfasında ülke görüntüleme kurallarını yapılandırın — oraya ayarlanan değerler Zonos JS betiği tarafından otomatik olarak yüklenecektir.Checkout'u ayarlayın
Checkout, müşterinin kargo ve fatura bilgilerini girmesine, landed cost hesaplamasına, ödeme toplamasına ve siparişi tamamlamasına izin vermekten sorumludur.
Checkout, Hello ile bağlamsal veriler paylaşacaktır; örneğin ziyaretçinin konumu, dili ve para birimi. Bu, müşterinin tüm alışveriş süreci boyunca deneyimin tutarlı olmasını sağlar.
Checkout ayarlarının tümünü hem Dashboard'da hem de Zonos JS betiğinde yapılandırabilirsiniz. Checkout'u Dashboard'da zaten yapılandırdıysanız, betik bu ayarları yükleyecek ve kullanacaktır.
Zonos.initişlevinincheckoutSettingsözelliğinde herhangi bir değer belirtirseniz, betik bunun yerine bu değerleri kullanacaktır.'Place order' düğmesini JS Script'te yapılandırın
Zonos JS betiği, uluslararası alıcıları otomatik olarak tanıyacak ve Checkout akışına yönlendirecektir. Ancak, tıklandığında Checkout'u açmak için platformunuzdaki 'place order' düğmesini yapılandırmanız gerekecektir. Bu,
Zonos.initişlevinincheckoutSettings.placeOrderButtonSelectorözelliğine bir CSS seçicisi geçirerek yapılabilir.Sipariş vermek için kullanılabilen birden fazla düğmeniz varsa, her düğme için bir seçici geçtiğinizden emin olun. Örneğin,
#placeOrder, .place-order.Bu, tam örneğin 21. satırında gösterilmiştir.
Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)},});Sepet detaylarını sunucu tarafında güvenli bir şekilde oluşturun
Sepet detaylarını müşteriye göstermek için, Zonos API'sini çağıracak ve ardından bu sepet kimliğini ön yüzünüze geri geçirecek sunucu tarafı bir işlev oluşturmanız gerekecektir. Bu, sepet detaylarının müşteri tarafından manipüle edilebilecek bir şekilde açığa çıkarılmadığından emin olacaktır.
Arka uç API çağrınız, Zonos JS betiğinin kimliğini doğrulamak için kullandığınız ortak belirteçten farklı olan bir gizli GraphQL kimlik bilgisi belirteci kullanacaktır. Bu belirteç, Dashboard -> Settings -> Integrations sayfasından alınabilir. Gizli belirteç, API çağrınızda başlık olarak geçilmesi gerekecektir.
cartCreatemutasyonu, sepet öğesi şemasına göre biçimlendirilmesi gereken bir öğe listesini kabul eder.// Create new cart from serversideasync function createCart() {/*** Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate* */const graphql = JSON.stringify({query: `mutation cartCreate($input: CartCreateInput!){cartCreate(input: $input) {idadjustments {amountcurrencyCodedescriptionproductIdskutype}items {idnameamountcurrencyCodequantityskudescriptionmetadata {keyvalue}}metadata {keyvalue}}}`,variables: {/*** input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput*/input: {/*** Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput*/adjustments: [{amount: -10,currencyCode: 'USD',/*** Enum value: https://zonos.com/developer/types/CartAdjustmentType*/type: 'CART_TOTAL',},],/*** Cart item input: https://zonos.com/developer/types/ItemInput*/items: [{name: 'Item 1',amount: 150.99,currencyCode: 'USD',description: 'Item 1 description',quantity: 2,},],/*** Cart metadata input: https://zonos.com/developer/types/CartMetadataInput*/metadata: [{: ,: ,},],},},});response = (, {: ,: {: ,: ,},: graphql,});{ data } = response.();data..;}Sunucu tarafınızda bir API uç noktası oluşturmanızı ve ardından bu uç noktayı ön uç JS entegrasyonunuzdan çağırmanızı öneririz, bu, bir sonraki adımda ayrıntılı olarak açıklanmıştır.
Sepet kimliğini Checkout'a ön uç üzerinden geçirin
Sunucu tarafınızda bir sepet oluşturduktan sonra, sepet kimliğini Zonos JS betiğine geçirmeniz gerekecektir. Bu,
Zonos.initişlevinin bir parçası olancreateCartIdgeri çağırması kullanılarak yapılabilir. Checkout, daha sonra, sepet detaylarını Zonos'tan güvenli bir şekilde alacak, sepet'le herhangi bir oynanmayı önleyecektir. Aşağıdaki kod örneğine bakın.createCartIddeğeri statik bir değer olamaz, bir işlev olmalıdır.Zonos.init({// ... other fieldscheckoutSettings: {// Replace with your actual selector(s)createCartId: async () => {const response = await fetch('https://api.merchant.com/api/get-cart', {method: 'POST',headers: {'Content-Type': 'application/json',},});const json = await response.json();return json.id; // Only need to return the cart ID},},});(İsteğe bağlı) Sipariş toplamının altında bir not görüntüleyin
Sipariş toplamının altında Checkout'un içine kısa, dinamik bir mesaj göstermeniz gerekiyorsa - örneğin, belirli bir ürün sepete varsa düzenleyici bir açıklama -
createCartIdgeri çağırmasından bircustomMessagedizisi döndürebilirsiniz. Dizideki her giriş, doğrudan Order total altında tek bir info banner'ın kendi satırında oluşturulur.Markdown bağlantı sözdizimi -
[link label]ardından(https://example.com)- bir anchor etiketi olarak oluşturulur, böylece alıcılar tıklayabilir. Metindeki düzhttps://URL'leri de otomatik olarak bağlanır. Diğer her şey düz metin olarak oluşturulur, bu nedenle dizelerdeki HTML yürütülmek yerine kaçış karakterleriyle işlenir.Kaç satır geçirirseniz geçirin, Checkout başına sadece bir banner gösterilir.
Zonos.init({// ... other fieldscheckoutSettings: {createCartId: async () => {const response = await fetch('https://api.merchant.com/api/get-zonos-cart',{method: 'POST',headers: {'Content-Type': 'application/json',},},);const json = await response.json();return {cartId: json.id,// Each item is rendered on a new line of the same info banner.// Markdown links `[text](url)` become `<a>` tags.customMessage: ['Some items in your cart are subject to California regulations.','Please review the required notice [here](https://oag.ca.gov/prop65).',],};},},});(İsteğe bağlı) Zonos checkout'u programlı olarak tetikleyin
Özel mantığınız varsa ve Zonos checkout'u programlı olarak tetiklemeniz gerekiyorsa, Zonos başlatıldıktan sonra Zonos checkout penceresini açmak için
Zonos.triggerCheckoutInternational()işlevini kullanabilirsiniz. Bu, yukarıdakiZonos.initiçinde tanımlanancreateCartIdgeri çağırmasını çağıracak ve Zonos checkout penceresini açacaktır.// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")const domesticCountry = 'US';document.querySelector('.country-select').addEventListener('change', e => {const country = e.target.value;if (country !== domesticCountry) {Zonos.triggerCheckoutInternational();}});(İsteğe bağlı) Her zaman Zonos checkout seçicisini tetikleyin
İç ve uluslararası alıcılar için checkout işlemini ayırmak istiyorsanız, sitenize bir
International checkoutdüğmesi ekleyebilirsiniz.Zonos.triggerCheckoutInternationalile Zonos Checkout'u manuel olarak tetiklemek yerine,Zonos.init'i uygun seçici ile yapılandırabilirsiniz. Seçici, Zonos başlatılana kadar devre dışı bırakılacak, düğmeye tıklandığında Zonos checkout'u otomatik olarak tetikleyecektir. Bu,Zonos.initiçinde tanımlanancreateCartIdgeri çağırmasını çağıracak ve Zonos checkout penceresini açacaktır.Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsalwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout},});(İsteğe bağlı) Checkout hunisini GA4 veya Facebook Pixel ile izleyin
Zonos Checkout, tüm checkout hunisini mevcut analiz araçlarınıza iletebilir. Her adım için Zonos şunları gönderir:
zonos-checkout-...etkinliğini GA4'e (gtag('event', ...)aracılığıyla) ve özel bir etkinlik olarak Meta'ya (fbq('trackCustom', ...)aracılığıyla).InitiateCheckout,AddPaymentInfovePurchase— böylece Meta'nın yerleşik optimizasyonu ve dönüşüm raporlaması kutudan çıktığı gibi çalışır.Olayların sağlayıcılarınıza nasıl ulaştığı, Checkout'un sitenizde nasıl oluşturulduğuna bağlıdır. Entegrasyonunuzla eşleşen yolu seçin.
Yerel entegrasyon (Checkout doğrudan sitenizde oluşturulur)
<zonos-checkout>özel öğesi kendi sayfanıza monte edildiğinde (yukarıda açıklanan Zonos JS betik entegrasyonu için varsayılan), sayfanızın kendiwindow.gtagvewindow.fbqişlevleri zaten kapsam içindedir. Zonos bunları doğrudan çağırır — hiçbir röle veya piksel kimliği el değiştirmesi gerekli değildir.Kurulum:
Bu kadar. Hiçbir röle betiği yok, hiçbir
customHTMLyok, hiçbir ekstra kimlik geçilmesi yok — Zonos sayfadakigtag/fbqalgılar ve olayları doğrudan tetikler.Iframe entegrasyonu (
iglobalstores.comüzerindeki eski Checkout iframe'i)Checkout farklı bir kaynakta bir iframe'de barındırıldığında, sayfanızdaki
gtag/fbqişlevlerine doğrudan erişemez. Zonos, Checkout iframe'inden gelen postMessage olaylarını dinleyen ve bunları sayfanızda bulunan sağlayıcılara ileten küçük bir röle betiği olananalyticsRelayOnInit.js'i yayınlar. Tek bir röle hem GA4 hem de Facebook Pixel'i aynı anda işler.Kurulum:
<head>bölümüne ekleyin.asyncsrc="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">customHTMLaracılığıyla geçirin:window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';Adım adım iframe talimatları, tam olay referansı (
purchase/Purchaseyük eşlemesi dahil) ve hata ayıklama ipuçları için bkz.:Siparişi izleme ve durumunu Dashboard'a senkronize edin
Siparişlerinizi sisteminiz ile Zonos Dashboard arasında senkronize etmek için şu API çağrılarını ve webhook'ları uygulayın:
Gerekli Mutasyonlar
orderUpdateAccountOrderNumberorderAddTrackingNumberGerekli Webhooks
ORDER_CREATEDORDER_STATUS_CHANGEDEntegrasyonunuzu test edin
Checkout entegrasyonunuz ile canlı olmadan önce, sorunsuz bir müşteri deneyimi sağlamak için entegrasyonun tüm yönlerini iyice test etmek önemlidir. Buna checkout akışı, ödeme işleme, sipariş oluşturma ve webhook işlevselliğinin test edilmesi dahildir.
Test rehberimizi izleyin entegrasyonunuzun düzgün çalıştığını doğrulamak ve üretim ortamında başlatmadan önce sorunları belirlemek ve gidermek için.
Sık sorulan sorular
Entegrasyon süreci hakkında sık sorulan sorular aşağıdadır.
Zonos, sipariş onayını nasıl işler?
Dashboard -> Settings -> Checkout settings sayfasında Success page type altında satın alma sonrası deneyimini yapılandırın. Üç seçenek kullanılabilir:
zOrderNumber(ve eski sepetler içinorderId) sorgu parametreleri eklenerek yönlendirir.zonosCheckoutSessionId'yi sorgu parametresi olarak ekler. Bu seçeneği, kendi başarı sayfanıza en hızlı geçişi istediğinizde kullanın.zonosCheckoutSessionId'den siparişi aramaClose the checkout modal seçeneğini yönlendirme URL'si ile kullandığınızda, yeniden yönlendirmeden sonra siparişin checkout oturumuna eklenmesi birkaç saniye sürebilir. URL'den
zonosCheckoutSessionIdokuyun ve gizli kimlik bilgisi belirteci kullanarak sunucunuzdancheckoutSessionGraphQL sorgusunu siparişin hazır olması için yoklayın. Bunu tarayıcıdan asla çağırmayın — gizli kimlik bilgisi belirteci sunucu tarafında kalmalıdır.query getCheckoutSession($id: String!) {checkoutSession(id: )orderidSorguyu, Dashboard -> Settings -> Integrations sayfasından aldığınız gizli kimlik bilgisi belirtecinizi
credentialTokenistek başlığı olarak geçirerekhttps://api.zonos.com/graphqladresine gönderin.Bir siparişin oluşturulduğu zaman haberdar edilebilir miyim?
Evet. Bir sipariş oluşturulduğunda bildirim almak istiyorsanız, Dashboard'da Checkout settings sayfasının Email bölümünde, bir siparişin oluşturulduğu, gönderildiği veya iptal edildiği zaman bildirilmesi gereken ekip üyelerinin e-posta adresini girebilirsiniz.
Bu sayfa faydalı mıydı?