> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# provide

This method allows you get a new instance of `KlarnaComponent`.

```typescript TYPESCRIPT theme={"dark"}
async provide(props: KlarnaManagerProps): Promise<KlarnaComponent>
```

## Parameters

**Parameters**

**props** `KlarnaManagerProps` *required*

Object that provides the payment menthod type and callback functions for
handling steps, errors and validation.

**Properties**

**primerSessionIntent** `PrimerSessionIntent` *required*

Set the preferred session intent when showing paymentMethodType.

**Properties**

**PrimerSessionIntent.CHECKOUT**

**PrimerSessionIntent.VAULT**

**onStep** `(data: KlarnaPaymentStep) =\> void`

Called whenever the component emits a new step. This usually happens when calling [start](#param-start) or [submit](#param-submit) or whenever the component collects data.

**Parameters**

**PaymentSessionCreated**

A type representing the created payment session.

**Properties**

**stepName** `paymentSessionCreated`

The name of this component step.

**paymentCategories** `KlarnaPaymentCategory[]` *required*

The list of available Klarna payment categories.

**KlarnaPaymentCategory**

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**PaymentViewLoaded**

A type that indicates that the payment view is loaded and ready to be
displayed.

**Properties**

**stepName** `paymentViewLoaded`

The name of this component step.

**PaymentSessionAuthorized**

A type representing the authorized payment session.

**Properties**

**stepName** `paymentSessionAuthorized`

The name of this component step.

**isFinalized** `boolean` *required*

Represents the state of the finalization.

**PaymentSessionFinalized**

A type representing the finalized payment session.

**Properties**

**stepName** `paymentSessionFinalized`

The name of this component step.

This method will be called when an error occurs. It may return `PrimerCheckoutData` if the error occurs after the payment creation.

> [!NOTE]
>
> Please note, that if you `override` this method, you *must* call the `errorHandler` to finalize the flow.

**Properties**

**error** `PrimerError` *required*

**Properties**

**errorId** `String` *required*

A unique error identifier.

**errorCode** `String?`

A unique error code.

**description** `String` *required*

A error description.

**checkoutData** `PrimerCheckoutData`

**Properties**

**payment** `IPrimerCheckoutDataPayment`

**Properties**

**id** `string`

Primer's unique identifier for the payment.

**orderId** `string`

Your order identifier as provided in the client session.

**paymentFailureReason** `PrimerPaymentErrorCode`

Can be either `payment-failed` which is an error from the PSP side, or `cancelled-by-customer` which means the failure initiated on the customer side. I.e. cancelling a 3DS flow.

**additionalInfo** `object`

Custom information, that depends on the payment method.

**Variations**

**XenditCheckoutVoucherAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**couponCode** `String` *required*

**retailerName** `String` *required*

**PromptPayCheckoutAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**qrCodeUrl** `String?`

**qrCodeBase64** `String` *required*

**MultibancoCheckoutAdditionalInfo**

**Properties**

**expiresAt** `String` *required*

**entity** `String` *required*

**reference** `String` *required*

**handler** `PrimerErrorHandler`

**Methods**

**showErrorMessage(errorMessage: String | null)**

Call with your custom error message.

**onInvalid** `(data: PrimerInvalidComponentData\<KlarnaPaymentValidatableData\>) =\> void`

Called to indicate that the component data was considered invalid during validation.

**Parameters**

**PrimerInvalidComponentData\<KlarnaPaymentValidatableData>**

Interface that indicates that the data has been considered invalid after validation.

**Properties**

**data** `KlarnaPaymentValidatableData`

The data that failed validation.

**KlarnaPaymentOptions**

Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns)

**Properties**

**validatableDataName** `klarnaPaymentOptions`

The name of this component-validatable data.

**returnIntentUrl** `string`

Url used by third-party Android apps to build the intent for returning to the app.

**paymentCategory** `KlarnaPaymentCategory`

Payment category required for session creation.

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**KlarnaPaymentFinalization**

**Properties**

**validatableDataName** `klarnaPaymentFinalization`

