This method allows you get a new instance of KlarnaComponent.

1
async provide(props: KlarnaManagerProps): Promise<KlarnaComponent>
typescript
copy

Parameters

props
KlarnaManagerPropsRequired
Object that provides the payment menthod type and callback functions for handling steps, errors and validation.
Properties
primerSessionIntent
PrimerSessionIntentRequired
Set the preferred session intent when showing paymentMethodType.
onStep
(data: KlarnaPaymentStep) => void

Called whenever the component emits a new step. This usually happens when calling start or submit or whenever the component collects data.

Parameters
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.
Properties
identifier
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
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.
Properties
stepName
paymentViewLoaded
The name of this component step.
A type representing the authorized payment session.
Properties
stepName
paymentSessionAuthorized
The name of this component step.
isFinalized
booleanRequired
Represents the state of the finalization.
A type representing the finalized payment session.
Properties
stepName
paymentSessionFinalized
The name of this component step.
onError
(error: PrimerError) => void

Called to indicate that a PrimerError occurred during the component's operation.

Parameters

The specific PrimerError that occurred during the component's operation.

errorId
stringRequired
A unique error identifier.
errorCode
string
A unique error code.
description
stringRequired
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.
onInvalid
(data: PrimerInvalidComponentData<KlarnaPaymentValidatableData>) => void
Called to indicate that the component data was considered invalid during validation.
Parameters

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

Properties
data
KlarnaPaymentValidatableData
The data that failed validation.

Interface representing Klarna payment options required for configuring KlarnaComponent

Properties
validatableDataName
klarnaPaymentOptions
The name of this component-validatable data.
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
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
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.

Properties
errorId
string
A unique error identifier.
A error description.
A unique diagnostics id for the given error.
onValid
(data: PrimerValidComponentData<KlarnaPaymentValidatableData>) => void
Called to indicate that the component data was successfully validated.
Parameters

Interface that indicates that the data has been successfully validated.

Properties
data
KlarnaPaymentValidatableData
The successfully validated data.

Interface representing Klarna payment options required for configuring KlarnaComponent

Properties
validatableDataName
klarnaPaymentOptions
The name of this component-validatable data.
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
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
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

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

Properties
data
KlarnaPaymentValidatableData
The data being validated.

Interface representing Klarna payment options required for configuring KlarnaComponent

Properties
validatableDataName
klarnaPaymentOptions
The name of this component-validatable data.
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
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
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

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

Properties
data
KlarnaPaymentValidatableData
The data for which an error ocurred during validation.

Interface representing Klarna payment options required for configuring KlarnaComponent

Properties
validatableDataName
klarnaPaymentOptions
The name of this component-validatable data.
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
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
URL of the stadard asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
Properties
validatableDataName
klarnaPaymentFinalization
The name of this component-validatable data.
name
finalizePayment
error
PrimerError

The PrimerError that ocurred during the validation attempt.

Properties
errorId
stringRequired
A unique error identifier.
errorCode
string
A unique error code.
description
stringRequired
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:

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

Parameters

Interface representing Klarna payment options required for configuring KlarnaComponent

Properties
validatableDataName
klarnaPaymentOptions
The name of this component-validatable data.
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
stringRequired
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
stringRequired
Name of the payment method category. These names are dynamic depending on what payment method is in the category.
descriptiveAssetUrl
stringRequired
URL of the descriptive asset. Using this dynamic asset will make sure that changes from Klarna be automatically propagated.
standardAssetUrl
booleanRequired
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 callback functions.

Example

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
// 👇 Add thisconst 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);
typescript
copy