### Theme Configuration Example

Source: https://docs.ottu.com/developer/checkout-sdk/ios/customization-theme

This example demonstrates how to create and configure a `CheckoutTheme` object to customize the appearance of the checkout interface. It covers setting colors, fonts, and margins for various UI components.

```APIDOC
## Theme Configuration

This section provides an example of how to create and customize the `CheckoutTheme` object to style the Ottu checkout interface.

### Description

Demonstrates the creation of a `CheckoutTheme` object and setting various properties to customize the UI elements like background colors, text colors, fonts, and margins.

### Method

N/A (Code Example)

### Endpoint

N/A (Code Example)

### Parameters

This example utilizes Swift code to define theme properties. The `CheckoutTheme` object has properties that accept custom values for colors, fonts, and layout.

#### Request Body

N/A (Code Example)

### Request Example

```swift
func createTheme() - > CheckoutTheme {
    var theme = CheckoutTheme()
    theme.backgroundColor = .systemBackground
    theme.backgroundColorModal = .secondarySystemBackground
    theme.margins = UIEdgeInsets(top: 8, left: 2, bottom: 8, right: 2)
    theme.mainTitle.color = .label
    theme.mainTitle.fontFamily = "Arial"
    theme.button.enabledTitleColor = .payButtonTitle
    theme.button.disabledTitleColor = .payButtonDisabledTitle
    theme.button.fontFamily = "Arial"
    theme.button.enabledBackgroundColor = .payButtonBackground
    theme.button.disabledBackgroundColor = .payButtonDisabledBackground
    return theme
}
```

### Response

N/A (Code Example)

#### Success Response (200)

N/A (Code Example)

#### Response Example

N/A (Code Example)
```

--------------------------------

### Install Ottu SDK with CocoaPods (Latest)

Source: https://docs.ottu.com/developer/checkout-sdk/ios/installation

Use this command in your Podfile if you want to install the latest version of the Ottu checkout SDK from its GitHub repository using CocoaPods. Consider running `pod repo update` if you encounter version compatibility issues.

```ruby
pod 'ottu_checkout_sdk', :git => 'https://github.com/ottuco/ottu-ios'
```

--------------------------------

### SDK Initialization with Theme

Source: https://docs.ottu.com/developer/checkout-sdk/ios/customization-theme

This example shows how to pass the configured `CheckoutTheme` object during the initialization of the Ottu `Checkout` SDK.

```APIDOC
## SDK Initialization with Theme

This section illustrates how to initialize the Ottu `Checkout` SDK, passing the previously configured `theme` object.

### Description

Demonstrates the initialization of the `Checkout` SDK, requiring a `theme` object along with other essential parameters like `sessionId`, `merchantId`, and `apiKey`.

### Method

N/A (Code Example)

### Endpoint

N/A (Code Example)

### Parameters

This example uses Swift code to initialize the `Checkout` SDK. The `theme` parameter accepts a `CheckoutTheme` object.

#### Request Body

N/A (Code Example)

### Request Example

```swift
self.checkout = Checkout(
    theme: theme,
    sessionId: sessionId,
    merchantId: merchantId,
    apiKey: apiKey,
    delegate: self
)
```

### Response

N/A (Code Example)

#### Success Response (200)

N/A (Code Example)

#### Response Example

N/A (Code Example)
```

--------------------------------

### Transaction Initiation Example

Source: https://docs.ottu.com/developer/message-notifications

Example of initiating a payment transaction using the Checkout API, which also sets up message notification preferences for various states.

```APIDOC
## Transaction Initiation Example

### Description
This example demonstrates how to initiate a payment transaction using the Checkout API. It includes the `notifications` field to pre-configure which events should trigger messages across different channels (email, SMS, WhatsApp).

### Method
POST

### Endpoint
/api/v1/checkout

### Request Body
```json
{
   "type":"payment_request",
   "pg_codes":[
      "credit_card"
   ],
   "amount":"22",
   "currency_code":"SAR",
   "order_no":"example_order_no",
   "customer_email":"example@example.com",
   "customer_phone":"123456789",
   "notifications":{
      "email":[
         "created",
         "paid",
         "canceled",
         "failed",
         "expired",
         "authorized",
         "voided",
         "refunded",
         "captured"
      ],
      "SMS":[
         "created",
         "paid",
         "canceled",
         "failed",
         "expired",
         "authorized",
         "voided",
         "refunded",
         "captured"
      ],
      "whatsapp":[
         "created",
         "paid",
         "canceled",
         "failed",
         "expired",
         "authorized"
      ]
   }
}
```
```

