> For the complete documentation index, see [llms.txt](https://docs.iyzico.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iyzico.com/en/payment-methods/checkoutform/cf-implementation.md).

# CF Implementation

<figure><img src="/files/D3xcFrOU5aVqLL97oWKK" alt=""><figcaption></figcaption></figure>

CF(Checkoutform) technically consists of 2(two) basic steps as like [PWI](/en/payment-methods/paywithiyzico.md);

* [CF-Initalize](/en/payment-methods/checkoutform/cf-implementation/cf-initialize.md)
* [CF-Retrieve](/en/payment-methods/checkoutform/cf-implementation/cf-retrieve.md)

**CF-Initialize** is where we start the payment process.\
While **CF-Retrieve** step is retrieving payment result, simply.

### Implementation Steps

1. [Usage](#usage)
2. [CF - Initialize](/en/payment-methods/checkoutform/cf-implementation/cf-initialize.md)
3. Redirection
4. [CF - Retrieve](/en/payment-methods/checkoutform/cf-implementation/cf-retrieve.md)
5. [Webhook](/en/advanced/webhook.md)

### Top View

* [ ] Usage; decision making of payment form which is available in pop-up, responsive, iframe or redirection forms.
* [ ] CF-Initialize; first `POST` request of managing two-step CF transactions.
* [ ] Redirection; Following up consumers' payment, iyzico triggers correlated IPN(Instant Payment Notification) to given callbackUrl.
* [ ] CF-Retrieve; engage step to officialize transaction between Acquirer and Issuer.
* [ ] Webhook; real-time notification of relevant payment.

### UML Diagram

<figure><img src="/files/JKPkeOHQUHLcfHzwQ13q" alt=""><figcaption></figcaption></figure>

### Usage

CF(Checkoutform) offers multiple way of forms on the browsers;&#x20;

#### Responsive

```html
<div id="iyzipay-checkout-form" class="responsive"></div>
```

#### Pop-up

```html
<div id="iyzipay-checkout-form" class="popup"></div>
```

#### iFrame

* It requires to add `&iframe=true` postfix to `paymentPageUrl` parameter that returns after CF-Initialize request.

#### Redirection

* Most common method where direct routing of `paymentPageUrl` on the application.