# Checkout SDK

If you are planning to use the Checkout SDK for your application, it is important to note that you will need to first implement the [Checkout API](https://docs.ottu.com/developer/checkout-api) on your backend server. This is because the  Checkout SDK requires a [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only) in order to function, and the [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only) is obtained through the [Checkout API](https://docs.ottu.com/developer/checkout-api).

The [Checkout API](https://docs.ottu.com/developer/checkout-api) is responsible for generating a [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only), which is a unique identifier that is used to initiate the  Checkout SDK. This [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only) is required to be passed to the Checkout SDK in order for it to work properly.

It is important to keep in mind that the Checkout SDK cannot work without a backend implementation, as it relies on the [Checkout API](https://docs.ottu.com/developer/checkout-api) to generate the necessary [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only). Therefore, it is recommended that you first implement the [Checkout API](https://docs.ottu.com/developer/checkout-api) on your backend server before integrating the  Checkout SDK into your application.

By following this process, you can ensure that your application is able to properly leverage the features and functionality provided by the Checkout SDK, while also maintaining a secure and reliable payment processing system for your users.

{% content-ref url="checkout-sdk/web" %}
[web](https://docs.ottu.com/developer/checkout-sdk/web)
{% endcontent-ref %}

{% content-ref url="checkout-sdk/ios" %}
[ios](https://docs.ottu.com/developer/checkout-sdk/ios)
{% endcontent-ref %}

{% content-ref url="checkout-sdk/android" %}
[android](https://docs.ottu.com/developer/checkout-sdk/android)
{% endcontent-ref %}

## [Ottu-Checkout definition](#ottu-checkout-definition)

Ottu-checkout is a seamless, confidential and flexible payment checkout. Allows the merchant(s) to proceed the payment either single or bulk payment by a few steps. Ottu-checkout gives the merchant(s) the possibility to utilize many multiple payment gateways, simply generate the payment link and share it by different ways such as Email, WhatsApp, and SMS.

## [Ottu-Checkout SDK flow](#ottu-checkout-sdk-flow)

### [Merchant backend](#merchant-backend)

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FSrMgIjKGF79sRDMCFzej%2F1%20(12).png?alt=media&#x26;token=43c873e5-d4ce-429b-a184-85de13820f84" alt=""><figcaption></figcaption></figure>

In the event the due amount is determined, the merchant should be notified to initiate the payment transaction. The merchant server calls the [Checkout API](https://docs.ottu.com/developer/checkout-api), then it goes to process the response. The API needs to be updated each time the amount changes. In case there is a validation error while updating the API, the current session will be ended and a new payment transaction should be created once again.

* If the [Checkout API](https://docs.ottu.com/developer/checkout-api) returns success, it will render the page after providing the [session ID](https://docs.ottu.com/checkout-api#session_id-string-read-only).
* If the [Checkout API](https://docs.ottu.com/developer/checkout-api)returns error, the admin should be notified, then redirect to an error page and end the session.&#x20;

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2F2KzGK4207M5wkMDNINnw%2F2%20(11)%20copy.png?alt=media&#x26;token=175b6475-c288-4b19-96cc-6d364d6e7574" alt=""><figcaption></figcaption></figure>

### [Merchant frontend](#merchant-frontend)

After rendering the page, SDK will be fetched and embed from CDN (content delivery network). Then initiating the checkout SDK, and the SDK will render all the available payment methods.&#x20;

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FtyYrWaPXjjdtIdyYgtJq%2F2%20(13)%20(1)%20copy.png?alt=media&#x26;token=5e5029ee-58b7-4985-8c22-91bf0c4a5c77" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2Fl2ZteRiTeTe2UPVd9Ym4%2FCheckout%20SDK%20Payment%20Methods%20copy.png?alt=media&#x26;token=f4429546-bd76-4c36-ba52-0b9b3662fc20" alt=""><figcaption></figcaption></figure>

The customer has the option of choosing from different payment methods.

1. Card: Customer enters the card details directly.
2. Saved card: tokenization.
3. Ottu redirect: Will guide to the required payment gateway page.
4. Apple Pay: A type of payment service, Apple Pay is only available for iOS devices.

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FpVYrFlzQRh6MJFE3p6Dz%2Fdiagram%20copy.png?alt=media&#x26;token=10689d56-dc18-4a0f-b495-b7eba63649c5" alt=""><figcaption></figcaption></figure>

e.g., After selecting the payment method, the response will be proceeded to one of the three below flow. <mark style="color:red;">**Form error:**</mark> for example when customer enter invalid card expiry dates, error message will be appeared, then the customer can try again. (this is only for multiple trial payment). <mark style="color:red;">**Error:**</mark> The cancel callback will be executed when the payment has an error. e.g., the session has expired. <mark style="color:green;">**Success**</mark>.&#x20;

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2F9swWuQtaiO7WwztCsPW3%2Fimage%20(3)%20copy.png?alt=media&#x26;token=95649297-4fdb-4780-9ac6-bc9bb6551670" alt=""><figcaption></figcaption></figure>

Depending on the customer's selected payment method, there are different cases after success flow.&#x20;

**1- Redirect:** where the payment URL is generated.&#x20;

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FPXXrXxF1iLTj5pv88XTP%2F7%20(4)%20copy.png?alt=media&#x26;token=ea22a182-033d-4d1d-b606-2793aac133ae" alt=""><figcaption></figcaption></figure>

&#x20;**2-3DS required:** when the customer decides either the tokenization or card payment method. The 3DS page will be displayed > customer fills the required information Then proceed to either success call back or cancel call back.&#x20;

&#x20;**3-Payment success:** Just success call back and then end.&#x20;

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FeCuVio0hKTrzBNNP14LR%2F8%20(3)%20copy.png?alt=media&#x26;token=f935337e-4251-47fb-a56f-6151f9b1791d" alt=""><figcaption></figcaption></figure>

After Passing the 3DS

<figure><img src="https://2847651520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiUKrMb9zLt5ZzGPUYDsK%2Fuploads%2FNMTOf9uUmdWu4WGjHBLq%2F9%20(1)%20copy.png?alt=media&#x26;token=c42b5888-50b1-47ea-8455-fd94a38bb7d4" alt=""><figcaption></figcaption></figure>