--------------------------------

### Install Ottu SDK with CocoaPods (Specific Tag)

Source: https://docs.ottu.com/developer/checkout-sdk/ios/installation

Add this line to your Podfile to install a specific version of the Ottu checkout SDK using CocoaPods. Ensure the GitHub repository and tag are correctly specified.

```ruby
pod 'ottu_checkout_sdk', :git => 'https://github.com/ottuco/ottu-ios.git', :tag => '2.1.10'
```

--------------------------------

### Initialize Checkout SDK

Source: https://docs.ottu.com/developer/checkout-sdk/android/example

Use the Checkout.Builder to construct the SDK configuration, then call Checkout.init to get a Fragment. Provide a TransactionResultCallback to handle transaction outcomes.

```swift
val theme = getCheckoutTheme()

// Builder class is used to construct an object passed to the SDK initializing function
val builder = Checkout
  .Builder(merchantId!!, sessionId, apiKey!!, amount!!)
  .displaySettings(displaySettings)
  .formsOfPayments(formsOfPayment)
  .theme(theme)
  .logger(Checkout.Logger.INFO)
  .build()


// Actual `init` function calling, returning a `Fragment` object  
checkoutFragment = Checkout.init(
  context = this @CheckoutSampleActivity,
  builder = builder,
  transactionResultCallback = object: Checkout.TransactionResultCallback {
    override fun onTransactionResult(result: TransactionResult) {
      showResultDialog(result)
    }
  }
)
```

--------------------------------

### Install Checkout SDK via Script Tag

Source: https://docs.ottu.com/developer/checkout-sdk/web

Include the SDK library in the HTML head section, specifying callback functions for various checkout events.

```html
<head>
    <script
        src="https://assets.ottu.net/checkout/v3/checkout.min.js"
        data-error="errorCallback"
        data-cancel="cancelCallback"
        data-success="successCallback"
        data-beforepayment="beforePayment"
    ></script>
</head>
```

--------------------------------

### Checkout SDK Installation

Source: https://docs.ottu.com/developer/checkout-sdk/web

Include the Checkout SDK library in your web application by adding a script tag to your HTML's head section.

```APIDOC
## Checkout SDK Installation

To install the Checkout SDK, you'll need to include the library in your web application by adding a script tag to your HTML section. You can do this by using the following code snippet:

```html
<head>
    <script
        src="https://assets.ottu.net/checkout/v3/checkout.min.js"
        data-error="errorCallback"
        data-cancel="cancelCallback"
        data-success="successCallback"
        data-beforepayment="beforePayment"
    ></script>
</head>
```

Replace [errorCallback](#window.errorcallback), [cancelCallback](#window.cancelcallback), [successCallback](#window.successcallback), and [beforePayment](#windows.beforepayment-hook) with the names of your error handling, cancel handling, success handling, and beforePayment handling functions, respectively.

You're all set! You can now use the [Checkout SDK ](https://docs.ottu.com/developer/checkout-sdk)to create a checkout form on your web page and process payments through Ottu.
```

--------------------------------

### Run Flutter dependency commands

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/installation

Commands to install dependencies or clean and refresh the project environment.

```bash
flutter pub get
```

```bash
flutter clean
flutter pub get
```

--------------------------------

### Customize Checkout Themes

Source: https://docs.ottu.com/developer/checkout-sdk/web

These examples demonstrate various theme configurations for the checkout interface, including sample, dark, minimal, and layout-specific styles.

```javascript
Checkout.init({
    // other parameters
    theme: {        
        "main": {        
            "background": "#d4d4d461"
        },
        "primary-text": {
            "color": "black"
        },
        "pay-button": {
            "background": "black",
            "color": "white"
        },
        "amount-box": {
            "background": "#1157e878"
        },
        "methods": {
            "background": "#373f5236"
        },
        "checkbox-label": {
            "color": "#003aff"
        }
    }
});
```

