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.

Parametre	Gereklilik	Açıklama
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();