iyzico buton

iyzico buton kolay entegrasyonu sayesinde hızlıca ödeme ve iadelerinizi yönetmenizi sağlayan yeni bir entegrasyon modelidir.

iyzico buton nasıl çalışır?

  1. iyzico butonu özelleştirme seçeneklerini kullanarak size en uygun kullanımı oluşturarak websitenize ekleyin.
  2. iyzico buton sitenize form tagleri içerisinde eklenecektir. Dilerseniz bu form taglerini özelleştirerek yada callback parametremizi kullanarak kullanıcıların butona tıkladığını anlayabilir ve ödeme isteğinizi başlatabilirsiniz. Ödeme init isteği başarılı olduğunda response’da gelen url'e kullanıcıyı yönlendirmeniz gerekmektedir.
  3. Kullanıcılar consumer.iyzico.com adresinde ödemelerini gerçekleştirdikten sonra tekrar init isteğinde gönderilen CallbackUrl'e yönlendirilecektir.

1. iyzico buton ekleyin.

<!-- Butonun ekleneceği bir div ekleyin -->
<div id="iyzico-button"></div>

<!-- script dosyasını sayfanıza ekleyin -->
<script src="https://static.iyzipay.com/plugins/v1/iyzico-buttons.min.js"></script>

//iyzico button'u sayfanıza ekleyin.
new iyzico.buttons();

iyzico buton özelleştirme seçeneklerine buradan göz atabilirsiniz.

2. Ödeme isteğinizi başlatın ve yönlendirme yapın.

<div id="iyzico-button">
    <div class="iyzico-button-container">
        <form action="#" name="iyzico-form" method="POST" class="iyzico-form">
            <button type="submit" class="iyzico-button"><svg>...</svg></button>
        </form>
    </div>
</div>

iyzico buton seçici içerisine yukarıdaki gibi html ekleyecektir. Form değerlerini güncellemek için buradan detaylı bilgi edinebilirsiniz.

2.1 Form submit yapılarak ödeme başlatma ve yönlendirme.

# ödeme isteği
$payWithIyzicoInitialize = 
\Iyzipay\Model\PayWithIyzicoInitialize::create($request, Config::options());

# yönledirme
if ($payWithIyzicoInitialize->getPayWithIyzicoPageUrl()) {
    echo '<script type="text/javascript">
        window.location.href = "'.$payWithIyzicoInitialize->getPayWithIyzicoPageUrl().'"
    </script>';
}

Yukarıdaki istek örnek olarak yapılmıştır ödeme istediğinin nasıl oluşturulduğunu bu adresten detaylı görebilirsiniz.

2.2 Callback yapılarak ödeme başlatma ile yönlendirme

new iyzico.buttons({
  onSubmit: function () {
        // 1. Kullanılan endpoint adresine istek atıp ödemenizi init yapın.
        const response = await fetch("/your-endpoint-url", {
          method: 'POST',
        });
        const response = await response.json();

        // 2. Gelen cevaba göre yönlendirme yapın.
        if(response.getPayWithIyzicoPageUrl) {
            window.location.href = response.getPayWithIyzicoPageUrl;
        }
  }
});

Yukarıdaki istek örnek olarak yapılmıştır. Callback fonksiyonu içerisinde istediğiniz işlemleri yapabilirsiniz.

3. CallbackUrl yönlendirmesi

Kullanıcılar consumer.iyzico.com adresinde işlemlerini gerçekleştirdiğinde init isteğinde gönderilen callbackUrl adresine tekrar yönlendirilerek websitenize geri dönerler.

iyzico buton özelleştirme seçeneklerine **buradan** göz atabilirsiniz.