```javascript
Checkout.init({
    selector: "checkout",
    merchant_id: 'domain',
    session_id: 'session_id',
    apiKey: 'apiKey',
    theme: {
        "main": {
            "background": "#555555"
        },
        "title-text": {
            "color": "white"
        },
        "primary-text": {
            "color": "white"
        },
        "secondary-text": {
            "color": "white"
        },
        "pay-button": {
            "background": "#333",
            "color": "white"
        },
        "amount-box": {
            "background": "#333"
        },
        "stcPay": {
            "buttonColor": "black"
        },
        "urPay": {
            "buttonColor": "black"
        },
        "payment-modal": {
            "background": "black"
        },
        "mobile-number-input": {
            "color": "black"
        },
        "otp-input": {
            "color": "black"
        },
        "methods": {
            "background": "#333"
        },
        "selected-method": {
            "background": "black",
            "border": "2px solid #6e6ef5d4",
        },
        "card-removal-modal": {
            "background": "black"
        },
        "keep-card-button": {
            "color": "black"
        },
        "info-modal": {
            "background": "black"
        },
        "error-retry-button": {
            "color": "black"
        },
        "ccv-input": {
            "background": "black",
            "color": "white"
        },
        "floating-label": {
            "background": "black"
        },
        "payment-error-message": {
            "color": "red"
        },
        "popup-back-button": {
            "stroke": "red"
        },
        "popup-close-button": {
            "fill": "red"
        },
        "otp-resend-button": {
            "color": "black"
        }
    }
});
```

```javascript
Checkout.init({
    selector: "checkout",
    merchant_id: 'domain',
    session_id: 'session_id',
    apiKey: 'apiKey',
    theme: {
        "title-text": {
            "font-family": "SF PRO REGULAR"
        },
        "primary-text": {
            "font-family": "SF PRO REGULAR"
        },
        "secondary-text": {
            "font-family": "SF PRO REGULAR"
        },
        "amount-box": {
            "background": "transparent"
        },
        "methods": {
            "background": "transparent",
            "border": "none"
        },
        "selected-method": {
            "background": "transparent",
            "border": "none"
        },
        "ccv-input": {
            "background": "transparent"
        },
        "floating-label": {
            "background": "white"
        }
    }
});
```

```javascript
Checkout.init({
    selector: "checkout",
    merchant_id: 'domain',
    session_id: 'session_id',
    apiKey: 'apiKey',
    googlePayInit: {
        buttonColor: "black"
    },
    theme: {
        "wallet-buttons": {
            "flex-direction": "row",
            "gap": "10px"
        },
    }
});
```

```javascript
Checkout.init({
    // other parameters
    theme: {
        "payment-details-heading": {
            "display": "none"
```

--------------------------------

### Download Report File

Source: https://docs.ottu.com/developer/reports-api

Perform a GET request to the provided download_action.url to retrieve the binary report file.

```bash
curl -X GET "https://<ottu-url>/b/api/v1/reports/files/{report_id}/download/" \
  -H "Api-Key: your_private_api_key"
```

--------------------------------

### Refund Payload Example

Source: https://docs.ottu.com/developer/webhooks/operation-notification

Example of a refund operation payload.

```APIDOC
## Payload Example (refund)

### Request Example
```json
{
   "amount":"9.000",
   "initiator":{
      "email":"initaitor@example.com",
      "first_name":"example",
      "id":35,
      "last_name":"",
      "phone":"",
      "username":"username_example"
   },
   "is_sandbox":true,
   "operation":null,
   "order_no":"Y3ODg",
   "pg_code":"credit-card",
   "pg_response":{
      "It will contain the raw pg response sent by the pg to Ottu"
   },
   "reference_number":"staging4AQ64A",
   "result":"success",
   "session_id":"bb7fc280827c2f177a9690299cfefa4128dbbd60",
   "signature":"65f655d2161*************",
   "source":"input",
   "success":true,
   "timestamp_utc":"2023-11-02 09:02:06",
   "txn":{
      "amount":"9.000",
      "currency_code":"KWD",
      "order_no":"",
      "session_id":"43ae8773f2c61f2ef41e3024e3b8f8bf45667d44",
      "state":"refunded"
   }
}
```
```

--------------------------------

### Initialize SDK with setupPreload

Source: https://docs.ottu.com/developer/checkout-sdk/web

Optimizes loading by passing pre-fetched transaction details directly to the SDK. Requires the sdk_setup_preload_payload obtained from the Checkout API.

```javascript
Checkout.init({
    // other parameters
    setupPreload: {
        // prefetched transaction details object
    }
});
```

--------------------------------

### Payment Payload Examples

Source: https://docs.ottu.com/developer/checkout-api

Examples of the payload field format for different payment instrument types.

```json
{"version": "EC_v1", "data": "...", "signature": "...", "header": {...}}
```

```json
"eyJhbGciOi...autoDebitToken"
```

