Developer docs
/
FramePay
/
Get started
/
Set up Klarna BNPL
Last updated

These docs are intended for a developer audience.

Set up Klarna Buy Now Pay Later (BNPL)

This topic describes how to use FramePay to tokenize payments made using Klarna.

1. Obtain IDs and a publishable API key

  1. Obtain your organization ID and website ID:
    1. In the left navigation bar, click Settings .
    2. In the Management section, click My organization & websites.
    3. In the Organization details section, note the ID value.
    4. In the Website section, note the ID value. When you first log in to Rebilly, you create an organization as part of the setup process. A default website is created when a new organization is created. For more information, see Organizations and websites.
  2. Obtain your publishable API key:
    1. In the left navigation bar, click Automations .
    2. In the Development section, click API keys.
    3. Optionally, if you have not created a publishable key:
      1. In top right of the screen, click Add API.
      2. In the API key type section, select Publishable, then complete the form and click Save API key.
      3. Go back to the API Keys page.
    4. Select a publishable key and copy the Key value.

2. Set up Klarna

This step describes how to use FramePay to tokenize payments made using Klarna.

1

Initial set up

Set up the library and provide the HTML.

Include the FramePay stylesheet

This adds default styles to FramePay elements on the page.

HTML

Include the FramePay script

This exposes FramePay in the global JS scope as Framepay.

HTML

Create your checkout form

FramePay automatically gathers data from your checkout form.

To enable this, you must use data-rebilly attributes on your input fields.

HTML

Include the HTML mounting points

You must specify an empty HTML element where FramePay renders the Klarna widget. Edit your checkout form to add a new HTML element with a unique ID.

HTML
2

Configure FramePay

This step describes the basic set up for mounting.

Initialize

Initialize FramePay with a configuration object.

For more information, see FramePay configuration reference.

JavaScript

Rebilly data

Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.

JavaScript

Transaction data

Provide the transaction data. Klarna requires amount and currency.

JavaScript
3

Get the payment token

Mount FramePay onto your page and authorize to create a payment token.

Mount the Klarna widget

After initialization, mount the Klarna widget in the container element. - Framepay.on('ready', ...) - Framepay.klarna.mount(...)

JavaScript

Authorize the payment

Once the Klarna widget is mounted and the form is filled, you are able to authorize Klarna.

To request for Klarna authorization, call Framepay.createToken().

Requires method: 'klarna-payments' as part of the extraData payload.

This process:

  • Creates a pop-up where the customers verifies their information and selects BNPL options (if applicable).
  • Triggers the risk assessment process in Klarna. If authorization is declined by Klarna, FramePay will throw an error. If the collected form data is valid and Klarna authorizes the transaction, you will receive a successful result with a new payment token.

For more information, see Framepay.createToken(form).

JavaScript

Basic set up complete

To learn more about Klarna and FramePay, see Configuration reference.

Copy to clipboard
  • HTML
  • JavaScript
1<!doctype HTML>
2<HTML>
3<head>
4    <link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet">
5    <script src="https://framepay.rebilly.com/framepay.js"></script>
6</head>
7<body>
8<form id="klarna-form">
9    <input data-rebilly="emails" placeholder="Email Address" />
10    <input data-rebilly="firstName" placeholder="First Name" />
11    <input data-rebilly="lastName" placeholder="Last Name" />
12    <input data-rebilly="address" placeholder="Address Line 1" />
13    <input data-rebilly="address2" placeholder="Address Line 2" />
14    <input data-rebilly="city" placeholder="City" />
15    <input data-rebilly="postalCode" placeholder="Postcode" />
16    <input data-rebilly="region" placeholder="Region" />
17    <input data-rebilly="country" placeholder="Country" />
18    <input data-rebilly="phoneNumbers" placeholder="Phone Number" />
19    <div id="klarna-widget-mounting-point"></div>
20</form>
21</body>
22</HTML>

Interactive example

This is an interactive example of a basic checkout form which uses FramePay to tokenize payments that are made using Klarna BNPL.

To view console.log messages, click here to open a new window.