# Klarna for mobile app Accept Klarna payments on your app with [Flow for mobile](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app.md), our pre-built, customizable payment user interface that you can embed directly into your mobile application. Flow enables you to accept payments using Checkout.com's global network of payment methods with a single integration. --- ## How it works 1. The customer opens the checkout screen. 2. You perform a server-side request to create a payment session. 3. You use the payment session data on the client side to create and render Flow for mobile. 4. Flow for mobile displays the available payment methods to the customer. When the customer selects Klarna, Flow renders Klarna's widget, powered by the Klarna Mobile SDK, where the customer reviews and authorizes the payment. 5. If Klarna requires an out-of-app step, for example logging in to their bank or the Klarna app, it switches out of your app and returns to it using the return URL you configured. 6. Flow for mobile completes the payment request and handles any additional actions required. 7. You receive a webhook notifying you of the payment status. --- ## Before you start Make sure you have a [test account](https://www.checkout.com/get-test-account) with Checkout.com. Create a [public key and a secret key](https://www.checkout.com/docs/resources/api-authentication/api-keys.md) from the [Dashboard](https://dashboard.checkout.com), with the following key scopes: - Public key – `payment-sessions:pay` and `vault-tokenization` - Secret key – `payment-sessions` To receive webhooks for the [payment events](https://www.checkout.com/docs/developer-resources/event-notifications/event-types.md#Gateway), [configure your webhook server](https://www.checkout.com/docs/developer-resources/event-notifications/receive-webhooks/configure-your-webhook-server.md). Integrate with [Flow for mobile](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app/get-started-with-flow-for-mobile.md) before continuing. Ensure your merchant account has Klarna enabled. To enable Klarna, contact your account manager or [request support](https://dashboard.checkout.com/support/new?topic=case_account_management_and_access&issue=issue_account_changes). Klarna availability, supported currencies, and supported billing countries vary by market. Confirm your Klarna coverage and the currency and country pairing you should send on the payment session. --- ## Add the SDK dependency **Android** Klarna ships as its own Gradle module, `payment-methods-klarna`. In your project-level `build.gradle`, add the required repositories. The Klarna Mobile SDK isn't on Maven Central, so add Klarna's Maven repository. Scope the repository to the Klarna SDK groups with `exclusiveContent`, so it's only ever used to resolve Klarna artifacts: ```gradle repositories { mavenCentral() maven { url = uri("https://jitpack.io") } maven { url = uri("https://maven.fpregistry.io/releases") } exclusiveContent { forRepository { maven { url = uri("https://x.klarnacdn.net/mobile-sdk/") } } filter { includeGroup("com.klarna.mobile") includeGroup("com.klarna.mobile.sdk") } } } ``` In your app-level `build.gradle`, add the following dependencies: ```gradle dependencies { implementation('com.checkout:checkout-android-components:$latest_version') implementation('com.checkout:checkout-android-components-payment-methods-klarna:$latest_version') } ``` The Klarna Mobile SDK (`com.klarna.mobile:sdk`) is pulled in transitively by the `payment-methods-klarna` module. **iOS** Klarna ships as its own optional Swift package product, `CheckoutKlarna`, in addition to `CheckoutComponents`, because it pulls in the Klarna Mobile SDK. If you have already added the `checkout-ios-components` package: 1. In Xcode, select your project, then select the _Package Dependencies_ tab. 2. Find `checkout-ios-components` and select the pencil icon to edit it. 3. Select `CheckoutKlarna` (in addition to `CheckoutComponents`) in the product list and confirm. If you are adding the package for the first time: 1. Select _File_ > _Add Package Dependencies_. 2. Enter the `checkout-ios-components` repository URL. 3. Select both `CheckoutComponents` and `CheckoutKlarna` from the product list. 4. Select _Add Package_. The Klarna Mobile SDK is resolved automatically via Swift Package Manager when you add `CheckoutKlarna`. You don't need to add it manually. Register your return URL scheme. Klarna returns to your app after any out-of-app step using a URL you supply. Register that URL's scheme in your app's `Info.plist` under `CFBundleURLTypes`. For example, register a scheme like `your-app`, so a return URL such as `your-app://klarna` can reopen your app. --- ## Create a new payment session `Server side` When the customer is ready to pay, send a server-side request to securely create a `PaymentSession` object. The `PaymentSession` contains the information required to handle all steps of the payment flow. > **Note** > > Do not embed your secret key in your client-side code. Call the [Create a Payment Session](https://api-reference.checkout.com/tag/Flow/#operation/CreatePaymentSession) endpoint. > **Information** > > Your base URL's `{prefix}` value is unique to your account and environment. To learn how to retrieve your base URLs for the sandbox and production environments, see [API endpoints](https://www.checkout.com/docs/developer-resources/api/api-endpoints.md). **Production** `POST` `https://{prefix}.api.checkout.com/payment-sessions` **Sandbox** `POST` `https://{prefix}.api.sandbox.checkout.com/payment-sessions` In your request, provide the following: - `customer.name` - `items[]`, including the `total_amount` for each item - `billing.address.country`, set to a Klarna-supported billing country - `currency`, set to the Klarna-supported currency for that country > **Warning** > > Klarna only supports the local currency of each country. The `currency` value must map to the `billing.address.country` value. For example, if `billing.address.country` is `SE`, `currency` must be `SEK`. If any other value is used, including `EUR`, Klarna doesn't render as a payment option in Flow for mobile. For the full list of supported country and currency pairs, see Klarna's [purchase countries, currencies, and locales](https://docs.klarna.com/acquirer/klarna/get-started/data-requirements/puchase-countries-currencies-locales) documentation. ### Request example ```json { "amount": 1000, "currency": "EUR", "reference": "ORD-123A", "display_name": "Online shop", "payment_type": "Regular", "billing": { "address": { "country": "DE" } }, "customer": { "name": "Jia Tsang", "email": "jia.tsang@example.com" }, "items": [ { "reference": "0001", "name": "Gold Necklace", "quantity": 1, "unit_price": 1000, "total_amount": 1000 } ], "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` ### Response example ```json { "id": "ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ", "payment_session_secret": "pss_9823241e-2cec-4c98-b23d-7b29ow4e2e34" } ``` The payment session response also determines which payment methods can be displayed to the customer. The response is determined by the customer's device and region. --- ## Enable Klarna in Flow for mobile Enable Klarna in Flow for mobile when creating a `CheckoutComponents` instance. **Android** Pass `Klarna.NAME` when creating a flow or standalone component. `Klarna.NAME` is a pre-built `PaymentMethodName("klarna")` constant exposed by the SDK: ```kotlin import com.checkout.components.interfaces.component.ComponentOption import com.checkout.components.paymentmethods.klarna.Klarna import com.checkout.components.paymentmethods.klarna.KlarnaConfiguration import com.checkout.components.paymentmethods.klarna.configuration.CheckoutKlarnaTheme // Include Klarna in a Flow component (renders all available payment methods) val flow = checkoutComponents.create(ComponentName.Flow) // Or create a standalone Klarna component val klarnaComponent = checkoutComponents.create( Klarna.NAME, ComponentOption( paymentMethodConfiguration = mapOf( Klarna.NAME to Klarna.Configuration( theme = CheckoutKlarnaTheme.LIGHT // LIGHT (default) or DARK ) ) ) ) ``` Render the component in Compose UI with `Render()` or in a View container with `provideView()`. **iOS** Pass the Klarna provider to the `providers:` parameter when you create a flow component. Klarna's accessor is a function that takes the return URL Klarna uses to come back to your app, and the color theme the Klarna widget renders with (`.light` or `.dark`): ```swift import CheckoutComponents import CheckoutKlarna let sdk = CheckoutComponents(configuration: configuration) let flow = try sdk.create( .flow( options: [.card()], providers: .init( providers: [ CheckoutKlarna.Provider.klarna( returnURL: URL(string: "your-app://klarna")!, theme: .light ) ] ) ) ) ``` Additionally, if you only want to render Klarna, you can create a standalone component: ```swift let klarna = try sdk.create( CheckoutKlarna.Provider.klarna( returnURL: URL(string: "your-app://klarna")!, theme: .light ) ) ``` > **Note** > > The `returnURL` scheme (`your-app` above) must be one your app registers in its `Info.plist`, so Klarna can switch back to your app after an out-of-app step. The `theme` parameter takes `CheckoutKlarna.Theme`, `.light` or `.dark`. --- ## Handle the payment response `Client side` If Klarna needs an out-of-app step, it returns to your app using the return URL you configured, and Flow for mobile completes the payment. Depending on the payment outcome, Checkout.com redirects the customer to the `success_url` or `failure_url` you specified when you created the `PaymentSession`. We send you a webhook notifying you of changes to the payment's status. Wait for the webhook callback before you start your order fulfillment process. For payments submitted with Flow, the `PaymentSession` ID appears in the webhook payload's `data.metadata.cko_payment_session_id` field. --- ## Next steps **[Customize Flow for mobile](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app/get-started-with-flow-for-mobile.md)** Learn how to customize Flow for mobile. **[Flow for mobile library reference](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app/flow-for-mobile-library-reference.md)** See the configuration options and error handling steps for Flow for mobile.