# Integrate Klarna Pay Now
Klarna Pay Now (opens new window) is a popular online banking method in Europe and a convenient payment method for your customers.
- Germany
- Austria
- Netherlands
- Sweden
This tutorial guides you to integrate Klarna Pay Now payments on your end using Chargebee.js and creating a subscription after the user checks out.
# Gateway prerequisites
Connect to a gateway that accepts Klarna Pay Now payments to your Chargebee instance. Chargebee supports Klarna Pay Now payments through the below gateways:
- Klarna Pay Now via Adyen. Learn more (opens new window) about configuring Klarna Pay Now via Adyen in Chargebee.
The following are the prerequisites for setting up the integration:
- Enable Klarna Pay Now (opens new window) via Adyen
- Configure Smart routing (opens new window)
# Setting up Chargebee JS
# Inserting chargebee.js script in your application
Include the following script in your HTML page. You need to do this only once per page.
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
# Initializing a Chargebee instance
Inside your JavaScript code, initialize chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.
Example:
var cbInstance = Chargebee.init({
site: "site-name", // your test site
domain: "https://mybilling.acme.com" // this is an optional parameter.
publishableKey: "test__"
})
2
3
4
5
Learn more about initializing a Chargebee instance.
# Create a Payment Intent
You should create a payment intent before submitting the form to authorize the payments.
payment_intent
performs the essential function of tracking different events involved in a transaction. This includes:
- Automatically changing its status based on the outcome of authorization and capture events.
- Automatically refunding in case of an error post-payment.
A payment_intent
can be created at your server-side using create a payment intent API (opens new window) and returned to the client side. The payment method handler uses the created payment_intent
internally to perform authorization.
Here's the sample code to create a payment_intent
.
TIP
This must be done from your backend to avoid exposing sensitive data.
Example
curl https://{site-name}.chargebee.com/api/v2/payment_intents
-u {fullaccess_api_key}:
-d amount=500
-d currency_code="EUR"
-d payment_method_type="klarna_pay_now"
2
3
4
5
TIP
Initiate the above step as request from your front end.
Front end code:
function createPaymentIntent() {
return fetch('/payment-intents', {
method: 'POST',
body: JSON.stringify({
amount: 500,
currency_code: 'EUR',
payment_method_type: 'klarna_pay_now'
})
}).then(function(response) {
return response.json();
}).then(function(responseJson) {
return responseJson.payment_intent;
});
}
2
3
4
5
6
7
8
9
10
11
12
13
14
# Authorize payment intent
Follow these steps to integrate Klarna Pay Now on your website:
# 1. Set up Klarna Pay Now:
load
Klarna Pay Now integration using cbInstance.load("klarna_pay_now")
.
# 2. Handle Payment:
Pass payment method name (klarna_pay_now
), payment intent, and other applicable payment information mandated by the gateway as input parameters to the cbInstance.handlePayment()
function, as this enables the function to handle Klarna Pay Now payments.
# Supported paymentInfo
Parameters
TIP
Parameters marked with * are mandatory inputs.
Refer below to see the entire list of supported parameters that you can send for Klarna Pay Now:
Klarna Pay Now
Supported parameters in paymentInfo |
---|
paymentInfo ↳country* |
paymentInfo ↳userEmail* |
paymentInfo ↳lineItems* [ {amount* description* unitAmount* taxAmount* id* quantity* }, {…}] |
paymentInfo ↳cardBillingAddress ↳ firstName;* lastName;* phone; addressLine1;* addressLine2;* addressLine3;* city; state; stateCode; countryCode;* zip; |
Sample Code
cbInstance.load("klarna_pay_now").then(() => {
cbInstance.handlePayment("klarna_pay_now", {
paymentIntent: () => {
return createPaymentIntent();
},
paymentInfo: {
userEmail: "john.doe@gmail.com",
country: "DE",
lineItems:[{
amount:2500,
description : "shoes",
taxAmount:0,
unitAmount:2500,
id: "li_324r3r3rd32d",
quantity:1
},{
amount:2500,
description : "socks",
taxAmount:0,
unitAmount:2500,
id: "li_324r3r3rd32d",
quantity:1
}
]
}
}).then(intent => {
// SUCCESS!!! payment_intent is authorised.
var response = fetch('/subscriptions', {
method: 'POST',
body: JSON.stringify({
paymentIntentId: intent.id,
plan_id: 'pro_plan',
plan_quantity: 1,
billingAddress: {
...
}, // provide billing address
customer: {
...
} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
})
}).then(function(response) {
return response.json();
});
}).catch(err => {
// OOPS!!! payment_intent is not authorised.
});
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
On successful authorization, the payment_intent
status turns to authorized and Chargebee redirects you back to your website (payment authorization page).
# Create a subscription
Pass the ID of the successfully authorized payment_intent
to Chargebee’s create a subscription API (opens new window)
# Create a subscription
Pass the ID of the successfully authorized payment_intent
to Chargebee’s create a subscription API (opens new window).
- Curl
![](/checkout-portal-docs/assets/images/copy.png)