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

npm install zotlo-checkout

yarn

yarn add -D 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',
  customParameters : {  // İsteğe bağlı 
    myCustomParam : 'TAMAM!' 
  } ,
  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>

Örnek Kullanım:

<div id="zotlo-checkout"></div>

<script>
  ZotloCheckout({
    token: 'YOUR_CHECKOUT_TOKEN',
    packageId: 'YOUR_PACKAGE_ID',
    returnUrl: 'YOUR_RETURN_URL',
    language: 'en',
    customParameters: { // Opsiyonel
      myCustomParam: 'OK!'
    },
    events: {
      onSuccess(result) {
        // Ödeme başarılıysa çalışacak işlemler
      },
      onFail(error) {
        // Ödeme başarısızsa çalışacak işlemler
      }
    }
  }).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.
style	❌	Form görünümü ile ilgili özel yapılandırma ayarlarını belirtir. Detaylı bilgi için Style başlığını inceleyin.
customParameters	❌	İş akışları için gerekli olan özel parametreler burada gönderilebilir. Gönderilen parametreler webhook ile geri iletilir.
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
events.onInvalidForm	❌	Formda geçersiz bir alan olduğunda tetiklenir

Olaylar(Events):

Lütfen src/lib/types.tsIZotloCheckoutEvents dosyasındaki tüm ayrıntılara bakın .

onLoad

Form yüklendikten sonra tetiklenir.

onLoad?: (params: IFormLoad) => void;

Not: params IFormInvalid türüne ilişkin ayrıntıları görebilirsiniz

{
  ...
  events: {
    onLoad(params) {
      // Update page bg color by form bg color
      document.body.style.backgroundColor = params.backgroundColor;
    }
  }
}

onSubmit

Form gönderildikten sonra tetiklenir.Kart formunu gönderdiğinizde, değerleri olan form alanları alırsınız.

onSubmit?: (data?: Record<string, any>) => void;

{
  ...
  events: {
    onSubmit(data) {
      console.log('Form fields', data)
    }
  }
}

onSuccess

Başarılı bir ödeme sonrasında tetiklenir.

onSuccess?: (result: PaymentDetail) => void;

Not: result : PaymentDetail türüne ait ayrıntıları görebilirsiniz.

{
  ...
  events: {
    onSuccess(result) {
      const emailEl = document.getElementById('email')
      emailEl.innerText = result.client.subscriberId;
      alert('Success done!');
    }
  }
}

onFail

Ödeme başarısız olduğunda tetiklenir.

onFail?: (error: FailEventData) => void;

Note: error: FailEventData türüne ait ayrıntıları görebilirsiniz.

{
  ...
  events: {
    onFail(error) {
      alert(error.message)
    }
  }
}

onInvalidForm

Formda geçersiz bir alan olduğunda tetiklenir.

onInvalidForm?: (error: IFormInvalid) => void;

Note: error: IFormInvalid türüne ait ayrıntıları görebilirsiniz.

{
  ...
  events: {
    onInvalidForm(error) {
      alert('Invalid field:', error.name)
    }
  }
}

Yöntemler(Methods)

Checkout başlatıldıktan sonra kullanılabilecek yardımcı yöntemler:

mount

Checkout formunu belirtilen DOM öğesine render eder.

checkout.mount(containerId: string);

refresh

Formu yeniler.

checkout.refresh(): Promise<void>;

unmount

Formu kaldırır ve DOM’dan siler.

checkout.unmount();

Tasarım(Style)

Formunuzu yapılandırırken style parametreleri ie özelleştirebilirsiniz. Herhangi bir parametre tanımlamazsanız, Zotlo Konsolu'nda yapılan ayarlar varsayılan olarak geçerli olacaktır.

Not: Daha fazla ayrıntı için types.ts IZotloCheckoutStyle dosyasını inceleyiniz .

{
  ...
  style: {
    design: {
      theme: 'mobileapp',
      borderWidth: 2,
      backgroundColor: '#CCCCCC',
      ...
    },
    success: {
      show: true,
      waitTime: 20
      ...
    }
  }
}