--------------------------------

### R8 Compilation Error Example

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/releasing-your-app

Example of an R8 compilation error indicating missing classes.

```kotlin
ERROR: Missing classes detected while running R8. Please add the missing classes or apply additional keep rules that are generated in /build/app/outputs/mapping/release/missing_rules.txt.
ERROR: R8: Missing class com.google.devtools.ksp.processing.SymbolProcessorProvider (referenced from: com.squareup.moshi.kotlin.codegen.ksp.JsonClassSymbolProcessorProvider)
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:minifyReleaseWithR8'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.R8Task$R8Runnable
   > Compilation failed to complete
```

--------------------------------

### Initialize Checkout SDK

Source: https://docs.ottu.com/developer/checkout-sdk/ios/quick-start

Initialize the Checkout SDK within the `viewDidLoad` method. Provide necessary parameters such as display settings, session ID, merchant ID, API key, and a delegate for callbacks. Consider using `setupPreload` for faster initialization.

```swift
do {
    self.checkout = try Checkout(
        displaySettings: PaymentOptionsDisplaySettings(
          mode: PaymentOptionsDisplaySettings.PaymentOptionsDisplayMode.list
        ),
        sessionId: sessionId,
        merchantId: merchantId,
        apiKey: apiKey,
        delegate: self
    )
} catch let error as LocalizedError {
    print(error)
    return
} catch {
    print("Unexpected error: \(error)")
    return
}
```

```swift
do {
    self.checkout =
        try Checkout(
            sessionId: sessionId,
            merchantId: merchantId,
            apiKey: apiKey,
            delegate: self
        )
} catch
let error as LocalizedError {
    // display an error here
    return
} catch {
    print("Unexpected error: \(error)")
    return
}
```

--------------------------------

### Checkout API Response Example

Source: https://docs.ottu.com/developer/auto-debit

This is an example response from a Checkout API call, which includes a session_id crucial for subsequent AutoDebit API calls.

```json
{
   "agreement":{
      "id":"A123456789",
      "amount_variability":"fixed",
      "start_date":"13/12/2023",
      "expiry_date":"01/10/2024",
      "cycle_interval_days":1,
      "total_cycles":1,
      "frequency":"daily",
      "type":"recurring",
      "seller":{
         "name":"Test-auto-debit",
         "short_name":"Test",
         "category_code":"1234"
      }
   },
   "amount":"19.000",
   "card_acceptance_criteria":{
      "min_expiry_time":30
   },
   "checkout_url":"https://sandbox.ottu.net/b/checkout/redirect/start/?session_id=19aa7cd3cfc43d9d7641f6c433767b25cbcd6c18",
   "currency_code":"KWD",
   "customer_id":"cust_123",
   "due_datetime":"13/12/2023 13:41:29",
   "expiration_time":"1 00:00:00",
   "language":"en",
   "operation":"purchase",
   "payment_methods":[
      {
         "code":"credit-card",
         "name":"Credit Card",
         "pg":"Ottu PG",
         "type":"sandbox",
         "amount":"19.000",
         "currency_code":"KWD",
         "fee":"0.000",
         "fee_description":"",
         "icon":"https://sandbox.ottu.net/media/gateway/settings/logos/MASTER_q6sxwtA_md4lBKv.jpeg",
         "flow":"redirect",
         "redirect_url":"https://pg.ottu.dev/checkout/c2FuZGJveC5vdHR1Lm5ldA==/Z0FBQUFBQmxlYlNLWDB"
      }
   ],
   "payment_type":"auto_debit",
   "pg_codes":["credit-card"],
   "session_id":"19aa7cd3cfc43d9d7641f6c433767b25cbcd6c18",
   "state":"created",
   "type":"e_commerce"
}
```

--------------------------------

### R8 Compilation Error Example

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/quick-start

This is an example of an R8 compilation error indicating missing classes. Resolve by adding missing classes or keep rules to `proguard-rules.pro`.

```text
ERROR: Missing classes detected while running R8. Please add the missing classes or apply additional keep rules that are generated in /build/app/outputs/mapping/release/missing_rules.txt.
ERROR: R8: Missing class com.google.devtools.ksp.processing.SymbolProcessorProvider (referenced from: com.squareup.moshi.kotlin.codegen.ksp.JsonClassSymbolProcessorProvider)
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:minifyReleaseWithR8'.
 > A failure occurred while executing com.android.build.gradle.internal.tasks.R8Task$R8Runnable
   > Compilation failed to complete
```

