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
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.
- Log in or sign up to Rebilly.
- Obtain your organization ID and website ID:
- In the left navigation bar, press Settings .
- In the Management section, press My organization & websites.
- In the Organization details section, note the ID value.
- In the Website section, note the ID value.
- Obtain your publishable API key:
- In the left navigation bar, press Automations .
- In the Development section, press API keys.
- Optionally, if you have not created a publishable key:
- In top right of the screen, press Create API key.
- In the API key type section, select Publishable.
- Optionally, in the Organizations dropdown, select the organizations that can use the API key.
- Optionally, in the Allowed IPs field, enter the IP addresses that are permitted to use the API key.
- Press Save API key.
- Go to the API keys page.
- 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.
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.
Include the FramePay script
This exposes FramePay in the global JS scope as Framepay.
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.
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.
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.
Rebilly data
Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.
Transaction data
Provide the transaction data. Klarna requires amount and currency.
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(...)
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).
Basic set up complete
To learn more about Klarna and FramePay, see Configuration reference.
- 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>1Framepay.initialize({2 publishableKey: 'pk_sandbox_123',3 organizationId: 'org-123',4 websiteId: 'website-123',5 transactionData: {6 currency: 'USD',7 amount: 10,8 },9});10Framepay.on('ready', (data) => {11 const klarna = Framepay.klarna.mount('#klarna-widget-mounting-point');12});13try {14 const form = document.getElementById('klarna-form');15 const paymentToken = await Framepay.createToken(form, {16 method: 'klarna-payments'17 });18 console.log(paymentToken);19} catch(error){20 console.log('❌ Create token error:', error);21}Interactive example
This is an interactive example of a basic checkout form which uses FramePay to tokenize payments that are made using Klarna BNPL.