iyzico button

Overwiev

iyzico button is a new integration model that allows you to manage your payments and returns quickly.

How does iyzico button work?

1- Use iyzico button customization options to create the best usage for your website.

2- iyzico button will be added to your site under a form tag. You may use the form tag or callBack option by customizing the button options when creating button. As soon as the button is clicked, initiate your pay with iyzico request and direct the user to the url that comes in the response.

3- Customers make the payment in iyzico environment(consumer.iyzico.com) and once it is completed they will be redirected to CallbackUrl that is sent in pay with iyzico init request.

1. Adding pay with iyzico button

<!-- You should add mentioned div to the place where the button will be displayed-->
<div id="iyzico-button"></div>

<!-- script source should be added to the page -->
<script src="https://static.iyzipay.com/plugins/v1/iyzico-buttons.min.js"></script>

To be able to show the button, following method should be called:

new iyzico.buttons();

For more details about customization please see the customization options

2. 2.1 Submitting the form and routing the customer

iyzico button selector will add below html to the page. For updating form values please see customization options

<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>

As soon as this form is submitted you should send pay-with-iyzico request with related payment details.

# pay with iyzico request
$payWithIyzicoInitialize = 
\Iyzipay\Model\PayWithIyzicoInitialize::create($request, Config::options());

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

Above sample shortly shows pay-with-iyzico request and javascript routing. First request will return a url which is necessary for routing. Please see request sample on github for more details.

2.2 Routing with iyzico button callback
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;
        }
  }
});

This is just a sample of usage of onSubmit function. You may add a callBack to iyzico-button. If you do so, whenever the button is clicked, onSubmit function will work before any action so you can process all required steps on client-side and send them to backend.

3. CallbackUrl routing

Customer completes payment in consumer.iyzico.com and then is redirected to callbackUrl that you mentioned in pay-with-iyzico initialize request.

For more details about customization please see the customization options