--------------------------------

### Ottu Invoice API Response Example

Source: https://docs.ottu.com/developer/invoice-api

This is an example of a successful response from the Ottu Invoice API after creating an invoice. It includes details about the invoice, payment methods, and associated URLs.

```json
{
   "amount":5.815,
   "checkout_url":"https://sandbox.ottu.net/b/checkout/redirect/start/?session_id=9ba4c834f55f1e5476b9d9ea47ec7b12f61f9511",
   "currency_code":"KWD",
   "due_datetime":"29/12/2025 00:00:00",
   "invoice_id":3,
   "language":"en",
   "operation":"purchase",
   "payment_methods":[
      {
         "code":"credit-card",
         "name":"Credit Card",
         "pg":"Ottu PG",
         "type":"sandbox",
         "amount":"5.815",
         "currency_code":"KWD",
         "fee":"0.000",
         "fee_description":"",
         "icon":"https://sandbox.ottu.net/media/gateway/settings/logos/MASTER_q6sxwtA_md4lBKv.jpeg",
         "flow":"redirect",
         "redirect_url":"https://pg.ottu.dev/checkout/c2FuZGJveC5vdHR1Lm5ldA==/Z0F"
      }
   ],
   "payment_type":"one_off",
   "pg_codes":[
      "credit-card"
   ],
   "session_id":"9ba4c834f55f1e5476b9d9ea47ec7b12f61f9511",
   "state":"created",
   "type":"e_commerce",
   "invoice_number":"A00001",
   "due_date":"2025-12-29",
   "invoice_items":[
      {
         "sku":"ABC111",
         "description":"Test",
         "quantity":1.111,
         "unit_price":5.234,
         "total_excl_tax":5.815,
         "tax_amount":0.0,
         "total_incl_tax":5.815
      }
   ],
   "shortify_checkout_url":false,
   "expiration_time":null,
   "shortify_attachment_url":false,
   "generate_qr_code":false,
   "include_sdk_setup_preload":false,
   "data":{
      "fields":[
         
      ],
      "api_version":"invoice_v1"
   },
   "subtotal":5.815,
   "total_excl_tax":5.815,
   "tax_amount":0.0,
   "shipping_incl_tax":0.0,
   "total_incl_tax":5.815,
   "invoice_pdf_url":"https://e.pay.kn/HWiDBBAQ8WBn"
}
```

--------------------------------

### SDK Initialization

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/functions

Details on how to initialize the Ottu Checkout SDK using the CheckoutArguments configuration object.

```APIDOC
## SDK Initialization

### Description
The Checkout SDK is initialized by passing an instance of the `CheckoutArguments` class to the `OttuCheckoutWidget` object.

### Parameters
#### Request Body
- **merchantId** (string) - Required - The root domain of the Ottu account (e.g., example.ottu.com).
- **apiKey** (string) - Required - The Ottu public API key for authentication.
- **sessionId** (string) - Required - The unique identifier for the payment transaction.
- **formsOfPayment** (array) - Optional - List of payment methods to enable (e.g., applePay, cardOnsite, tokenPay, redirect, stcPay).
- **setupPreload** (object) - Optional - Pre-stored transaction details to reduce processing time.
- **theme** (object) - Optional - UI customization settings for colors and fonts.
- **paymentOptionsDisplaySettings** (object) - Optional - Configuration for how payment options are presented.
- **successCallback** (unit) - Required - Callback function for successful payment status.
- **errorCallback** (unit) - Required - Callback function for payment errors.
```

--------------------------------

### Checkout.init

Source: https://docs.ottu.com/developer/checkout-sdk/android/functions

Initializes the checkout process and configures the SDK with necessary merchant and session details.

```APIDOC
## Checkout.init

### Description
The function initiates the checkout process and configures the required settings for the Checkout SDK. It returns a Fragment object for integration into an Android Activity.

### Parameters
#### Request Body
- **merchantId** (string) - Required - The root domain of your Ottu account (e.g., example.ottu.com).
- **apiKey** (string) - Required - The Ottu API public key for authentication.
- **sessionId** (string) - Required - The unique identifier for the payment transaction.
- **formsOfPayment** (array) - Optional - List of enabled payment methods (e.g., cardOnsite, tokenPay, redirect, stcPay, flexMethods).
- **setupPreload** (object) - Optional - TransactionDetails object to reduce backend retrieval time.
- **theme** (object) - Optional - Theme class object for UI customization.

### Response
- **Fragment** (object) - A native Android UI component for the checkout interface.
```

