3. Authorize

When the customer presses the buy/continue* submit button on your checkout page, you call our Javascript SDK to authorize the order at Klarna and receive an authorization token in return. The authorization token gives you the flexibility to authorize and place the order in separate steps. 

*If you have a

  • single-page checkout, you call authorize when the consumer presses the buy button
  • multiple-page checkout, you call authorize when the consumer presses the continue/review order button

Placing the final order can then be done either immediately, or on a separate page. This is entirely up to you.

 

3.1 Authorize the order

Call authorize in the JavaScript SDK. In this call, you also pass the billing (and optionally shipping) address. Klarna will use all information that has been collected during this session when authorizing the order.

Klarna.Credit.authorize({
  purchase_country: "GB",
  purchase_currency: "GBP",
  locale: "en-GB",
  billing_address: {
    given_name: "John",
    family_name: "Doe",
    email: "john@doe.com",
    title: "Mr",
    street_address: "13 New Burlington St",
    street_address2: "Apt 214",
    postal_code: "W13 3BG",
    city: "London",
    region: "",
    phone: "01895808221",
    country: "GB"
  },
  shipping_address: {
    given_name: "John",
    family_name: "Doe",
    email: "john@doe.com",
    title: "Mr",
    street_address: "13 New Burlington St",
    street_address2: "Apt 214",
    postal_code: "W13 3BG",
    city: "London",
    region: "",
    phone: "01895808221",
    country: "GB"
  },
  order_amount: 10,
  order_tax_amount: 0,
  order_lines: [{
    type: "physical",
    reference: "19-402",
    name: "Battery Power Pack",
    quantity: 1,
    unit_price: 10,
    tax_rate: 0,
    total_amount: 10,
    total_discount_amount: 0,
    total_tax_amount: 0,
    product_url: "https://www.estore.com/products/f2a8d7e34",
    image_url: "https://www.exampleobjects.com/logo.png"
  }],
  customer: {
    date_of_birth: "1970-01-01",
    gender: "male"
  },
 }, function(res) {
  console.debug(res);
})
Klarna.Credit.authorize({
  purchase_country: "GB",
  purchase_currency: "GBP",
  locale: "en-GB",
  billing_address: {
    given_name: "John",
    family_name: "Doe",
    email: "john@doe.com",
    title: "Mr",
    street_address: "13 New Burlington St",
    street_address2: "Apt 214",
    postal_code: "W13 3BG",
    city: "London",
    region: "",
    phone: "01895808221",
    country: "GB"
  },
  shipping_address: {
    given_name: "John",
    family_name: "Doe",
    email: "john@doe.com",
    title: "Mr",
    street_address: "13 New Burlington St",
    street_address2: "Apt 214",
    postal_code: "W13 3BG",
    city: "London",
    region: "",
    phone: "01895808221",
    country: "GB"
  },
  order_amount: 10,
  order_tax_amount: 0,
  order_lines: [{
    type: "physical",
    reference: "19-402",
    name: "Battery Power Pack",
    quantity: 1,
    unit_price: 10,
    tax_rate: 0,
    total_amount: 10,
    total_discount_amount: 0,
    total_tax_amount: 0,
    product_url: "https://www.estore.com/products/f2a8d7e34",
    image_url: "https://www.exampleobjects.com/logo.png"
  }],
  customer: {
    date_of_birth: "1970-01-01",
    gender: "male"
  },
 }, function(res) {
  console.debug(res);
})

There is no need to provide fields that have already been provided previously during the session, unless the content in those fields has changed. That said, providing the same data again will not break anything. The example above contains a full request, which may be good practice to be sure the most up to date content is being authorized. 

User interaction during the authorize call

When authorizing the order, Klarna conducts a full risk assessment. Therefore, from the point where you call authorize until you receive the callback you must:

  1. Avoid sending another authorization call (e.g. disable the buy button from being clicked again)
  2. Show to the consumer that the order is being processed (e.g. by showing a loading spinner)
  3. Prevent consumer from changing order or billing details (e.g. lock the input fields on your page)

The callback is typically received within seconds, but may take up to a minute or so in case a consumer sign-up is required when the user interacts with the widget.

3.2 Act on the callback from the authorize call

When the widget has processed the authorization, the callback will be executed. 

The callback function parameter is an object containing the following properties

  • approved (true/false) - the authorization result, approved or denied
  • show_form (true/false) - whether the Klarna Widget should be displayed or hidden
  • authorization_token - a token which allows you to place the order via a server side call, if the authorization was approved

Order approved

If approved: true, then Klarna has approved the authorization of credit for this order.

{
   authorization_token: "b4bd3423-24e3", 
   approved: true, 
   show_form: true
}

The authorization_token allows you to complete the order by the server side place order call. The token is valid for 60 minutes. During this time, the authorization is guaranteed. In case the place order is performed beyond the expiry, Klarna will try to re-authorize the order but cannot guarantee a successful outcome.

  • Best practice tip: You may store the authorization_token in a hidden form field and submit it to the backend with the "buy" / "Place order" form submit button.

 

Order not approved

If approved: false, Klarna cannot approve the purchase. There are now two options

More information needed

If show_form: truean element is incorrect or missing, such as the billing email address. The widget will display an error message to the consumer, asking them to correct it before you re-authorize the order. You may use the error message in the callback object to highlight a particular entry field on your page.

This may also happen if the consumer aborts the data collection / account sign-up steps with Klarna's Widget. 

Order declined

If show_form: falsethe order is declined. The Klarna payment widget should be hidden and the user should select another payment method. 

Read more about your options to handle declines in the section about use of form true/false


What's next?

Using the authorization token, you will now call the server side REST API to place the order