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();

Last updated