--------------------------------

### Initialize PaymentOptionsDisplaySettings in Swift

Source: https://docs.ottu.com/developer/checkout-sdk/ios/functions

Pass this object to Checkout.init to configure the payment options UI behavior.

```swift
displaySettings: PaymentOptionsDisplaySettings(
  mode: paymentOptionsDisplayMode,
  visibleItemsCount: visibleItemsCount,
  defaultSelectedPgCode: defaultSelectedPgCode
)
```

--------------------------------

### Pass display settings to Checkout.init

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/functions

Shows the parameter assignment for the Checkout initialization.

```swift
displaySettings:paymentOptionsDisplaySettings
```

--------------------------------

### GET /api/v2/cards

Source: https://docs.ottu.com/developer/user-cards

Retrieves a list of cards saved by a specific customer.

```APIDOC
## GET /api/v2/cards

### Description
Retrieves a list of cards saved by the customer. The response includes details such as the card's masked number, card type, and expiration date.

### Method
GET

### Endpoint
/api/v2/cards

### Parameters
#### Query Parameters
- **type** (string) - Required - Choose between `sandbox` or `production` to retrieve cards associated with the specified environment.
- **customer_id** (string) - Required - Retrieve cards associated with a specific customer using their unique customer_id.
- **pg_codes** (array) - Optional - Specify the `pg_code` if you want to retrieve cards for a particular payment gateway.
- **agreement_id** (string) - Optional - Retrieve the card associated with a specific agreement ID.

### Response
#### Success Response (200)
- **brand** (string) - The card brand (e.g., Visa, Mastercard).
- **customer_id** (string) - The unique identifier for the customer.
- **cvv_required** (boolean) - Specifies if the card requires the submission of a CVV.
- **expiry_month** (string) - The card's expiration month.
- **expiry_year** (string) - The card's expiration year.
- **is_expired** (boolean) - Indicates whether the card has expired.
- **is_preferred** (boolean) - Indicates if the card is the customer's preferred payment option.
- **name_on_card** (string) - The cardholder's name.
- **number** (string) - The masked card number.
- **pg_code** (string) - The `pg_code` associated with the card's creation.
- **pg_name** (string) - The payment gateway name.
```

--------------------------------

### Initialize Ottu Checkout and Present Payment View

Source: https://docs.ottu.com/developer/checkout-sdk/ios/example

Initializes the Ottu Checkout SDK and presents the payment view controller. Handles potential errors during initialization and configures the payment view within a resizable container. Ensure all required parameters like formsOfPayment, theme, sessionId, merchantId, apiKey, and delegate are provided.

```swift
do {
  self.checkout = 
    try Checkout(
      formsOfPayments: formsOfPayment,
      theme: theme,
      displaySettings: PaymentOptionsDisplaySettings(
        mode: paymentOptionsDisplayMode,
        visibleItemsCount: visibleItemsCount,
        defaultSelectedPgCode: defaultSelectedPgCode
      ),
      sessionId: sessionId,
      merchantId: merchantId,
      apiKey: apiKey,
      setupPreload: transactionDetailsPreload,
      delegate: self
    )
} catch
let error as LocalizedError {
  showFailAlert(error)
  return
} catch {
  print("Unexpected error: \(error)")
  return
}

if let paymentVC = self.checkout?.paymentViewController(),
  let paymentView = paymentVC.view {

    self.addChild(paymentVC)

    let resizableContainer = ResizableContainerView()
    resizableContainer.translatesAutoresizingMaskIntoConstraints = false
    resizableContainer.addSubview(paymentView)
    paymentVC.didMove(toParent: self)

    paymentView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
    paymentView.topAnchor.constraint(equalTo: resizableContainer.topAnchor),
    paymentView.bottomAnchor.constraint(equalTo: resizableContainer.bottomAnchor),
    paymentView.leadingAnchor.constraint(equalTo: resizableContainer
        .leadingAnchor, constant: 16),
    paymentView.trailingAnchor.constraint(equalTo: resizableContainer
        .trailingAnchor, constant: -16)
  ])

    contentView.addSubview(resizableContainer)
    NSLayoutConstraint.activate([
    resizableContainer.topAnchor.constraint(equalTo: topLabel.bottomAnchor,
        constant: 16),
    resizableContainer.leadingAnchor.constraint(equalTo: contentView
        .leadingAnchor),
    resizableContainer.trailingAnchor.constraint(equalTo: contentView
        .trailingAnchor)
  ])

    resizableContainer.sizeChangedCallback = {
      [weak self] _ in
      guard
      let self
      else {
        return
      }
      updateScrollEnabled(
        for: scrollView)
    }

    let bottomLabel = UILabel()
    bottomLabel.text = "Some user UI elements"
    bottomLabel.translatesAutoresizingMaskIntoConstraints = false

    contentView.addSubview(bottomLabel)
    NSLayoutConstraint.activate([
    bottomLabel.topAnchor.constraint(equalTo: resizableContainer.bottomAnchor,
        constant: 16),
    bottomLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
    bottomLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor,
        constant: -16)
  ])
  }
```