The name of this component-validatable data.

**name** `finalizePayment`

**errors** `PrimerValidationError[]`

A list of `PrimerValidationError` explaining why the data is considered invalid.

**PrimerValidationError\[]**

**PrimerValidationError**

**Properties**

**errorId** `string`

A unique error identifier.

**description** `string`

A error description.

**diagnosticsId** `string`

A unique diagnostics id for the given error.

**onValid** `(data: PrimerValidComponentData\<KlarnaPaymentValidatableData\>) =\> void`

Called to indicate that the component data was successfully validated.

**Parameters**

**PrimerValidComponentData\<KlarnaPaymentValidatableData>**

Interface that indicates that the data has been successfully validated.

**Properties**

**data** `KlarnaPaymentValidatableData`

The successfully validated data.

**KlarnaPaymentOptions**

Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns)

**Properties**

**validatableDataName** `klarnaPaymentOptions`

The name of this component-validatable data.

**returnIntentUrl** `string`

Url used by third-party Android apps to build the intent for returning to the app.

**paymentCategory** `KlarnaPaymentCategory`

Payment category required for session creation.

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**KlarnaPaymentFinalization**

**Properties**

**validatableDataName** `klarnaPaymentFinalization`

The name of this component-validatable data.

**name** `finalizePayment`

**onValidating** `(data: PrimerValidatingComponentData\<KlarnaPaymentValidatableData\>) =\> void`

Called to indicate that the component data is in the process of being validated.

**Parameters**

**PrimerValidatingComponentData\<KlarnaPaymentValidatableData>**

Interface that indicates that data is currently in the process of being validated.

**Properties**

**data** `KlarnaPaymentValidatableData`

The data being validated.

**KlarnaPaymentOptions**

Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns)

**Properties**

**validatableDataName** `klarnaPaymentOptions`

The name of this component-validatable data.

**returnIntentUrl** `string`

Url used by third-party Android apps to build the intent for returning to the app.

**paymentCategory** `KlarnaPaymentCategory`

Payment category required for session creation.

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**KlarnaPaymentFinalization**

**Properties**

**validatableDataName** `klarnaPaymentFinalization`

The name of this component-validatable data.

**name** `finalizePayment`

**onValidationError** `(data: PrimerComponentDataValidationError\<KlarnaPaymentValidatableData\>) =\> void`

Called to indicated an error that occurred during component data validation.

**Parameters**

**PrimerComponentDataValidationError\<KlarnaPaymentValidatableData>**

Interface that represents an error that occurred during the validation process.

**Properties**

**data** `KlarnaPaymentValidatableData`

The data for which an error ocurred during validation.

**KlarnaPaymentOptions**

Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns)

**Properties**

**validatableDataName** `klarnaPaymentOptions`

The name of this component-validatable data.

**returnIntentUrl** `string`

Url used by third-party Android apps to build the intent for returning to the app.

**paymentCategory** `KlarnaPaymentCategory`

Payment category required for session creation.

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**KlarnaPaymentFinalization**

**Properties**

**validatableDataName** `klarnaPaymentFinalization`

The name of this component-validatable data.

**name** `finalizePayment`

**error** `PrimerError`

The `PrimerError` that ocurred during the validation attempt.

**PrimerError**

**Properties**

**errorId** `string` *required*

A unique error identifier.

**errorCode** `string`

A unique error code.

**description** `string` *required*

A error description.

**recoverySuggestion** `string`

A recovery suggestion for the given error. In case it's present, use it to try
to recover from error.

**diagnosticsId** `string`

A unique diagnostics id for the given error.

## Returns

An instance of `KlarnaComponent`:

**KlarnaComponent**

**start()**

Initialize the component by calling the `start` function. This method should be called only once.

**submit()**

Call `submit` function in order to process collected data and move component to next state.

**handlePaymentOptionsChange(paymentOptions: KlarnaPaymentOptions)**

Update component with options to use when initializing the Klarna payment view.

