Skip to main content

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

​
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.
index.html
<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>
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.

​
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: be es fr it nl pt auto
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.

​
Step 2: Create the Payment Authorisation request

Call the Create Payment Authorisation 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.
Request Example
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'
Response Example
{ "uuid": "2ae4c7bb76b6e8a323a12ecea143e613" }
We recommend recording all generated uuid's as each one serves as a unique Klyme reference for its corresponding payment.
The Klyme Widget is reactive and renders when it detects a change to the id parameter.
If everything is set up correctly, you should see something similar to the following. klyme-widget-flow-loaded
At this stage, no further action is required — Klyme will handle the entire payment flow from here.

​
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. 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
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.
You can learn more about Status Codes here

​
Complete Payload (Optional)

If you wish to receive the complete payload of a payment, you have two options. Either leverage our Webhook Notifications functionality or you can make an API call to our Get Payment Status 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 endpoint.
You can learn more about webhook Notifications here