--------------------------------

### Empty API Response Example

Source: https://docs.ottu.com/developer/reports-api

A standard JSON response structure when no reports are found.

```json
{"count":0, "next":null, "previous":null, "results":[]}
```

--------------------------------

### GET /b/checkout/v1/pymt-txn/{session_id}

Source: https://docs.ottu.com/developer/checkout-api

Retrieves the current information and status of a specific payment transaction.

```APIDOC
## GET /b/checkout/v1/pymt-txn/{session_id}

### Description
Retrieves the current information and status of a specific payment transaction.

### Method
GET

### Endpoint
https://<ottu-url>/b/checkout/v1/pymt-txn/{session_id}

### Parameters
#### Path Parameters
- **session_id** (string) - Required - The unique identifier of the payment session.

### Response
#### Success Response (200)
- **amount** (string) - Transaction amount
- **checkout_url** (string) - URL for the checkout redirect
- **currency_code** (string) - Currency code
- **session_id** (string) - Unique session identifier
- **state** (string) - Current state of the transaction
- **type** (string) - Type of request
```

--------------------------------

### Initialize Ottu Checkout SDK in Android

Source: https://docs.ottu.com/developer/checkout-sdk/android/quick-start

Initialize the Checkout SDK within the onCreate function. This setup requires merchant details, transaction information, and API keys. It also handles the display settings for payment options and logging.

```swift
// populate the fields below with correct values
val merchantId = "" // your merchant base URL
val sessionId = "" // the transaction ID
val apiKey = "" // merchant public API Key
val amount = 10.0 // decimal number

// List mode just to look better
val paymentOptionsDisplaySettings = Checkout.PaymentOptionsDisplaySettings(
            Checkout.PaymentOptionsDisplaySettings.PaymentOptionsDisplayMode.List(5))

// Builder class is used to construct an object passed to the SDK initializing function
val builder = Checkout
  .Builder(merchantId!!, sessionId, apiKey!!, amount!!)
    .paymentOptionsDisplaySettings(paymentOptionsDisplaySettings)
    .logger(Checkout.Logger.INFO)
    .build()

if (Checkout.isInitialized) {
  Checkout.release()
}

lifecycleScope.launch {
  runCatching {
    Checkout.init(
      context = this@MainActivity,
        builder = builder,
        successCallback = {
          Log.e("TAG", "successCallback: $it")
          //showResultDialog(it)
        },
        cancelCallback = {
          Log.e("TAG", "cancelCallback: $it")
          //showResultDialog(it)
        },
        errorCallback = { errorData, throwable ->
          Log.e("TAG", "errorCallback: $errorData")
          //showResultDialog(errorData, throwable)
        },
    )
  }.onSuccess {
    checkoutFragment = it
    supportFragmentManager
      .beginTransaction()
      .replace(R.id.ottuPaymentView, it)
      .commit()
  }.onFailure {
    //showErrorDialog(it)
  }
}
```

--------------------------------

### GET /reports

Source: https://docs.ottu.com/developer/reports-api

Retrieves a paginated list of reports based on optional query parameters.

```APIDOC
## GET /reports

### Description
Retrieves a paginated list of reports. Supports filtering by creation date, interval, and source.

### Method
GET

### Endpoint
/reports

### Parameters
#### Query Parameters
- **created_before** (string/date) - Optional - Created before (inclusive)
- **interval** (string) - Optional - Report interval (daily, weekly, monthly, yearly)
- **limit** (integer) - Optional - Number of results to return per page
- **offset** (integer) - Optional - The initial index from which to return the results
- **source** (string) - Optional - Report source (auto, manual)

### Response
#### Success Response (200)
- **PaginatedReportAPIListList** (object) - A paginated list of report objects

#### Error Responses
- **400** - FieldErrors
- **401** - GenericErrorMessage
- **403** - GenericErrorMessage
```

