> ## Documentation Index
> Fetch the complete documentation index at: https://docs.klyme.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with Klyme in minutes

# Get started in two steps

In this quickstart, we will walk-through building a project using Klyme’s SDK. By the time you’re done, you’ll be ready to start accepting payments confidently.

### Prerequisite: Credentials

Before you get started, you must have a set of Klyme credentials which consist of:

`Merchant UUID` `Username` `Password`

If you don't, not to worry. You can request a set of credentials [here](https://klyme.io/contact/).

### Step 1: Add Klyme SDK to your project

Import the Klyme SDK into your project and add the Klyme HTML element, leaving the `id` parameter empty.

```html index.html lines icon="html5" theme={null}
<html>
  <head>
      <!-- Sandbox -->
      <script src="https://widget.klyme.io/test.js"></script>

      <!-- Production -->
      <script src="https://widget.klyme.io/prod.js"></script>

      <title>Klyme Example</title>
  </head>

  <body>
      <klyme-widget id="" lang="" country=""></klyme-widget>
  </body>
</html>
```

<Warning>Do not place the Klyme HTML element within an iFrame. Banks set strict headers to prevent their pages or apps from being loaded when the request comes from within an iFrame.</Warning>

#### Language

The `lang` parameter is optional but can be used to preload the Klyme Widget with a specific language pre-selected by default.

Options available are: `en` `de` `es` `fi` `fr` `it` `nl` `pt` `se`

#### Country (EUR Only)

The `country` parameter is also optional but can be used to preload the Klyme Widget with banks from a specific region as opposed to displaying the entire European banks list.

Alternatively, you can simply pass through `auto` as the `country` parameter and let the Klyme Widget handle everything — automatically detecting the user’s location and displaying region-specific banks.

Options available are: `at` `be` `fi` `es` `fr` `nl` `pt` `auto`

<Tip>When using the `lang` or `country` parameters, the user will always have the option to override this and select a langauge or country of their preference.</Tip>

### Step 2: Create the Payment Authorisation request

Call the [`Create Payment Authorisation`](api-reference/endpoint/create) endpoint to create a payment authorisation request and generate a unique `uuid` that you then insert into the `id` parameter of the
Klyme HTML element.

```bash Request Example theme={null}
curl --location 'http://api.klyme.io/api/v1/payment-auth-requests' \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --header 'Authorization: ••••••' \
  --data-urlencode 'merchantUuid=YOUR MERCHANT UUID' \
  --data-urlencode 'amount=10.00' \
  --data-urlencode 'currency=EUR' \
  --data-urlencode 'redirectUrl=https://your-redirect-url.com'
```

```json Response Example theme={null}
{ "uuid": "2ae4c7bb76b6e8a323a12ecea143e613" }
```

We **recommend** recording all generated `uuid's` as each one serves as a unique Klyme reference for its corresponding payment.

<Tip>The Klyme Widget is reactive and renders when it detects a change to the `id` parameter.</Tip>

If everything is set up correctly, you should see something similar to the following.

![klyme-widget-flow-loaded](https://storage.googleapis.com/klyme-misc/klyme-widget-flow-loaded.png)

<Tip>At this stage, no further action is required — Klyme will handle the entire payment flow from here.</Tip>

### Payment Status

Once a user has gone through the entire payment flow and successfully authorised a payment with their bank, they will be redirected back to the
`redirectUrl` you will have specified in **Step 2** when making the call to [`Create Payment Authorisation`](api-reference/endpoint/create).

When a user is redirected back to the specified `redirectUrl`, there will be  **three** query parameters appended to it.

`uuid` `status` `status_code`

**Example:**

> [https://your-redirect-url.com?uuid=eb2de72be97c464a3c293a57fe7a8f64\&status=1\&status\_code=ACCC](https://your-redirect-url.com?uuid=eb2de72be97c464a3c293a57fe7a8f64\&status=1\&status_code=ACCC)

You can use the `status` parameter to determine whether the payment was successful, failed or has gone into a pending state.

* Status `1` implies the payment flow has been successful and the funds have left the users bank account.
* Status `0` implies the payment was rejected or failed due to technical issues on the banks side.
* Status `2` implies the payment is in a pending state and the customers bank has further checks to complete before the payment is authorised.

<Tip>You can learn more about Status Codes [here](/essentials/status-codes)</Tip>

#### Complete Payload (Optional)

If you wish to receive the complete payload of a payment, you have two options. Either leverage our [Webhook Notifications](/configuration/webhook-notifications) functionality or you can make
an API call to our [`Get Payment Status`](api-reference/endpoint/get) endpoint.

If you choose not to use webhook notifications, you may wish to monitor the status of a payment until it has reached the `COMPLETED` or `FAILED` state by polling the [`Get Payment Status`](api-reference/endpoint/get) endpoint.

<Tip>You can learn more about webhook Notifications [here](/essentials/webhook-notifications)</Tip>
