Klarna Pay Now integration with Chargebee.js

Klarna Pay Now is a popular online banking method in Europe and a convenient payment method for your customers.

Klarna Pay Now is available in the following countries:

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 about configuring Klarna Pay Now via Adyen in Chargebee.

The following are the prerequisites for setting up the integration:

Enable Klarna Pay Now via Adyen
Configure Smart routing

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

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

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"

Initiate the above step as request from your frontend.

Frontend code:

  function createPaymentIntent() {
	return fetch('/payment-intents', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		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;
	});
}

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.

Pass userEmail, country, and lineItems in paymentInfo. If you also pass cardBillingAddress, include firstName and lastName. For the complete paymentInfo reference, see Klarna Pay Now handlePayment().

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_98k2m1n4p5q6",
                    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.
	});
});

On successful authorization, the payment_intent status turns to authorized and Chargebee redirects you back to your website (payment authorization page).

Use webhooks for production

Use webhooks for production use, instead of making the subscription creation request from the frontend, it's more secure and reliable to respond to webhooks from Chargebee on the backend. Listen to the payment_intent_updated event via webhooks and create the subscription when the payment_intent.status is authorized.

Create a subscription (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST \
     -u {site_api_key}: \
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>" \
     -d subscription_items[item_price_id][0]="basic-EUR" \
     -d subscription_items[billing_cycles][0]=2 \
     -d subscription_items[quantity][0]=1 \
     -d subscription_items[item_price_id][1]="day-pass-EUR" \
     -d subscription_items[unit_price][1]=100