This method allows you get a new instance of KlarnaComponent.
1async provide(props: KlarnaManagerProps): Promise<KlarnaComponent>typescript
copy
Parameters
props
KlarnaManagerPropsRequiredProperties
primerSessionIntent
PrimerSessionIntentRequiredonStep
(data: KlarnaPaymentStep) => voidCalled 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.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: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.
Properties
stepName
paymentSessionCreatedpaymentCategories
KlarnaPaymentCategory[]RequiredProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredA type that indicates that the payment view is loaded and ready to be displayed.The name of this component step.
Properties
stepName
paymentViewLoadedA type representing the authorized payment session.The name of this component step.Represents the state of the finalization.
Properties
stepName
paymentSessionAuthorizedisFinalized
booleanRequiredA type representing the finalized payment session.The name of this component step.
Properties
stepName
paymentSessionFinalizedThis 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.
error
PrimerErrorRequiredProperties
errorId
StringRequirederrorCode
String?description
StringRequiredcheckoutData
PrimerCheckoutDataProperties
payment
IPrimerCheckoutDataPaymentProperties
id
stringorderId
stringpaymentFailureReason
PrimerPaymentErrorCodeCan 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
objectVariations
handler
PrimerErrorHandlerMethods
Call with your custom error message.
onInvalid
(data: PrimerInvalidComponentData<KlarnaPaymentValidatableData>) => voidParameters
Interface that indicates that the data has been considered invalid after validation.
Properties
data
KlarnaPaymentValidatableDataInterface representing Klarna payment options required for configuring KlarnaComponent
Properties
validatableDataName
klarnaPaymentOptionsreturnIntentUrl
stringpaymentCategory
KlarnaPaymentCategoryProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredProperties
validatableDataName
klarnaPaymentFinalizationname
finalizePaymenterrors
PrimerValidationError[]A list of PrimerValidationError explaining why the data is considered invalid.
Properties
errorId
stringdescription
stringdiagnosticsId
stringonValid
(data: PrimerValidComponentData<KlarnaPaymentValidatableData>) => voidParameters
Interface that indicates that the data has been successfully validated.
Properties
data
KlarnaPaymentValidatableDataInterface representing Klarna payment options required for configuring KlarnaComponent
Properties
validatableDataName
klarnaPaymentOptionsreturnIntentUrl
stringpaymentCategory
KlarnaPaymentCategoryProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredProperties
validatableDataName
klarnaPaymentFinalizationname
finalizePaymentonValidating
(data: PrimerValidatingComponentData<KlarnaPaymentValidatableData>) => voidParameters
Interface that indicates that data is currently in the process of being validated.
Properties
data
KlarnaPaymentValidatableDataInterface representing Klarna payment options required for configuring KlarnaComponent
Properties
validatableDataName
klarnaPaymentOptionsreturnIntentUrl
stringpaymentCategory
KlarnaPaymentCategoryProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredProperties
validatableDataName
klarnaPaymentFinalizationname
finalizePaymentonValidationError
(data: PrimerComponentDataValidationError<KlarnaPaymentValidatableData>) => voidParameters
Interface that represents an error that occurred during the validation process.
Properties
data
KlarnaPaymentValidatableDataInterface representing Klarna payment options required for configuring KlarnaComponent
Properties
validatableDataName
klarnaPaymentOptionsreturnIntentUrl
stringpaymentCategory
KlarnaPaymentCategoryProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredProperties
validatableDataName
klarnaPaymentFinalizationname
finalizePaymenterror
PrimerErrorThe PrimerError that ocurred during the validation attempt.
Properties
errorId
stringRequirederrorCode
stringdescription
stringRequiredrecoverySuggestion
stringdiagnosticsId
stringReturns
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.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: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.
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
klarnaPaymentOptionsreturnIntentUrl
stringpaymentCategory
KlarnaPaymentCategoryProperties
identifier
stringRequired- klarna
- pay_later
- pay_now
- pay_over_time
- direct_bank_transfer
- direct_debit
name
stringRequireddescriptiveAssetUrl
stringRequiredstandardAssetUrl
booleanRequiredFinalize 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