--------------------------------

### Implement Multi-Field Validation

Source: https://docs.ottu.com/developer/checkout-sdk/web

Example demonstrating validation of both terms acceptance and phone number format.

```javascript
window.validatePayment = function() {
    return new Promise((resolve, reject) => {
        const termsAccepted = document.getElementById("termsCheckbox").checked;
        const phoneNumber = document.getElementById("phoneInput").value;

        if (!termsAccepted) {
            alert("Please accept the terms and conditions.");
            return reject(new Error("Terms not accepted"));
        }

        if (!phoneNumber || phoneNumber.length < 10) {
            alert("Please enter a valid phone number.");
            return reject(new Error("Invalid phone number"));
        }

        resolve(true); // Proceed with payment
    });
};
```

--------------------------------

### Build Ottu Checkout Theme

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/customization-theme

Demonstrates how to construct a `CheckoutTheme` object with specified UI mode, title text style, and modal background color. Ensure the `TextStyle` and `ColorState` are properly defined according to Ottu's requirements.

```swift
final checkoutTheme = ch.CheckoutTheme(
  uiMode: ch.CustomerUiMode.dark,
  titleText: ch.TextStyle(),
  modalBackgroundColor: ch.ColorState(color: Colors.amber));
```

--------------------------------

### Generated Signature Example

Source: https://docs.ottu.com/developer/webhooks/signing-mechanism

This is the resulting HMAC-SHA256 signature generated from the sample payload and HMAC key.

```text
6143b8ad4bd283540721ab000f6de746e722231aaaa90bc38f639081d3ff9f67
```

--------------------------------

### Run Flutter Application

Source: https://docs.ottu.com/developer/checkout-sdk/flutter/quick-start

Execute the application from the command line to verify the configuration.

```bash
flutter run
```

--------------------------------

### Initialize Checkout SDK

Source: https://docs.ottu.com/developer/checkout-sdk/ios/customization-theme

Passes the configured theme object during the initialization of the Checkout SDK.

```swift
self.checkout = Checkout(
    theme: theme,
    sessionId: sessionId,
    merchantId: merchantId,
    apiKey: apiKey,
    delegate: self
)
```

--------------------------------

### HMAC Key Example

Source: https://docs.ottu.com/developer/webhooks/signing-mechanism

This is a hypothetical HMAC key used for signing and verifying webhook notifications.

```text
pu9MpX3yPR
```

--------------------------------

### Refund Operation Webhook Payload

Source: https://docs.ottu.com/developer/webhooks/operation-notification

Example JSON structure for a refund operation webhook notification.

```json
{
   "amount":"9.000",
   "initiator":{
      "email":"initaitor@example.com",
      "first_name":"example",
      "id":35,
      "last_name":"",
      "phone":"",
      "username":"username_example"
   },
   "is_sandbox":true,
   "operation":null,
   "order_no":"Y3ODg",
   "pg_code":"credit-card",
   "pg_response":{
      "It will contain the raw pg response sent by the pg to Ottu"
   },
   "reference_number":"staging4AQ64A",
   "result":"success",
   "session_id":"bb7fc280827c2f177a9690299cfefa4128dbbd60",
   "signature":"65f655d2161*************",
   "source":"input",
   "success":true,
   "timestamp_utc":"2023-11-02 09:02:06",
   "txn":{
      "amount":"9.000",
      "currency_code":"KWD",
      "order_no":"",
      "session_id":"43ae8773f2c61f2ef41e3024e3b8f8bf45667d44",
      "state":"refunded"
   }
}
```

--------------------------------

### Implement window.beforePayment Hook

Source: https://docs.ottu.com/developer/checkout-sdk/web

Sets up a Promise-based hook to perform actions like freezing a basket before the payment process begins.

```javascript
window.beforePayment = function(data) {
    return new Promise(function(resolve, reject) {
        fetch('https://api.yourdomain.com/basket/freeze', {
            method: 'POST'
        })
        .then(function(response) {
            if (response.ok) {
                if (data && data.redirect_url) {
                    window.Checkout.showPopup(
                        'redirect', 
                        data.message || 'Redirecting to the payment page', 
                        null
                    );
                }
                resolve(true);
            }
            else reject(new Error('Failed to freeze the basket.'));
        })
        .catch(reject);
    });
};
```