To validate the collected data, you can refer to the appropriate
[KlarnaManagerProps](#param-props)
callback functions.

**Parameters**

**KlarnaPaymentOptions**

Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns)

**Properties**

**validatableDataName** `klarnaPaymentOptions`

The name of this component-validatable data.

**returnIntentUrl** `string`

Url used by third-party Android apps to build the intent for returning to the app.

**paymentCategory** `KlarnaPaymentCategory`

Payment category required for session creation.

**Properties**

**identifier** `string` *required*

ID of the payment method category to be used while loading the payment view. The possible values are:

<ul>
  <li>klarna</li>
  <li>pay\_later</li>
  <li>pay\_now</li>
  <li>pay\_over\_time</li>
  <li>direct\_bank\_transfer</li>
  <li>direct\_debit</li>
</ul>

**name** `string` *required*

Name of the payment method category. These names are dynamic depending on what payment method is in the category.

**descriptiveAssetUrl** `string` *required*

URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**standardAssetUrl** `boolean` *required*

URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.

**finalizePayment()**

Finalize the payment.

To validate the collected data, you can refer to the appropriate
[KlarnaManagerProps](#param-props)
callback functions.

**cleanUp()**

Tear down the Klarna component. Call this after a payment completes — or before initiating another — to support consecutive Klarna payments within the same app session.

```typescript TYPESCRIPT theme={"dark"}
cleanUp(): Promise<void>
```

## Example

```typescript TYPESCRIPT theme={"dark"}
// 👇 Add this
const klarnaManagerProps: KlarnaManagerProps = {
  primerSessionIntent: PrimerSessionIntent.CHECKOUT,
  onStep: (data: KlarnaPaymentStep) => {
    // Show loading indicator, render categories or finalize payment.
    switch (data.stepName) {
      case "paymentSessionCreated":
        // Render categories
        break;

      case "paymentViewLoaded":
        // Render payment view
        break;

      case "paymentSessionAuthorized":
        if (data.isFinalized) {
          // Finalize payment
        }
        break;
      case "paymentSessionFinalized":
        // ...
        break;
    }
  },
  onError: (error: PrimerError) => {
    // An error that occurred during the component's operation.
  },
  onInvalid: (
    data: PrimerInvalidComponentData<KlarnaPaymentValidatableData>
  ) => {
    // Data was considered invalid during validation.
    switch (data.data.validatableDataName) {
      case "klarnaPaymentOptions":
        // ...
        break;
      case "klarnaPaymentFinalization":
        // ...
        break;
    }
  },
  onValid: (data: PrimerValidComponentData<KlarnaPaymentValidatableData>) => {
    // Data was successfully validated.
    switch (data.data.validatableDataName) {
      case "klarnaPaymentOptions":
        // ...
        break;
      case "klarnaPaymentFinalization":
        // ...
        break;
    }
  },
  onValidating: (
    data: PrimerValidatingComponentData<KlarnaPaymentValidatableData>
  ) => {
    // Data is in the process of being validated.
    switch (data.data.validatableDataName) {
      case "klarnaPaymentOptions":
        // ...
        break;
      case "klarnaPaymentFinalization":
        // ...
        break;
    }
  },
  onValidationError: (
    data: PrimerComponentDataValidationError<KlarnaPaymentValidatableData>
  ) => {
    // Error occurred during data validation.
    switch (data.data.validatableDataName) {
      case "klarnaPaymentOptions":
        // ...
        break;
      case "klarnaPaymentFinalization":
        // ...
        break;
    }
  },
};
const klarnaManager = new KlarnaManager();
const klarnaComponent: KlarnaComponent = await klarnaManager.provide(
  klarnaManagerProps
);
```

## Lifecycle

To run consecutive Klarna payments in the same app session, call `klarnaComponent.cleanUp()` after a payment completes — or before starting another one.

```typescript TYPESCRIPT theme={"dark"}
useEffect(() => {
  return () => {
    klarnaComponent
      ?.cleanUp()
      .catch((err) => console.warn("Klarna cleanUp failed", err));
  };
}, [klarnaComponent]);
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.