KlarnaComponent.
TYPESCRIPT
async provide(props: KlarnaManagerProps): Promise<KlarnaComponent>
Parameters
Hide Parameters
Hide Parameters
Object that provides the payment menthod type and callback functions for
handling steps, errors and validation.
This method will be called when an error occurs. It may return
Show Properties
Show Properties
onStep
Called whenever the component emits a new step. This usually happens when calling start or submit or whenever the component collects data.
Show Parameters
Show Parameters
PaymentSessionCreated
A type representing the created payment session.
Show Properties
Show Properties
The name of this component step.
The list of available Klarna payment categories.
Show child attributes
Show child attributes
KlarnaPaymentCategory
Show Properties
Show Properties
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.
PaymentViewLoaded
A type that indicates that the payment view is loaded and ready to be
displayed.
Show Properties
Show Properties
The name of this component step.
PaymentSessionAuthorized
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.Show Properties
Show Properties
Hide Properties
Hide Properties
Show Properties
Show Properties
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.
Show Variations
Show Variations
XenditCheckoutVoucherAdditionalInfo
PromptPayCheckoutAdditionalInfo
onInvalid
Called to indicate that the component data was considered invalid during validation.
Show Parameters
Show Parameters
Interface that indicates that the data has been considered invalid after validation.
Show Properties
Show Properties
The data that failed validation.
Show child attributes
Show child attributes
KlarnaPaymentOptions
Interface representing Klarna payment options required for configuring KlarnaComponent
Show Properties
Show Properties
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.
Show Properties
Show Properties
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 list of
PrimerValidationError explaining why the data is considered invalid.onValid
Called to indicate that the component data was successfully validated.
Show Parameters
Show Parameters
Interface that indicates that the data has been successfully validated.
Show Properties
Show Properties
The successfully validated data.
Show child attributes
Show child attributes
KlarnaPaymentOptions
Interface representing Klarna payment options required for configuring KlarnaComponent
Show Properties
Show Properties
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.
Show Properties
Show Properties
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.
onValidating
Called to indicate that the component data is in the process of being validated.
Show Parameters
Show Parameters
Interface that indicates that data is currently in the process of being validated.
Show Properties
Show Properties
The data being validated.
Show child attributes
Show child attributes
KlarnaPaymentOptions
Interface representing Klarna payment options required for configuring KlarnaComponent
Show Properties
Show Properties
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.
Show Properties
Show Properties
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.
onValidationError
Called to indicated an error that occurred during component data validation.
Show Parameters
Show Parameters
Interface that represents an error that occurred during the validation process.
Show Properties
Show Properties
The data for which an error ocurred during validation.
Show child attributes
Show child attributes
KlarnaPaymentOptions
Interface representing Klarna payment options required for configuring KlarnaComponent
Show Properties
Show Properties
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.
Show Properties
Show Properties
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
PrimerError that ocurred during the validation attempt.PrimerError
Show Properties
Show Properties
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 ofKlarnaComponent:
Hide KlarnaComponent
Hide 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
callback functions.
Show Parameters
Show Parameters
KlarnaPaymentOptions
Interface representing Klarna payment options required for configuring KlarnaComponent
Show Properties
Show Properties
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.
Show Properties
Show Properties
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.
finalizePayment()
Finalize the payment.To validate the collected data, you can refer to the appropriate
KlarnaManagerProps
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
cleanUp(): Promise<void>
Example
TYPESCRIPT
// 👇 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, callklarnaComponent.cleanUp() after a payment completes — or before starting another one.
TYPESCRIPT
useEffect(() => {
return () => {
klarnaComponent
?.cleanUp()
.catch((err) => console.warn("Klarna cleanUp failed", err));
};
}, [klarnaComponent]);