Set up a subscription with Klarna

Learn how to create and charge for a subscription with Klarna.

Use this guide to set up a subscription using Klarna as a payment method.

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

Create a product and price
Dashboard

Products represent the item or service you’re selling. Prices define how much and how frequently you charge for a product. This includes how much the product costs, what currency you accept, and whether it’s a one-time or recurring charge. If you only have a few products and prices, create and manage them in the Dashboard.

This guide uses a stock photo service as an example and charges customers a 15 USD monthly subscription. To model this:

Navigate to the Add a product page.
Enter a Name for the product.
Enter 15 for the price.
Select USD as the currency.
Click Save product.

After you create the product and the price, record the price ID so you can use it in subsequent steps. The pricing page displays the ID and it looks similar to this: price_G0FvDp6vZvdwRZ.

Create a subscription
Server-side

Create a subscription that has a price and customer with status of incomplete by providing the payment_behavior parameter with a value of default_incomplete. Set the payment_settings.save_default_payment_method=on_subscription parameter to save a payment method when a subscription is activated.

The response includes the subscription’s first Invoice. This contains the invoice’s payments, which includes a default PaymentIntent that Stripe generated for this invoice and the confirmation secret which you can use on the client side to securely complete the payment process instead of passing the entire PaymentIntent object. Get the PaymentIntent ID that you must use to confirm a payment from latest_invoice.payments. Return the latest_invoice.confirmation_secret.client_secret to the front end to complete payment.

Set up a trial

You can set up subscriptions with free trials. Learn how to delay payments on active subscriptions with trial periods.

Collect payment information
Client-side

Set up Stripe Elements

The Payment Element is automatically available as a feature of Stripe.js. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

subscribe.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <!-- content here -->
</body>

Create an instance of Stripe with the following JavaScript on your checkout page:

subscribe.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Add the Payment Element to your page

The Payment Element needs a place to live on your payment page. Create an empty DOM node (container) with a unique ID in your payment form.

subscribe.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Subscribe</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

When the form above has loaded, create an instance of the Payment Element and mount it to the container DOM node. In the create the subscription step, you passed the client_secret value to the frontend. Pass this value as an option when creating an instance of Elements.

subscribe.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

The Payment Element renders a dynamic form that allows your customer to select a payment method. The form automatically collects all necessary payments details for the payment method that they select.

Complete payment

Use stripe.confirmPayment to complete the payment using details from the Payment Element and activate the subscription. This creates a PaymentMethod and confirms the incomplete Subscription’s first PaymentIntent, causing a charge to be made.

Stripe redirects the customer to Klarna to complete the first payment and future payments. Provide a return_url to indicate where the user should be redirect after completing the checkout on Klarna.

subscribe.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: "https://example.com/order/123/complete",
      mandate_data: {
        customer_acceptance: {
          type: "online",
          online: {
            infer_from_client: true,
          }
        }
      }
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  }
});

After the user has been redirected, query the PaymentIntent to check its status. If the status is succeeded, the payment was successful and your subscription is now active.

Test your integration

Below, we have specially selected test data for the currently supported customer countries. In a sandbox, Klarna approves or denies a transaction based on the supplied email address.

	Approved	Denied
Date of Birth	10-07-1970	03-05-1994
First Name	Test	John
Last Name	Person-au	snow
Street	Wharf St	Silverwater Rd
House number	4	1-5
Postal Code	4877	2128
City	Port Douglas	Silverwater
Region	QLD	NSW
Phone	+61473752244	+61473763254
Email	customer@email.au	customer+denied@email.au

Two-step authentication

Any six digit number is a valid two-step authentication code. Use 999999 for authentication to fail.

Repayment method

Inside the Klarna flow, you can use the following test values to try various repayment types:

Type	Value
Direct Debit	DE11520513735120710131
Bank transfer	Demo Bank
Credit Card	Number: 4111 1111 1111 1111 CVV: 123 Expiration: any valid date in the future
Debit Card	Number: 4012 8888 8888 1881 CVV: 123 Expiration: any valid date in the future