> ## 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 export const parameters = "adyen-ideal"; This method allows you get a new instance of `KlarnaComponent`. ```typescript TYPESCRIPT theme={"dark"} async provide(props: KlarnaManagerProps): Promise ``` ## Parameters Object that provides the payment menthod type and callback functions for handling steps, errors and validation. Set the preferred session intent when showing paymentMethodType. void`}> Called whenever the component emits a new step. This usually happens when calling start or submit or whenever the component collects data. A type representing the created payment session. The name of this component step. The list of available Klarna payment categories. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. A type that indicates that the payment view is loaded and ready to be displayed. The name of this component step. A type representing the authorized payment session. The name of this component step. Represents the state of the finalization. A type representing the finalized payment session. 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. Please note, that if you `override` this method, you *must* call the `errorHandler` to finalize the flow. A unique error identifier. A unique error code. A error description. Primer's unique identifier for the payment. Your order identifier as provided in the client session. 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. Custom information, that depends on the payment method. Call with your custom error message. ) => void`}> Called to indicate that the component data was considered invalid during validation. `}> Interface that indicates that the data has been considered invalid after validation. The data that failed validation. Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns) The name of this component-validatable data. Url used by third-party Android apps to build the intent for returning to the app. Payment category required for session creation. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. The name of this component-validatable data. A list of `PrimerValidationError` explaining why the data is considered invalid. A unique error identifier. A error description. A unique diagnostics id for the given error. ) => void`}> Called to indicate that the component data was successfully validated. `}> Interface that indicates that the data has been successfully validated. The successfully validated data. Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns) The name of this component-validatable data. Url used by third-party Android apps to build the intent for returning to the app. Payment category required for session creation. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. The name of this component-validatable data. ) => void`}> Called to indicate that the component data is in the process of being validated. `}> Interface that indicates that data is currently in the process of being validated. The data being validated. Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns) The name of this component-validatable data. Url used by third-party Android apps to build the intent for returning to the app. Payment category required for session creation. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. The name of this component-validatable data. ) => void`}> Called to indicated an error that occurred during component data validation. `}> Interface that represents an error that occurred during the validation process. The data for which an error ocurred during validation. Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns) The name of this component-validatable data. Url used by third-party Android apps to build the intent for returning to the app. Payment category required for session creation. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. The name of this component-validatable data. The `PrimerError` that ocurred during the validation attempt. A unique error identifier. A unique error code. A error description. A recovery suggestion for the given error. In case it's present, use it to try to recover from error. A unique diagnostics id for the given error. ## Returns An instance of `KlarnaComponent`: Initialize the component by calling the `start` function. This method should be called only once. Call `submit` function in order to process collected data and move component to next state. 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. Interface representing Klarna payment options required for configuring [KlarnaComponent](#returns) The name of this component-validatable data. Url used by third-party Android apps to build the intent for returning to the app. Payment category required for session creation. ID of the payment method category to be used while loading the payment view. The possible values are:
  • klarna
  • pay\_later
  • pay\_now
  • pay\_over\_time
  • direct\_bank\_transfer
  • direct\_debit
 Name of the payment method category. These names are dynamic depending on what payment method is in the category. URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated. Finalize the payment. To validate the collected data, you can refer to the appropriate [KlarnaManagerProps](#param-props) callback functions. 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 ``` ## 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 ) => { // Data was considered invalid during validation. switch (data.data.validatableDataName) { case "klarnaPaymentOptions": // ... break; case "klarnaPaymentFinalization": // ... break; } }, onValid: (data: PrimerValidComponentData) => { // Data was successfully validated. switch (data.data.validatableDataName) { case "klarnaPaymentOptions": // ... break; case "klarnaPaymentFinalization": // ... break; } }, onValidating: ( data: PrimerValidatingComponentData ) => { // Data is in the process of being validated. switch (data.data.validatableDataName) { case "klarnaPaymentOptions": // ... break; case "klarnaPaymentFinalization": // ... break; } }, onValidationError: ( data: PrimerComponentDataValidationError ) => { // 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]); ```