Zotlo Checkout SDK Entegrasyonu
Zotlo Checkout SDK hakkında bilgi edinin
Zotlo Checkout SDK, web sitenize doğrudan gömülü (embedded) bir ödeme formu entegre etmenizi sağlar. Bu sayede, müşterileriniz sitenizden ayrılmadan güvenli ve kesintisiz bir ödeme deneyimi yaşar.
Hızlı Başlangıç
Kurulum
Projenize zotlo-checkout
paketini ekleyin:
npm install zotlo-checkout
SDK'yı içe aktarın
import 'zotlo-checkout/dist/zotlo-checkout.css'; // Gerekli stil dosyası
import ZotloCheckout from 'zotlo-checkout';
Checkout'ı başlatın
const checkout = await ZotloCheckout({
token: 'YOUR_CHECKOUT_TOKEN',
packageId: 'YOUR_PACKAGE_ID',
returnUrl: 'YOUR_RETURN_URL',
language: 'en',
events: {
onSuccess() {
// Ödeme başarılıysa çalışacak işlemler
},
onFail() {
// Ödeme başarısızsa çalışacak işlemler
}
}
});
// Ödeme formunu sayfadaki bir öğeye render edin
checkout.mount('zotlo-checkout');
Not: mount
fonksiyonunda verilen 'zotlo-checkout'
, formun yerleştirileceği DOM öğesinin id
bilgisidir. Örneğin:
<div id="zotlo-checkout"></div>
CDN Üzerinden Kullanım
Zotlo Checkout SDK’sını doğrudan tarayıcıya eklemek için aşağıdaki CDN bağlantılarından birini kullanabilirsiniz.
unpkg
:
<link rel="stylesheet" href="https://unpkg.com/zotlo-checkout/dist/zotlo-checkout.css" />
<script src="https://unpkg.com/zotlo-checkout/dist/zotlo-checkout.min.js"></script>
jsDelivr
:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zotlo-checkout/dist/zotlo-checkout.css" />
<script src="https://cdn.jsdelivr.net/npm/zotlo-checkout/dist/zotlo-checkout.min.js"></script>
Kullanım:
<div id="zotlo-checkout"></div>
<script>
ZotloCheckout({
token: 'YOUR_CHECKOUT_TOKEN',
packageId: 'YOUR_PACKAGE_ID',
language: 'en',
events: {
onSuccess() {
// Başarılı işlem
},
onFail() {
// Hatalı işlem
}
}
}).then(function (checkout) {
checkout.mount('zotlo-checkout');
});
</script>
Parametreler:
Bu parametreler, Zotlo Checkout SDK'da kullanılan parametreleri ve açıklamaları belirtir.
token
✅
Zotlo Console üzerinden alınan ödeme (checkout) token bilgisidir. Bu bilgiye, Projeniz içerisindeki Developer Tools>Checkout SDK sayfasından ulaşabilirsiniz.
packageId
✅
Kullanmak istediğiniz paketin ID bilgisidir.
returnUrl
✅
Ödeme işlemi sonrası yönlendirme adresi
subscriberId
❌
(Opsiyonel) Kayıt için varsayılan abone kimliği, e-mail, telefon numarası veya UUid v4 formatında bir bilgi olabilir.
events
❌
Checkout işlemi sırasında kullanılabilecek olay dinleyicileri
events.onLoad
❌
Form yüklendikten sonra tetiklenir
events.onSubmit
❌
Form gönderildikten sonra tetiklenir
events.onSuccess
❌
Ödeme başarılı olduktan sonra tetiklenir
events.onFail
❌
Ödeme başarısız olduğunda tetiklenir
Yöntemler
Checkout başlatıldıktan sonra kullanılabilecek yardımcı yöntemler:
mount(containerId: string)
Checkout formunu belirtilen DOM öğesine render eder.
jsCopyEditcheckout.mount('zotlo-checkout');
refresh()
Formu yeniler.
jsCopyEditcheckout.refresh();
unmount()
Formu kaldırır ve DOM’dan siler.
jsCopyEditcheckout.unmount();
Last updated