"use strict"; const {jsx: _jsx} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const sdkArticle = { "version": "v2", "interfaceName": "KlarnaSDK", "types": { "KlarnaError": { "name": "KlarnaError", "kind": "interface", "description": "Klarna error", "fullDescription": "Klarna error\n\n@category Generic", "extends": [], "members": { "name": { "name": "name", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "errorId": { "name": "errorId", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "errorType": { "name": "errorType", "kind": "property", "type": "ErrorType", "description": "", "required": true, "tags": {} }, "errorCode": { "name": "errorCode", "kind": "property", "type": "ErrorCode", "description": "", "required": true, "tags": {} }, "errorMessage": { "name": "errorMessage", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "validationErrors": { "name": "validationErrors", "kind": "property", "type": "ValidationError[] | undefined", "description": "", "required": false, "tags": {} }, "originalError": { "name": "originalError", "kind": "property", "type": "unknown", "description": "", "required": false, "tags": {} } }, "tags": { "category": "Generic" }, "examples": [] }, "ValidationError": { "name": "ValidationError", "kind": "interface", "description": "Validation error", "fullDescription": "Validation error\n\n@category Generic", "extends": [], "members": { "parameter": { "name": "parameter", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "reason": { "name": "reason", "kind": "property", "type": "string | string[]", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Generic" }, "examples": [] }, "NationalIdentification": { "name": "NationalIdentification", "kind": "interface", "description": "National Identification details.", "fullDescription": "National Identification details.\n\n@example\n```json\n{\n \"number\": \"123456789\",\n \"country\": \"US\"\n}\n```\n@category Generic", "extends": [], "members": { "number": { "name": "number", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "country": { "name": "country", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} } }, "tags": { "example": "```json\n{\n \"number\": \"123456789\",\n \"country\": \"US\"\n}\n```", "category": "Generic" }, "examples": ["```json\n{\n \"number\": \"123456789\",\n \"country\": \"US\"\n}\n```"] }, "Address": { "name": "Address", "kind": "interface", "description": "Physical location represented by an address.", "fullDescription": "Physical location represented by an address.\n\n@category Generic", "extends": [], "members": { "streetAddress": { "name": "streetAddress", "kind": "property", "type": "string", "description": "Street address line 1.", "fullDescription": "Street address line 1.\n\n@example\n```text\n629 N. High St. Suite 300\n```", "required": true, "tags": { "example": "```text\n629 N. High St. Suite 300\n```" } }, "streetAddress2": { "name": "streetAddress2", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "city": { "name": "city", "kind": "property", "type": "string", "description": "City/town, more precise than region.", "fullDescription": "City/town, more precise than region.\n@example\n```text\nColumbus\n```", "required": true, "tags": { "example": "```text\nColumbus\n```" } }, "postalCode": { "name": "postalCode", "kind": "property", "type": "string | undefined", "description": "Postal code formatted to the specification of the country specified in the country field.", "fullDescription": "Postal code formatted to the specification of the country specified in the country field.\n@example\n```text\n43215\n```", "required": false, "tags": { "example": "```text\n43215\n```" } }, "region": { "name": "region", "kind": "property", "type": "string | undefined", "description": "Region formatted to the specification of the country specified by the country field.\n\nThe region should be set to the state (ex. US), county, borough, or municipality depending on the addressing standards of the country.", "fullDescription": "Region formatted to the specification of the country specified by the country field.\n\nThe region should be set to the state (ex. US), county, borough, or municipality depending on the addressing standards of the country.\n@example\n```text\nOH\n```", "required": false, "tags": { "example": "```text\nOH\n```" } }, "country": { "name": "country", "kind": "property", "type": "string", "description": "2-letter ISO 3166 country code", "fullDescription": "2-letter ISO 3166 country code\n@example\n```text\nUS\n```", "required": true, "tags": { "example": "```text\nUS\n```" } } }, "tags": { "category": "Generic" }, "examples": [] }, "ButtonConfiguration": { "name": "ButtonConfiguration", "kind": "interface", "description": "", "extends": [], "members": { "id": { "name": "id", "kind": "property", "type": "string | undefined", "description": "Unique identifier for the button.", "required": false, "tags": {} }, "shape": { "name": "shape", "kind": "property", "type": "\"default\" | \"pill\" | \"rect\" | undefined", "description": "Shape of the button.", "fullDescription": "Shape of the button.\n\n@default \"default\"", "required": false, "defaultValue": "\"default\"", "tags": { "default": "\"default\"" } }, "theme": { "name": "theme", "kind": "property", "type": "\"default\" | \"light\" | \"dark\" | \"outlined\" | undefined", "description": "Theme of the button.", "fullDescription": "Theme of the button.\n\n@default \"default\"", "required": false, "defaultValue": "\"default\"", "tags": { "default": "\"default\"" } }, "logoAlignment": { "name": "logoAlignment", "kind": "property", "type": "\"default\" | \"left\" | \"center\" | undefined", "description": "Alignment of the logo inside the button.\n\nPossible values: \"default\", \"left\", \"center\".", "fullDescription": "Alignment of the logo inside the button.\n\nPossible values: \"default\", \"left\", \"center\".\n@default \"default\"", "required": false, "defaultValue": "\"default\"", "tags": { "default": "\"default\"" } }, "loading": { "name": "loading", "kind": "property", "type": "boolean | undefined", "description": "Sets the initial loading state of the button.", "fullDescription": "Sets the initial loading state of the button.\n\n@default false", "required": false, "defaultValue": "false", "tags": { "default": "false" } }, "locale": { "name": "locale", "kind": "property", "type": "string | undefined", "description": "Locale of the button.", "fullDescription": "Locale of the button.\n\n@default \"en-US\"", "required": false, "defaultValue": "\"en-US\"", "tags": { "default": "\"en-US\"" } }, "disabled": { "name": "disabled", "kind": "property", "type": "boolean | undefined", "description": "Sets the initial disabled state of the button.", "fullDescription": "Sets the initial disabled state of the button.\n\n@default false", "required": false, "defaultValue": "false", "tags": { "default": "false" } }, "intent": { "name": "intent", "kind": "property", "type": "\"PAY\" | \"SUBSCRIBE\" | \"ADD_TO_WALLET\" | undefined", "description": "The intent that the button will be used for.\n\nKlarna will adjust the button label accordingly to optimize the conversion rate.", "fullDescription": "The intent that the button will be used for.\n\nKlarna will adjust the button label accordingly to optimize the conversion rate.\n\n@default \"PAY\"", "required": false, "defaultValue": "\"PAY\"", "tags": { "default": "\"PAY\"" } }, "initiationMode": { "name": "initiationMode", "kind": "property", "type": "\"DEVICE_BEST\" | \"REDIRECT\" | \"ON_PAGE\" | undefined", "description": "Defines how the customer flow is launched upon clicking the button.\n\nIt's recommended to use the `DEVICE_BEST` value to let Klarna decide the best way to launch\nthe flow in different devices and environments.", "fullDescription": "Defines how the customer flow is launched upon clicking the button.\n\nIt's recommended to use the `DEVICE_BEST` value to let Klarna decide the best way to launch\nthe flow in different devices and environments.\n\n@default \"DEVICE_BEST\"", "required": false, "defaultValue": "\"DEVICE_BEST\"", "tags": { "default": "\"DEVICE_BEST\"" } } }, "tags": {}, "examples": [] }, "KlarnaButton": { "name": "KlarnaButton", "kind": "interface", "description": "", "extends": ["KlarnaUIElement"], "members": { "on": { "name": "on", "kind": "method", "signature": "on(event: \"render\", callback: (button: this) => Promise): this", "description": "The `render` event is triggered after the button is fully visible.", "fullDescription": "The `render` event is triggered after the button is fully visible.\n\n@param event render\n@param callback Render event handler callback, triggered on render.\n@returns {this}", "parameters": [{ "name": "event", "type": "\"render\"", "description": "", "required": true }, { "name": "callback", "type": "(button: this) => Promise", "description": "", "required": true }], "returnType": "this", "returnDescription": "", "examples": [], "tags": { "param": "Render event handler callback, triggered on render.", "returns": "" }, "overloads": [{ "name": "on", "kind": "method", "signature": "on(event: \"click\", callback: (button: this) => Promise): this", "description": "The `click` event is triggered after the button is clicked.", "fullDescription": "The `click` event is triggered after the button is clicked.\n\n@param event click\n@param callback Render event handler callback, triggered on click.\n@returns {this}", "parameters": [{ "name": "event", "type": "\"click\"", "description": "", "required": true }, { "name": "callback", "type": "(button: this) => Promise", "description": "", "required": true }], "returnType": "this", "returnDescription": "", "examples": [], "tags": { "param": "Render event handler callback, triggered on click.", "returns": "" } }] }, "toggleState": { "name": "toggleState", "kind": "method", "signature": "toggleState(state: \"disabled\" | \"loading\", value?: boolean | undefined): this", "description": "Toggle a button state such as disabled or loading.", "fullDescription": "Toggle a button state such as disabled or loading.\n\n@param state\nState \"disabled\" disables/enables the button, e.g. makes it non-interactive/interactive\nState \"loading\" displays/hides the loading indicator in the button\n@param value - can be used to set the state to a specific value instead of toggling", "parameters": [{ "name": "state", "type": "\"disabled\" | \"loading\"", "description": "", "required": true }, { "name": "value", "type": "boolean | undefined", "description": "", "required": false }], "returnType": "this", "returnDescription": "", "examples": [], "tags": { "param": "- can be used to set the state to a specific value instead of toggling" } } }, "tags": {}, "examples": [] }, "KlarnaUIElement": { "name": "KlarnaUIElement", "kind": "interface", "description": "", "extends": [], "members": { "id": { "name": "id", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "htmlElement": { "name": "htmlElement", "kind": "property", "type": "HTMLElement", "description": "", "required": true, "tags": {} }, "mount": { "name": "mount", "kind": "method", "signature": "mount(containerSelector: string | HTMLElement): this", "description": "", "parameters": [{ "name": "containerSelector", "type": "string | HTMLElement", "description": "", "required": true }], "returnType": "this", "returnDescription": "", "examples": [], "tags": {} }, "unmount": { "name": "unmount", "kind": "method", "signature": "unmount(): this", "description": "", "parameters": [], "returnType": "this", "returnDescription": "", "examples": [], "tags": {} } }, "tags": {}, "examples": [] }, "ApplicationMetadata": { "name": "ApplicationMetadata", "kind": "interface", "description": "", "extends": [], "members": { "platform": { "name": "platform", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "applicationName": { "name": "applicationName", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "version": { "name": "version", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "applicationReference": { "name": "applicationReference", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } }, "tags": {}, "examples": [] }, "KlarnaCustomerProfile": { "name": "KlarnaCustomerProfile", "kind": "interface", "description": "Details of the Klarna customer account that approves the payment.", "extends": [], "members": { "customerId": { "name": "customerId", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "givenName": { "name": "givenName", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "familyName": { "name": "familyName", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "email": { "name": "email", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "phone": { "name": "phone", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "phoneVerified": { "name": "phoneVerified", "kind": "property", "type": "boolean", "description": "Indicates whether the phone number has been verified through a one-time password or not.", "required": true, "tags": {} }, "country": { "name": "country", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "emailVerified": { "name": "emailVerified", "kind": "property", "type": "boolean", "description": "Indicates whether the email address has been verified through a one-time password or not.", "required": true, "tags": {} }, "address": { "name": "address", "kind": "property", "type": "Address", "description": "", "required": true, "tags": {} }, "locale": { "name": "locale", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "dateOfBirth": { "name": "dateOfBirth", "kind": "property", "type": "string", "description": "The date of birth of the customer.", "fullDescription": "The date of birth of the customer.\n\n@klarna-lifecycle-stage future-release", "required": true, "tags": { "klarna-lifecycle-stage": "future-release" } }, "nationalIdentification": { "name": "nationalIdentification", "kind": "property", "type": "NationalIdentification", "description": "The national identification number of the customer.", "fullDescription": "The national identification number of the customer.\n\n@klarna-lifecycle-stage future-release", "required": true, "tags": { "klarna-lifecycle-stage": "future-release" } }, "sub": { "name": "sub", "kind": "property", "type": "string | undefined", "description": "", "fullDescription": "@klarna-lifecycle-stage future-release", "required": false, "tags": { "klarna-lifecycle-stage": "future-release" } } }, "tags": {}, "examples": [] }, "LineItem": { "name": "LineItem", "kind": "interface", "description": "Describe a line item in the purchase. Klarna uses this data for fraud detection and customer communication.", "extends": [], "members": { "quantity": { "name": "quantity", "kind": "property", "type": "number", "description": "Specify the quantity of the product.", "fullDescription": "Specify the quantity of the product.\n\n@example\n```typescript\n1\n```", "required": true, "tags": { "example": "```typescript\n1\n```" } }, "name": { "name": "name", "kind": "property", "type": "string", "description": "Customer-facing name of the product.", "required": true, "tags": {} }, "totalAmount": { "name": "totalAmount", "kind": "property", "type": "number", "description": "Specify the total amount to charge or credit the customer, in minor currency units, including surcharges and deductions.\nUse a negative value to credit the customer (e.g., for discounts, vouchers, or gift cards).", "required": true, "tags": {} }, "totalTaxAmount": { "name": "totalTaxAmount", "kind": "property", "type": "number | undefined", "description": "Specify how much of the totalAmount is attributed to sales tax, in minor currency units.", "required": false, "tags": {} }, "unitPrice": { "name": "unitPrice", "kind": "property", "type": "number | undefined", "description": "Specify the price of one unit in minor currency units.\n\nTotal price of line item is (unitPrice * quantity).", "required": false, "tags": {} }, "productUrl": { "name": "productUrl", "kind": "property", "type": "string | undefined", "description": "Provide the URL of the product page.", "required": false, "tags": {} }, "imageUrl": { "name": "imageUrl", "kind": "property", "type": "string | undefined", "description": "Provide the URL of the product image.", "required": false, "tags": {} }, "productIdentifier": { "name": "productIdentifier", "kind": "property", "type": "string | undefined", "description": "Provide the GTIN (UPC, ISBN) of the item.", "required": false, "tags": {} }, "lineItemReference": { "name": "lineItemReference", "kind": "property", "type": "string | undefined", "description": "Unique reference to this line item for correlation with your own system.", "fullDescription": "Unique reference to this line item for correlation with your own system.\n\n@example\n```text\nSKU12345\n```", "required": false, "tags": { "example": "```text\nSKU12345\n```" } }, "subscriptionReference": { "name": "subscriptionReference", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "shippingReference": { "name": "shippingReference", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "currency": { "name": "currency", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } }, "tags": {}, "examples": [] }, "OndemandService": { "name": "OndemandService", "kind": "interface", "description": "On-Demand Service Data", "fullDescription": "On-Demand Service Data\n@category Payment", "extends": [], "members": { "averageAmount": { "name": "averageAmount", "kind": "property", "type": "number | undefined", "description": "Your average purchase amount in minor-units (e.g., cents).\n\nUse this to provide Klarna with typical purchase amounts across your customer base.\nCan be segmented by customer type, country, or other factors for better risk assessment.", "fullDescription": "Your average purchase amount in minor-units (e.g., cents).\n\nUse this to provide Klarna with typical purchase amounts across your customer base.\nCan be segmented by customer type, country, or other factors for better risk assessment.\n\n@example\n```typescript\naverageAmount: 2000 // $20.00 average purchase\naverageAmount: 5999 // $59.99 average purchase\n```", "required": false, "tags": { "example": "```typescript\naverageAmount: 2000 // $20.00 average purchase\naverageAmount: 5999 // $59.99 average purchase\n```" } }, "minimumAmount": { "name": "minimumAmount", "kind": "property", "type": "number | undefined", "description": "The minimum purchase amount in minor-units (e.g., cents).\n\nThe lowest value you may charge a customer per purchase. This helps Klarna\nunderstand your pricing boundaries for better payment option presentation.", "fullDescription": "The minimum purchase amount in minor-units (e.g., cents).\n\nThe lowest value you may charge a customer per purchase. This helps Klarna\nunderstand your pricing boundaries for better payment option presentation.\n\n@example\n```typescript\nminimumAmount: 500 // $5.00 minimum purchase\nminimumAmount: 1000 // $10.00 minimum purchase\n```", "required": false, "tags": { "example": "```typescript\nminimumAmount: 500 // $5.00 minimum purchase\nminimumAmount: 1000 // $10.00 minimum purchase\n```" } }, "maximumAmount": { "name": "maximumAmount", "kind": "property", "type": "number | undefined", "description": "The maximum purchase amount in minor-units (e.g., cents).\n\nThe highest value you may charge a customer per purchase. This helps Klarna\nassess risk and determine appropriate payment options for larger transactions.", "fullDescription": "The maximum purchase amount in minor-units (e.g., cents).\n\nThe highest value you may charge a customer per purchase. This helps Klarna\nassess risk and determine appropriate payment options for larger transactions.\n\n@example\n```typescript\nmaximumAmount: 50000 // $500.00 maximum purchase\nmaximumAmount: 100000 // $1,000.00 maximum purchase\n```", "required": false, "tags": { "example": "```typescript\nmaximumAmount: 50000 // $500.00 maximum purchase\nmaximumAmount: 100000 // $1,000.00 maximum purchase\n```" } }, "purchaseInterval": { "name": "purchaseInterval", "kind": "property", "type": "\"DAY\" | \"WEEK\" | \"MONTH\" | \"YEAR\" | undefined", "description": "The typical interval at which customers make purchases.\n\nDefines the frequency pattern of customer purchases (DAY, WEEK, MONTH, YEAR)\nto help Klarna understand your business model and customer behavior.", "fullDescription": "The typical interval at which customers make purchases.\n\nDefines the frequency pattern of customer purchases (DAY, WEEK, MONTH, YEAR)\nto help Klarna understand your business model and customer behavior.\n\n@example\n```typescript\npurchaseInterval: \"MONTH\" // Monthly purchases typical\npurchaseInterval: \"WEEK\" // Weekly purchases typical\n```", "required": false, "tags": { "example": "```typescript\npurchaseInterval: \"MONTH\" // Monthly purchases typical\npurchaseInterval: \"WEEK\" // Weekly purchases typical\n```" } }, "purchaseIntervalFrequency": { "name": "purchaseIntervalFrequency", "kind": "property", "type": "number | undefined", "description": "How often purchases occur within the specified interval.\n\nWorks together with `purchaseInterval` to define customer purchase patterns.\nFor example: interval \"MONTH\" + frequency 2 = purchases every 2 months.", "fullDescription": "How often purchases occur within the specified interval.\n\nWorks together with `purchaseInterval` to define customer purchase patterns.\nFor example: interval \"MONTH\" + frequency 2 = purchases every 2 months.\n\n@example\n```typescript\n// Weekly purchases\n{ purchaseInterval: \"WEEK\", purchaseIntervalFrequency: 1 }\n\n// Every 2 months\n{ purchaseInterval: \"MONTH\", purchaseIntervalFrequency: 2 }\n\n// Twice per week\n{ purchaseInterval: \"DAY\", purchaseIntervalFrequency: 3 }\n```\n@minimum 1", "required": false, "tags": { "example": "```typescript\n// Weekly purchases\n{ purchaseInterval: \"WEEK\", purchaseIntervalFrequency: 1 }\n\n// Every 2 months\n{ purchaseInterval: \"MONTH\", purchaseIntervalFrequency: 2 }\n\n// Twice per week\n{ purchaseInterval: \"DAY\", purchaseIntervalFrequency: 3 }\n```", "minimum": "1" } }, "currency": { "name": "currency", "kind": "property", "type": "string | undefined", "description": "Provide the currency code in ISO 4217 format (3-letter code).", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "SupplementaryPurchaseData": { "name": "SupplementaryPurchaseData", "kind": "interface", "description": "Supplementary Purchase Data", "fullDescription": "Supplementary Purchase Data\n@category Payment", "extends": [], "members": { "purchaseReference": { "name": "purchaseReference", "kind": "property", "type": "string | undefined", "description": "Customer-facing order number.\nKlarna displays this to customers in the Klarna app and other communications.\nKlarna also includes it in settlement reports for reconciliation.", "required": false, "tags": {} }, "lineItems": { "name": "lineItems", "kind": "property", "type": "LineItem[] | undefined", "description": "Include optional line items describing the purchase. The total sum of the line items must match the payment amount.", "required": false, "tags": {} }, "shipping": { "name": "shipping", "kind": "property", "type": "Shipping[] | undefined", "description": "Provide the recipient and delivery address of the customer.", "required": false, "tags": {} }, "customer": { "name": "customer", "kind": "property", "type": "Customer | undefined", "description": "Provide information about the customer.", "required": false, "tags": {} }, "ondemandService": { "name": "ondemandService", "kind": "property", "type": "OndemandService | undefined", "description": "Provide on-demand service information.", "required": false, "tags": {} }, "subscriptions": { "name": "subscriptions", "kind": "property", "type": "Subscription[] | undefined", "description": "Provide subscription details.", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "BillingPlan": { "name": "BillingPlan", "kind": "interface", "description": "", "extends": [], "members": { "billingAmount": { "name": "billingAmount", "kind": "property", "type": "string", "description": "The charge amount for the billing plan in minor-units (e.g., cents).\n\nThis amount will be displayed to the customer showing what they'll pay\nin the upcoming billing cycle. Must be a positive value.", "fullDescription": "The charge amount for the billing plan in minor-units (e.g., cents).\n\nThis amount will be displayed to the customer showing what they'll pay\nin the upcoming billing cycle. Must be a positive value.\n\n@example\n```typescript\nbillingAmount: \"2999\" // $29.99 in cents\nbillingAmount: \"1500\" // $15.00 in cents\n```", "required": true, "tags": { "example": "```typescript\nbillingAmount: \"2999\" // $29.99 in cents\nbillingAmount: \"1500\" // $15.00 in cents\n```" } }, "from": { "name": "from", "kind": "property", "type": "string", "description": "The date when the customer will be charged for this billing plan.\n\nMust be a future date in YYYY-MM-DD format. Klarna will initiate renewal\ncommunications 10 days before this date to ensure payment method availability.", "fullDescription": "The date when the customer will be charged for this billing plan.\n\nMust be a future date in YYYY-MM-DD format. Klarna will initiate renewal\ncommunications 10 days before this date to ensure payment method availability.\n\n@example\n```typescript\nfrom: \"2025-12-15\" // December 15, 2025\nfrom: \"2026-01-01\" // January 1, 2026\n```", "required": true, "tags": { "example": "```typescript\nfrom: \"2025-12-15\" // December 15, 2025\nfrom: \"2026-01-01\" // January 1, 2026\n```" } }, "interval": { "name": "interval", "kind": "property", "type": "\"DAY\" | \"WEEK\" | \"MONTH\" | \"YEAR\"", "description": "Define the interval of the subscription billing cycle.\n\nDefines how frequently the customer will be charged (DAY, WEEK, MONTH, YEAR).", "required": true, "tags": {} }, "intervalFrequency": { "name": "intervalFrequency", "kind": "property", "type": "number", "description": "How often the billing occurs within the specified interval.\n\nWorks together with `interval` to define the billing frequency.\nFor example: interval \"WEEK\" + intervalFrequency 2 = every 2 weeks.", "fullDescription": "How often the billing occurs within the specified interval.\n\nWorks together with `interval` to define the billing frequency.\nFor example: interval \"WEEK\" + intervalFrequency 2 = every 2 weeks.\n\n@example\n```typescript\n// Weekly billing\n{ interval: \"WEEK\", intervalFrequency: 1 }\n\n// Every 2 months\n{ interval: \"MONTH\", intervalFrequency: 2 }\n\n// Twice per month (bi-weekly)\n{ interval: \"WEEK\", intervalFrequency: 2 }\n```\n@minimum 1", "required": true, "tags": { "example": "```typescript\n// Weekly billing\n{ interval: \"WEEK\", intervalFrequency: 1 }\n\n// Every 2 months\n{ interval: \"MONTH\", intervalFrequency: 2 }\n\n// Twice per month (bi-weekly)\n{ interval: \"WEEK\", intervalFrequency: 2 }\n```", "minimum": "1" } }, "currency": { "name": "currency", "kind": "property", "type": "string | undefined", "description": "Provide the currency code in ISO 4217 format (3-letter code).", "required": false, "tags": {} } }, "tags": {}, "examples": [] }, "Subscription": { "name": "Subscription", "kind": "interface", "description": "Represents a single subscription.", "fullDescription": "Represents a single subscription.\n\n@category Payment", "extends": [], "members": { "subscriptionReference": { "name": "subscriptionReference", "kind": "property", "type": "string", "description": "Provide a unique reference for the subscription.", "required": true, "tags": {} }, "name": { "name": "name", "kind": "property", "type": "string", "description": "Specify the name of the subscription.", "required": true, "tags": {} }, "billingPlans": { "name": "billingPlans", "kind": "property", "type": "BillingPlan[]", "description": "", "required": true, "tags": {} }, "freeTrial": { "name": "freeTrial", "kind": "property", "type": "\"ACTIVE\" | \"INACTIVE\" | undefined", "description": "", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingRecipient": { "name": "ShippingRecipient", "kind": "interface", "description": "", "fullDescription": "@category Payment", "extends": [], "members": { "givenName": { "name": "givenName", "kind": "property", "type": "string", "description": "Provide the given name of the recipient.", "required": true, "tags": {} }, "familyName": { "name": "familyName", "kind": "property", "type": "string", "description": "Provide the family name of the recipient.", "required": true, "tags": {} }, "phone": { "name": "phone", "kind": "property", "type": "string | undefined", "description": "Provide the phone number of the recipient.", "required": false, "tags": {} }, "email": { "name": "email", "kind": "property", "type": "string | undefined", "description": "Provide the email address of the recipient.", "required": false, "tags": {} }, "attention": { "name": "attention", "kind": "property", "type": "string | undefined", "description": "Provide the attention line for the recipient.", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "Shipping": { "name": "Shipping", "kind": "interface", "description": "", "fullDescription": "@category Payment", "extends": [], "members": { "recipient": { "name": "recipient", "kind": "property", "type": "ShippingRecipient", "description": "", "required": true, "tags": {} }, "address": { "name": "address", "kind": "property", "type": "Address", "description": "", "required": true, "tags": {} }, "shippingOption": { "name": "shippingOption", "kind": "property", "type": "{ shippingType: \"TO_DOOR\" | \"TO_CURB\" | \"TO_MAILBOX\" | \"PICKUP_BOX\" | \"PICKUP_POINT\" | \"PICKUP_STORE\" | \"PICKUP_WAREHOUSE\" | \"DIGITAL_EMAIL\" | \"DIGITAL_DOWNLOAD\" | \"DIGITAL_OTHER\" | \"PHYSICAL_OTHER\"; shippingTypeAttributes?: (\"SIGNATURE_REQUIRED\" | \"IDENTIFICATION_REQUIRED\" | \"CONTACTLESS_DELIVERY\" | \"LEAVE_AT_DOOR\" | \"LEAVE_AT_CURB\" | \"LEAVE_WITH_NEIGHBOUR\" | \"EXPRESS\" | \"TRACKED\" | \"UNTRACKED\")[] | undefined; shippingCarrier?: string | undefined; } | undefined", "description": "", "required": false, "tags": {}, "members": { "shippingType": { "name": "shippingType", "kind": "property", "type": "\"TO_DOOR\" | \"TO_CURB\" | \"TO_MAILBOX\" | \"PICKUP_BOX\" | \"PICKUP_POINT\" | \"PICKUP_STORE\" | \"PICKUP_WAREHOUSE\" | \"DIGITAL_EMAIL\" | \"DIGITAL_DOWNLOAD\" | \"DIGITAL_OTHER\" | \"PHYSICAL_OTHER\"", "description": "", "required": true, "tags": {} }, "shippingTypeAttributes": { "name": "shippingTypeAttributes", "kind": "property", "type": "(\"SIGNATURE_REQUIRED\" | \"IDENTIFICATION_REQUIRED\" | \"CONTACTLESS_DELIVERY\" | \"LEAVE_AT_DOOR\" | \"LEAVE_AT_CURB\" | \"LEAVE_WITH_NEIGHBOUR\" | \"EXPRESS\" | \"TRACKED\" | \"UNTRACKED\")[] | undefined", "description": "", "required": false, "tags": {} }, "shippingCarrier": { "name": "shippingCarrier", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } } }, "shippingReference": { "name": "shippingReference", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingOption": { "name": "ShippingOption", "kind": "interface", "description": "Shipping option", "fullDescription": "Shipping option\n\n@category Payment", "extends": [], "members": { "shippingOptionReference": { "name": "shippingOptionReference", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "amount": { "name": "amount", "kind": "property", "type": "number", "description": "", "required": true, "tags": {} }, "displayName": { "name": "displayName", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "description": { "name": "description", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "shippingType": { "name": "shippingType", "kind": "property", "type": "\"TO_DOOR\" | \"TO_CURB\" | \"TO_MAILBOX\" | \"PICKUP_BOX\" | \"PICKUP_POINT\" | \"PICKUP_STORE\" | \"PICKUP_WAREHOUSE\" | \"DIGITAL_EMAIL\" | \"DIGITAL_DOWNLOAD\" | \"DIGITAL_OTHER\" | \"PHYSICAL_OTHER\" | undefined", "description": "", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "Customer": { "name": "Customer", "kind": "interface", "description": "Represents who the customer is according to the Partner.\nThese data points may be used by Klarna to simplify sign-up and during fraud assessment.\nThey will not be used for underwriting and will not be persisted on authorized payments.", "fullDescription": "Represents who the customer is according to the Partner.\nThese data points may be used by Klarna to simplify sign-up and during fraud assessment.\nThey will not be used for underwriting and will not be persisted on authorized payments.\n\n@category Payment context", "extends": [], "members": { "address": { "name": "address", "kind": "property", "type": "Address | undefined", "description": "", "required": false, "tags": {} }, "email": { "name": "email", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "familyName": { "name": "familyName", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "givenName": { "name": "givenName", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "phone": { "name": "phone", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } }, "tags": { "category": "Payment context" }, "examples": [] }, "Currency": { "name": "Currency", "kind": "type", "type": "string", "description": "3-letter ISO 4217 currency code.", "tags": { "example": "```text\n\"USD\"\n```", "category": "Payment" } }, "Country": { "name": "Country", "kind": "type", "type": "string", "description": "Country in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format.", "tags": { "example": "```text\n\"US\"\n```", "category": "Generic" } }, "Locale": { "name": "Locale", "kind": "type", "type": "string", "description": "Locale in [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag) format.", "tags": { "example": "```text\n\"en-US\"\n```", "category": "Generic" } }, "AcquiringConfig": { "name": "AcquiringConfig", "kind": "type", "type": "| { /** Unique account identifier assigned by Klarna to the Acquiring Account. */ paymentAcquiringAccountId: string; /** * A unique string reference for the payment account, used by the Acquiring Partner to identify the payment account without relying on Klarna-generated IDs. Used to identify the partner account for the partners themselves. The value will be shown as shared by the integrator on certain Klarna surfaces, such as the Merchant Portal, but will never be used for customer interactions. * In case of support request or errands, the reference may be used to look-up the payment account. */ paymentAccountReference: string; } | { /** Unique payment account identifier assigned by Klarna */ paymentAccountId: string; }", "description": "Acquiring configuration for payment account.\nUse when the integrator is an Acquiring Partner or has a complex partner account setup.", "tags": { "category": "Config" }, "objectVariants": [{ "members": { "paymentAcquiringAccountId": { "name": "paymentAcquiringAccountId", "kind": "property", "type": "string", "description": "Unique account identifier assigned by Klarna to the Acquiring Account.", "required": true, "tags": {} }, "paymentAccountReference": { "name": "paymentAccountReference", "kind": "property", "type": "string", "description": "A unique string reference for the payment account, used by the Acquiring Partner to identify the payment account without relying on Klarna-generated IDs. Used to identify the partner account for the partners themselves. The value will be shown as shared by the integrator on certain Klarna surfaces, such as the Merchant Portal, but will never be used for customer interactions.\nIn case of support request or errands, the reference may be used to look-up the payment account.", "required": true, "tags": {} } } }, { "members": { "paymentAccountId": { "name": "paymentAccountId", "kind": "property", "type": "string", "description": "Unique payment account identifier assigned by Klarna", "required": true, "tags": {} } } }] }, "Email": { "name": "Email", "kind": "type", "type": "string", "description": "Email Address", "tags": { "example": "```text\n\"klara.joyce@klarna.com\"\n```", "category": "Generic" } }, "Phone": { "name": "Phone", "kind": "type", "type": "string", "description": "Phone in E.164 international format.\n\nIf you provide a local format, Klarna assumes the number is within the country\nspecified in the address object.\n\nFor more information, see: https://en.wikipedia.org/wiki/E.164", "tags": { "example": "```text\n\"+18445527621\"\n```", "category": "Generic" } }, "FlowInitiationModeType": { "name": "FlowInitiationModeType", "kind": "type", "type": "`${FlowInitiationMode}`", "description": "", "tags": {} }, "IntentType": { "name": "IntentType", "kind": "type", "type": "`${Intent}`", "description": "", "tags": {} }, "ThemeType": { "name": "ThemeType", "kind": "type", "type": "`${Theme}`", "description": "", "tags": {} }, "ButtonShapeType": { "name": "ButtonShapeType", "kind": "type", "type": "`${ButtonShape}`", "description": "", "tags": {} }, "IconShapeType": { "name": "IconShapeType", "kind": "type", "type": "`${IconShape}`", "description": "", "tags": {} }, "ButtonStateType": { "name": "ButtonStateType", "kind": "type", "type": "`${ButtonState}`", "description": "", "tags": {} }, "ButtonLogoAlignmentType": { "name": "ButtonLogoAlignmentType", "kind": "type", "type": "`${ButtonLogoAlignment}`", "description": "", "tags": {} }, "IntervalType": { "name": "IntervalType", "kind": "type", "type": "`${Interval}`", "description": "", "tags": {} }, "ShippingTypeType": { "name": "ShippingTypeType", "kind": "type", "type": "`${ShippingType}`", "description": "", "tags": {} }, "ShippingTypeAttributeType": { "name": "ShippingTypeAttributeType", "kind": "type", "type": "`${ShippingTypeAttribute}`", "description": "", "tags": {} }, "CustomerToken": { "name": "CustomerToken", "kind": "type", "type": "string", "description": "Returned if Account Linking or payment tokenization was requested.\n\nThe customer token represents the tokenized customer and allows you to act on behalf of the customer. You must persist this token in your system associated with the customer account. To de-duplicate customers, you should use the customerId as the unique identifier.", "tags": {} }, "KlarnaNetworkSessionToken": { "name": "KlarnaNetworkSessionToken", "kind": "type", "type": "string", "description": "The KlarnaNetworkSessionToken enables continuity of customer journey across domains and services. If you are an Acquiring Partner, you receive this token from your Partner.", "tags": {} }, "IntegrationParty": { "name": "IntegrationParty", "kind": "interface", "description": "Integration party information for tracking integrator or originator details.\nThis interface is used for both integrators (e.g., Acquiring Partners) and\noriginators (e.g., partners, platforms).", "fullDescription": "Integration party information for tracking integrator or originator details.\nThis interface is used for both integrators (e.g., Acquiring Partners) and\noriginators (e.g., partners, platforms).\n\n@category Config", "extends": [], "members": { "name": { "name": "name", "kind": "property", "type": "string", "description": "The name of the integration party using SCREAMING_SNAKE_CASE.", "fullDescription": "The name of the integration party using SCREAMING_SNAKE_CASE.\n\n@example\n```text\n'PSP', 'ECOMMERCE_COMPANY'\n```", "required": true, "tags": { "example": "```text\n'PSP', 'ECOMMERCE_COMPANY'\n```" } }, "moduleName": { "name": "moduleName", "kind": "property", "type": "string | undefined", "description": "The name of the module that is being used to initiate the request.", "required": false, "tags": {} }, "moduleVersion": { "name": "moduleVersion", "kind": "property", "type": "string | undefined", "description": "The version of the module that is being used.\nCan be a semantic version, commit hash, date or any other versioning scheme to identify which code that issued the request.", "required": false, "tags": {} }, "sessionReference": { "name": "sessionReference", "kind": "property", "type": "string | undefined", "description": "A reference to the session that is being used.", "required": false, "tags": {} } }, "tags": { "category": "Config" }, "examples": [] }, "IntegrationMetadataConfig": { "name": "IntegrationMetadataConfig", "kind": "interface", "description": "Integration metadata configuration.", "fullDescription": "Integration metadata configuration.\n\n@category Config", "extends": [], "members": { "integrator": { "name": "integrator", "kind": "property", "type": "IntegrationParty | undefined", "description": "Integrator information (e.g., Acquiring Partner).", "required": false, "tags": {} }, "originators": { "name": "originators", "kind": "property", "type": "IntegrationParty[] | undefined", "description": "Array of originators information (e.g., partners, platforms).", "required": false, "tags": {} } }, "tags": { "category": "Config" }, "examples": [] }, "IntegrationMetadata": { "name": "IntegrationMetadata", "kind": "interface", "description": "Interface for managing integration metadata at runtime.", "fullDescription": "Interface for managing integration metadata at runtime.\n\n@category Config", "extends": [], "members": { "setIntegratorSessionReference": { "name": "setIntegratorSessionReference", "kind": "method", "signature": "setIntegratorSessionReference(sessionReference: string): Promise", "description": "Updates the integrator's session reference. This is primarily used by Acquiring Partners\nto correlate SDK activity with their own backend sessions. The session reference is sent\nas an HTTP header on requests to Klarna, enabling end-to-end tracing across systems.\n\nCall this method whenever your session identifier changes (e.g. after a page navigation\nor when a new checkout session is created).", "fullDescription": "@description \"Updates the integrator's session reference. This is primarily used by Acquiring Partners\nto correlate SDK activity with their own backend sessions. The session reference is sent\nas an HTTP header on requests to Klarna, enabling end-to-end tracing across systems.\n\nCall this method whenever your session identifier changes (e.g. after a page navigation\nor when a new checkout session is created).\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Set the session reference to correlate SDK requests with your backend session\nawait klarna.Config.IntegrationMetadata.setIntegratorSessionReference(\"session-abc-123\");\n```\n@package Config\n@operationId Config.IntegrationMetadata.setIntegratorSessionReference\n@klarna-sdk-package Config\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Config.IntegrationMetadata.setIntegratorSessionReference\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param sessionReference The session reference to set for the integrator.", "parameters": [{ "name": "sessionReference", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Set the session reference to correlate SDK requests with your backend session\nawait klarna.Config.IntegrationMetadata.setIntegratorSessionReference(\"session-abc-123\");\n```"], "tags": { "description": "\"Updates the integrator's session reference. This is primarily used by Acquiring Partners\nto correlate SDK activity with their own backend sessions. The session reference is sent\nas an HTTP header on requests to Klarna, enabling end-to-end tracing across systems.\n\nCall this method whenever your session identifier changes (e.g. after a page navigation\nor when a new checkout session is created).\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Set the session reference to correlate SDK requests with your backend session\nawait klarna.Config.IntegrationMetadata.setIntegratorSessionReference(\"session-abc-123\");\n```", "package": "Config", "operationId": "Config.IntegrationMetadata.setIntegratorSessionReference", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Config.IntegrationMetadata.setIntegratorSessionReference", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "The session reference to set for the integrator." } }, "setOriginators": { "name": "setOriginators", "kind": "method", "signature": "setOriginators(originators: IntegrationParty[]): Promise", "description": "Sets the originators information. Use this in marketplace or multi-merchant scenarios\nwhere multiple parties are involved in a transaction (e.g. a platform and its sellers).\nThe data helps Klarna understand how the integration is built, making it easier to\ntroubleshoot potential issues and attribute activity to the correct party.", "fullDescription": "@description \"Sets the originators information. Use this in marketplace or multi-merchant scenarios\nwhere multiple parties are involved in a transaction (e.g. a platform and its sellers).\nThe data helps Klarna understand how the integration is built, making it easier to\ntroubleshoot potential issues and attribute activity to the correct party.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nawait klarna.Config.IntegrationMetadata.setOriginators([\n {\n name: \"MARKETPLACE_PLATFORM\",\n moduleName: \"checkout-plugin\",\n moduleVersion: \"2.4.1\",\n sessionReference: \"platform-session-xyz\",\n },\n {\n name: \"SELLER_STOREFRONT\",\n moduleName: \"storefront-sdk\",\n moduleVersion: \"1.0.0\",\n },\n]);\n```\n@package Config\n@operationId Config.IntegrationMetadata.setOriginators\n@klarna-sdk-package Config\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Config.IntegrationMetadata.setOriginators\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param originators Array of originator information.", "parameters": [{ "name": "originators", "type": "IntegrationParty[]", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\nawait klarna.Config.IntegrationMetadata.setOriginators([\n {\n name: \"MARKETPLACE_PLATFORM\",\n moduleName: \"checkout-plugin\",\n moduleVersion: \"2.4.1\",\n sessionReference: \"platform-session-xyz\",\n },\n {\n name: \"SELLER_STOREFRONT\",\n moduleName: \"storefront-sdk\",\n moduleVersion: \"1.0.0\",\n },\n]);\n```"], "tags": { "description": "\"Sets the originators information. Use this in marketplace or multi-merchant scenarios\nwhere multiple parties are involved in a transaction (e.g. a platform and its sellers).\nThe data helps Klarna understand how the integration is built, making it easier to\ntroubleshoot potential issues and attribute activity to the correct party.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nawait klarna.Config.IntegrationMetadata.setOriginators([\n {\n name: \"MARKETPLACE_PLATFORM\",\n moduleName: \"checkout-plugin\",\n moduleVersion: \"2.4.1\",\n sessionReference: \"platform-session-xyz\",\n },\n {\n name: \"SELLER_STOREFRONT\",\n moduleName: \"storefront-sdk\",\n moduleVersion: \"1.0.0\",\n },\n]);\n```", "package": "Config", "operationId": "Config.IntegrationMetadata.setOriginators", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Config.IntegrationMetadata.setOriginators", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "Array of originator information." } } }, "tags": { "category": "Config" }, "examples": [] }, "KlarnaConfig": { "name": "KlarnaConfig", "kind": "interface", "description": "Config package. Runtime configuration for integration metadata and session.", "fullDescription": "Config package. Runtime configuration for integration metadata and session.\n\n@category Config\n@packageInterface", "extends": [], "members": { "IntegrationMetadata": { "name": "IntegrationMetadata", "kind": "property", "type": "IntegrationMetadata", "description": "Interface for managing integration metadata dynamically.", "required": true, "tags": {} }, "setPartnerAccountId": { "name": "setPartnerAccountId", "kind": "method", "signature": "setPartnerAccountId(partnerAccountId: string): Promise", "description": "Enables integrators to dynamically specify the Partner's account ID at runtime.\nThis field is only used when the integrator is an Acquiring Partner or has a\ncomplex partner account setup. For direct integration or partner integration,\nthis field can be omitted.\n\nCall this before initiating a payment when the partner account differs from the\none used during SDK initialization.", "fullDescription": "@description \"Enables integrators to dynamically specify the Partner's account ID at runtime.\nThis field is only used when the integrator is an Acquiring Partner or has a\ncomplex partner account setup. For direct integration or partner integration,\nthis field can be omitted.\n\nCall this before initiating a payment when the partner account differs from the\none used during SDK initialization.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Switch to a specific partner account before creating a payment\nawait klarna.Config.setPartnerAccountId(\"partner-account-456\");\n```\n@package Config\n@operationId Config.setPartnerAccountId\n@klarna-sdk-package Config\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Config.setPartnerAccountId\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param partnerAccountId The partner account ID to use for subsequent operations.", "parameters": [{ "name": "partnerAccountId", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Switch to a specific partner account before creating a payment\nawait klarna.Config.setPartnerAccountId(\"partner-account-456\");\n```"], "tags": { "description": "\"Enables integrators to dynamically specify the Partner's account ID at runtime.\nThis field is only used when the integrator is an Acquiring Partner or has a\ncomplex partner account setup. For direct integration or partner integration,\nthis field can be omitted.\n\nCall this before initiating a payment when the partner account differs from the\none used during SDK initialization.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Switch to a specific partner account before creating a payment\nawait klarna.Config.setPartnerAccountId(\"partner-account-456\");\n```", "package": "Config", "operationId": "Config.setPartnerAccountId", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Config.setPartnerAccountId", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "The partner account ID to use for subsequent operations." } }, "setAcquiringConfig": { "name": "setAcquiringConfig", "kind": "method", "signature": "setAcquiringConfig(acquiringConfig: AcquiringConfig): Promise", "description": "Enables integrators to dynamically specify the acquiring configuration at runtime.", "fullDescription": "@description \"Enables integrators to dynamically specify the acquiring configuration at runtime.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nawait klarna.Config.setAcquiringConfig({\n paymentAcquiringAccountId: \"acq-account-123\",\n paymentAccountReference: \"partner-ref-456\",\n});\n```\n@package Config\n@operationId Config.setAcquiringConfig\n@klarna-sdk-package Config\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Config.setAcquiringConfig\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param acquiringConfig The acquiring configuration for payment account.", "parameters": [{ "name": "acquiringConfig", "type": "AcquiringConfig", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\nawait klarna.Config.setAcquiringConfig({\n paymentAcquiringAccountId: \"acq-account-123\",\n paymentAccountReference: \"partner-ref-456\",\n});\n```"], "tags": { "description": "\"Enables integrators to dynamically specify the acquiring configuration at runtime.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nawait klarna.Config.setAcquiringConfig({\n paymentAcquiringAccountId: \"acq-account-123\",\n paymentAccountReference: \"partner-ref-456\",\n});\n```", "package": "Config", "operationId": "Config.setAcquiringConfig", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Config.setAcquiringConfig", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "The acquiring configuration for payment account." } }, "setSdkToken": { "name": "setSdkToken", "kind": "method", "signature": "setSdkToken(sdkToken: string): Promise", "description": "Enables integrators to dynamically specify an SDK token that can resume a session.\n\n**Migration:** Replace calls to `setSdkToken` with {@docs-portal-link Config.setKlarnaNetworkSessionToken}.\nThe token value is the same — only the method name has changed.", "fullDescription": "@description \"Enables integrators to dynamically specify an SDK token that can resume a session.\n\n**Migration:** Replace calls to `setSdkToken` with {@docs-portal-link Config.setKlarnaNetworkSessionToken}.\nThe token value is the same — only the method name has changed.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Deprecated — migrate to setKlarnaNetworkSessionToken\nawait klarna.Config.setSdkToken(\"eyJhbGciOi...\");\n\n// New equivalent\nawait klarna.Config.setKlarnaNetworkSessionToken(\"eyJhbGciOi...\");\n```\n@deprecated use {@docs-portal-link Config.setKlarnaNetworkSessionToken} instead. This property will be removed in future versions.\n@package Config\n@operationId Config.setSdkToken\n@klarna-sdk-package Config\n@klarna-lifecycle-stage deprecated\n@klarna-operation-id Config.setSdkToken\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param sdkToken The SDK token to resume a session.", "parameters": [{ "name": "sdkToken", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Deprecated — migrate to setKlarnaNetworkSessionToken\nawait klarna.Config.setSdkToken(\"eyJhbGciOi...\");\n\n// New equivalent\nawait klarna.Config.setKlarnaNetworkSessionToken(\"eyJhbGciOi...\");\n```"], "tags": { "description": "\"Enables integrators to dynamically specify an SDK token that can resume a session.\n\n**Migration:** Replace calls to `setSdkToken` with {@docs-portal-link Config.setKlarnaNetworkSessionToken}.\nThe token value is the same — only the method name has changed.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Deprecated — migrate to setKlarnaNetworkSessionToken\nawait klarna.Config.setSdkToken(\"eyJhbGciOi...\");\n\n// New equivalent\nawait klarna.Config.setKlarnaNetworkSessionToken(\"eyJhbGciOi...\");\n```", "deprecated": "use {@docs-portal-link Config.setKlarnaNetworkSessionToken} instead. This property will be removed in future versions.", "package": "Config", "operationId": "Config.setSdkToken", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "deprecated", "klarna-operation-id": "Config.setSdkToken", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "The SDK token to resume a session." } }, "setKlarnaNetworkSessionToken": { "name": "setKlarnaNetworkSessionToken", "kind": "method", "signature": "setKlarnaNetworkSessionToken(klarnaNetworkSessionToken: string): Promise", "description": "Sets a Klarna Network Session token to resume a previously established session.\nUse this when the customer navigates between pages (e.g. from cart to checkout)\nand you need to restore the SDK session without requiring the customer to\nre-authenticate. The token is typically obtained from your server after the\ninitial payment flow or from the `onComplete` callback.", "fullDescription": "@description \"Sets a Klarna Network Session token to resume a previously established session.\nUse this when the customer navigates between pages (e.g. from cart to checkout)\nand you need to restore the SDK session without requiring the customer to\nre-authenticate. The token is typically obtained from your server after the\ninitial payment flow or from the `onComplete` callback.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Fetch the session token from your server\nconst response = await fetch(\"/api/klarna/session-token\");\nconst { klarnaNetworkSessionToken } = await response.json();\n\n// Resume the Klarna session on the new page\nawait klarna.Config.setKlarnaNetworkSessionToken(klarnaNetworkSessionToken);\n```\n@package Config\n@operationId Config.setKlarnaNetworkSessionToken\n@klarna-sdk-package Config\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Config.setKlarnaNetworkSessionToken\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param klarnaNetworkSessionToken The token to resume the session.", "parameters": [{ "name": "klarnaNetworkSessionToken", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Fetch the session token from your server\nconst response = await fetch(\"/api/klarna/session-token\");\nconst { klarnaNetworkSessionToken } = await response.json();\n\n// Resume the Klarna session on the new page\nawait klarna.Config.setKlarnaNetworkSessionToken(klarnaNetworkSessionToken);\n```"], "tags": { "description": "\"Sets a Klarna Network Session token to resume a previously established session.\nUse this when the customer navigates between pages (e.g. from cart to checkout)\nand you need to restore the SDK session without requiring the customer to\nre-authenticate. The token is typically obtained from your server after the\ninitial payment flow or from the `onComplete` callback.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Fetch the session token from your server\nconst response = await fetch(\"/api/klarna/session-token\");\nconst { klarnaNetworkSessionToken } = await response.json();\n\n// Resume the Klarna session on the new page\nawait klarna.Config.setKlarnaNetworkSessionToken(klarnaNetworkSessionToken);\n```", "package": "Config", "operationId": "Config.setKlarnaNetworkSessionToken", "klarna-sdk-package": "Config", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Config.setKlarnaNetworkSessionToken", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "The token to resume the session." } } }, "tags": { "category": "Config", "packageInterface": "" }, "examples": [] }, "Product": { "name": "Product", "kind": "enum", "description": "Available products in the Klarna Web SDK.", "members": { "PAYMENT": "PAYMENT", "CUSTOMER": "CUSTOMER", "IDENTITY": "IDENTITY", "MESSAGING": "MESSAGING" }, "tags": { "category": "Klarna" } }, "ShippingType": { "name": "ShippingType", "kind": "enum", "description": "Types of shipping methods.", "members": { "TO_DOOR": "TO_DOOR", "TO_CURB": "TO_CURB", "TO_MAILBOX": "TO_MAILBOX", "PICKUP_BOX": "PICKUP_BOX", "PICKUP_POINT": "PICKUP_POINT", "PICKUP_STORE": "PICKUP_STORE", "PICKUP_WAREHOUSE": "PICKUP_WAREHOUSE", "DIGITAL_EMAIL": "DIGITAL_EMAIL", "DIGITAL_DOWNLOAD": "DIGITAL_DOWNLOAD", "DIGITAL_OTHER": "DIGITAL_OTHER", "PHYSICAL_OTHER": "PHYSICAL_OTHER" }, "tags": { "category": "Payment" } }, "FlowInitiationMode": { "name": "FlowInitiationMode", "kind": "enum", "description": "Available flow initiation modes.\nDescribes how (redirect/popup) the flow is launched on different devices (mobile/desktop/native).\n\nNote that this has no impact when using the Klarna in-app SDK or on app handover to the Klarna app.", "members": { "DEVICE_BEST": "DEVICE_BEST", "REDIRECT": "REDIRECT", "ON_PAGE": "ON_PAGE" }, "tags": { "category": "Generic" } }, "Theme": { "name": "Theme", "kind": "enum", "description": "Available themes for Klarna UI components.", "members": { "DEFAULT": "default", "LIGHT": "light", "DARK": "dark", "OUTLINED": "outlined" }, "tags": { "category": "UI" } }, "ButtonState": { "name": "ButtonState", "kind": "enum", "description": "State \"undefined\" is the default state of a button, making it interactive\nState \"DISABLED\" disables the button, e.g. makes it non-interactive\nState \"LOADING\" displays a loading indicator in the button", "members": { "DISABLED": "disabled", "LOADING": "loading" }, "tags": {} }, "Interval": { "name": "Interval", "kind": "enum", "description": "", "members": { "DAY": "DAY", "WEEK": "WEEK", "MONTH": "MONTH", "YEAR": "YEAR" }, "tags": {} }, "ShippingTypeAttribute": { "name": "ShippingTypeAttribute", "kind": "enum", "description": "Attributes for shipping types.", "members": { "SIGNATURE_REQUIRED": "SIGNATURE_REQUIRED", "IDENTIFICATION_REQUIRED": "IDENTIFICATION_REQUIRED", "CONTACTLESS_DELIVERY": "CONTACTLESS_DELIVERY", "LEAVE_AT_DOOR": "LEAVE_AT_DOOR", "LEAVE_AT_CURB": "LEAVE_AT_CURB", "LEAVE_WITH_NEIGHBOUR": "LEAVE_WITH_NEIGHBOUR", "EXPRESS": "EXPRESS", "TRACKED": "TRACKED", "UNTRACKED": "UNTRACKED" }, "tags": { "category": "Payment" } }, "ShippingRejectionReason": { "name": "ShippingRejectionReason", "kind": "enum", "description": "Shipping address change rejection reason.", "members": { "COUNTRY_NOT_SUPPORTED": "COUNTRY_NOT_SUPPORTED", "POSTAL_CODE_NOT_SUPPORTED": "POSTAL_CODE_NOT_SUPPORTED", "CITY_NOT_SUPPORTED": "CITY_NOT_SUPPORTED", "REGION_NOT_SUPPORTED": "REGION_NOT_SUPPORTED", "ADDRESS_NOT_SUPPORTED": "ADDRESS_NOT_SUPPORTED" }, "tags": { "category": "Payment" } }, "ShippingOptionRejectionReason": { "name": "ShippingOptionRejectionReason", "kind": "enum", "description": "Shipping option select rejection reason.", "members": { "INVALID_OPTION": "INVALID_OPTION" }, "tags": { "category": "Payment" } }, "ShippingMode": { "name": "ShippingMode", "kind": "enum", "description": "Types of shipping information to collect.", "members": { "EDITABLE": "EDITABLE", "READ_ONLY": "READ_ONLY" }, "tags": { "category": "Payment" } }, "CollectCustomerProfile": { "name": "CollectCustomerProfile", "kind": "enum", "description": "Types of customer profile information to collect.", "members": { "NAME": "profile:name", "EMAIL": "profile:email", "PHONE": "profile:phone", "LOCALE": "profile:locale", "BILLING_ADDRESS": "profile:billing_address", "COUNTRY": "profile:country", "NATIONAL_IDENTIFICATION": "profile:national_identification", "DATE_OF_BIRTH": "profile:date_of_birth" }, "tags": { "category": "Payment" } }, "PaymentRequestState": { "name": "PaymentRequestState", "kind": "enum", "description": "Represents the lifecycle of a payment request.\n\n```\nSUBMITTED -> [IN_PROGRESS, EXPIRED, CANCELED]\nIN_PROGRESS -> [SUBMITTED, COMPLETED, EXPIRED, CANCELED]\nCOMPLETED\nEXPIRED\nCANCELED\n```", "members": { "SUBMITTED": "SUBMITTED", "IN_PROGRESS": "IN_PROGRESS", "COMPLETED": "COMPLETED", "EXPIRED": "EXPIRED", "CANCELED": "CANCELED", "DECLINED": "DECLINED" }, "tags": { "category": "Payment" } }, "PaymentRequestStateReason": { "name": "PaymentRequestStateReason", "kind": "enum", "description": "Reasons for the current state of the payment request.\n\nThe reason field may be used to determine why the payment request is in its current state.\n- `PARTNER_CANCELED` - The partner has canceled the payment request. Payment request state should be set to CANCELED.\n- `PURCHASE_FLOW_ABORTED` - The customer dropped out of the purchase flow. For example, the customer closed the Klarna window or went back to the Partner site, etc.\n- `TECHNICAL_ERROR` - Klarna failed to start the purchase flow due to internal error.", "members": { "PARTNER_CANCELED": "PARTNER_CANCELED", "PURCHASE_FLOW_ABORTED": "PURCHASE_FLOW_ABORTED", "TECHNICAL_ERROR": "TECHNICAL_ERROR" }, "tags": {} }, "RequestCustomerTokenScope": { "name": "RequestCustomerTokenScope", "kind": "enum", "description": "", "members": { "PAYMENT_CUSTOMER_PRESENT": "payment:customer_present", "PAYMENT_CUSTOMER_NOT_PRESENT": "payment:customer_not_present" }, "tags": {} }, "PaymentPresentationInstruction": { "name": "PaymentPresentationInstruction", "kind": "enum", "description": "", "members": { "SHOW_KLARNA": "SHOW_KLARNA", "PRESELECT_KLARNA": "PRESELECT_KLARNA", "SHOW_ONLY_KLARNA": "SHOW_ONLY_KLARNA", "HIDE_KLARNA": "HIDE_KLARNA" }, "tags": {} }, "ClientType": { "name": "ClientType", "kind": "enum", "description": "If the client is public, the token exchange is handled client-side\nand the token is returned directly to the client via the SDK.\n\nIf the client is confidential, the SDK will return an authorization code\nthat the client can use to exchange for a token on the server-side.", "members": { "PUBLIC": "public", "CONFIDENTIAL": "confidential" }, "tags": {} }, "PaymentRequestIntent": { "name": "PaymentRequestIntent", "kind": "enum", "description": "", "members": { "AUTHORIZATION": "authorization", "PREPARATION": "preparation" }, "tags": {} }, "ErrorType": { "name": "ErrorType", "kind": "enum", "description": "", "members": { "TECHNICAL_ERROR": "TECHNICAL_ERROR", "ACCESS_ERROR": "ACCESS_ERROR", "RESOURCE_ERROR": "RESOURCE_ERROR", "INPUT_ERROR": "INPUT_ERROR" }, "tags": {} }, "ErrorCode": { "name": "ErrorCode", "kind": "enum", "description": "", "members": { "UNAUTHORIZED": "UNAUTHORIZED", "RATE_LIMITED": "RATE_LIMITED", "NOT_FOUND": "NOT_FOUND", "RESOURCE_NOT_FOUND": "RESOURCE_NOT_FOUND", "RESOURCE_CONFLICT": "RESOURCE_CONFLICT", "OPERATION_FORBIDDEN": "OPERATION_FORBIDDEN", "RATE_LIMITED_CLIENT": "RATE_LIMITED_CLIENT", "VALIDATION_ERROR": "VALIDATION_ERROR", "INVALID_CONTENT_TYPE": "INVALID_CONTENT_TYPE", "INTERNAL_ERROR": "INTERNAL_ERROR", "TEMPORARY_UNAVAILABLE": "TEMPORARY_UNAVAILABLE", "UNSUPPORTED_EVENT": "UNSUPPORTED_EVENT" }, "tags": {} }, "Intent": { "name": "Intent", "kind": "enum", "description": "", "members": { "PAY": "PAY", "SUBSCRIBE": "SUBSCRIBE", "ADD_TO_WALLET": "ADD_TO_WALLET" }, "tags": {} }, "ButtonShape": { "name": "ButtonShape", "kind": "enum", "description": "Available shapes for Klarna buttons.", "members": { "DEFAULT": "default", "PILL": "pill", "RECT": "rect" }, "tags": { "default": "default", "category": "UI" } }, "IconShape": { "name": "IconShape", "kind": "enum", "description": "Available shapes for Klarna payment icons.", "members": { "DEFAULT": "default", "BADGE": "badge", "RECTANGLE": "rectangle", "SQUARE": "square" }, "tags": { "default": "default", "category": "UI" } }, "ButtonLogoAlignment": { "name": "ButtonLogoAlignment", "kind": "enum", "description": "Available alignments for logos inside buttons.", "members": { "DEFAULT": "default", "LEFT": "left", "CENTER": "center" }, "tags": { "category": "UI" } }, "WidgetEventData": { "name": "WidgetEventData", "kind": "interface", "description": "", "extends": [], "members": { "status": { "name": "status", "kind": "property", "type": "\"NO_STATE_CHANGE\" | \"STATE_CHANGE\"", "description": "", "required": true, "tags": {} } }, "tags": {}, "examples": [] }, "WidgetError": { "name": "WidgetError", "kind": "interface", "description": "", "extends": ["KlarnaError"], "members": {}, "tags": {}, "examples": [] }, "Transaction": { "name": "Transaction", "kind": "interface", "description": "", "extends": [], "members": { "on": { "name": "on", "kind": "method", "signature": "on(event: \"widgeterror\", callback: OnWidgetErrorCallback): void", "description": "Register an event handler for the `widgeterror` event. Anytime an error occurs\nduring the widget flow, the error event is triggered. If you define the error\nevent handler, Klarna emits all errors to it instead of throwing them upwards\nin the widget method.\n\nRegister this handler **before** calling {@docs-portal-link Customer.Transaction.widget} so\nthat errors during widget initialization are captured.", "fullDescription": "@description \"Register an event handler for the `widgeterror` event. Anytime an error occurs\nduring the widget flow, the error event is triggered. If you define the error\nevent handler, Klarna emits all errors to it instead of throwing them upwards\nin the widget method.\n\nRegister this handler **before** calling {@docs-portal-link Customer.Transaction.widget} so\nthat errors during widget initialization are captured.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n\n if (widgetData.status === \"NO_STATE_CHANGE\") {\n // The widget encountered an error but the payment state is unchanged\n // You may retry or show an error message to the customer\n }\n});\n```\n@package Customer\n@operationId Customer.Transaction.onWidgetError\n@klarna-sdk-package Customer\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Customer.Transaction.onWidgetError\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param event The event name.\n@param callback Event callback handler.", "parameters": [{ "name": "event", "type": "\"widgeterror\"", "description": "", "required": true }, { "name": "callback", "type": "OnWidgetErrorCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n\n if (widgetData.status === \"NO_STATE_CHANGE\") {\n // The widget encountered an error but the payment state is unchanged\n // You may retry or show an error message to the customer\n }\n});\n```"], "tags": { "description": "\"Register an event handler for the `widgeterror` event. Anytime an error occurs\nduring the widget flow, the error event is triggered. If you define the error\nevent handler, Klarna emits all errors to it instead of throwing them upwards\nin the widget method.\n\nRegister this handler **before** calling {@docs-portal-link Customer.Transaction.widget} so\nthat errors during widget initialization are captured.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n\n if (widgetData.status === \"NO_STATE_CHANGE\") {\n // The widget encountered an error but the payment state is unchanged\n // You may retry or show an error message to the customer\n }\n});\n```", "package": "Customer", "operationId": "Customer.Transaction.onWidgetError", "klarna-sdk-package": "Customer", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Customer.Transaction.onWidgetError", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "Event callback handler." }, "overloads": [{ "name": "on", "kind": "method", "signature": "on(event: \"widgetcomplete\", callback: OnWidgetCallback): void", "description": "Triggers when the widget closes and the widget state has changed. A\n`STATUS_CHANGE` status in the callback data indicates the customer completed\nthe action (e.g. approved a payment or updated their details). Use this to\nrefresh your UI or proceed with the next step in your flow.", "fullDescription": "@description \"Triggers when the widget closes and the widget state has changed. A\n`STATUS_CHANGE` status in the callback data indicates the customer completed\nthe action (e.g. approved a payment or updated their details). Use this to\nrefresh your UI or proceed with the next step in your flow.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n // The customer completed the action — refresh order status\n await refreshOrderStatus();\n }\n});\n```\n@package Customer\n@operationId Customer.Transaction.onWidgetComplete\n@klarna-sdk-package Customer\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Customer.Transaction.onWidgetComplete\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param event The event name.\n@param callback Event callback handler.", "parameters": [{ "name": "event", "type": "\"widgetcomplete\"", "description": "", "required": true }, { "name": "callback", "type": "OnWidgetCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n // The customer completed the action — refresh order status\n await refreshOrderStatus();\n }\n});\n```"], "tags": { "description": "\"Triggers when the widget closes and the widget state has changed. A\n`STATUS_CHANGE` status in the callback data indicates the customer completed\nthe action (e.g. approved a payment or updated their details). Use this to\nrefresh your UI or proceed with the next step in your flow.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n // The customer completed the action — refresh order status\n await refreshOrderStatus();\n }\n});\n```", "package": "Customer", "operationId": "Customer.Transaction.onWidgetComplete", "klarna-sdk-package": "Customer", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Customer.Transaction.onWidgetComplete", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "Event callback handler." } }, { "name": "on", "kind": "method", "signature": "on(event: \"widgetcancel\", callback: OnWidgetCallback): void", "description": "Triggers when the widget closes and the payment state has **not** changed.\nThis typically means the customer dismissed or closed the widget without\ncompleting the action. The `NO_STATE_CHANGE` status confirms that no\nupdates occurred — your application can safely treat this as a no-op.", "fullDescription": "@description \"Triggers when the widget closes and the payment state has **not** changed.\nThis typically means the customer dismissed or closed the widget without\ncompleting the action. The `NO_STATE_CHANGE` status confirms that no\nupdates occurred — your application can safely treat this as a no-op.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n // widgetData.status will be \"NO_STATE_CHANGE\"\n console.log(\"Customer closed the widget without completing the action.\");\n});\n```\n@package Customer\n@operationId Customer.Transaction.onWidgetCancel\n@klarna-sdk-package Customer\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Customer.Transaction.onWidgetCancel\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param event The event name.\n@param callback Event callback handler.", "parameters": [{ "name": "event", "type": "\"widgetcancel\"", "description": "", "required": true }, { "name": "callback", "type": "OnWidgetCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n // widgetData.status will be \"NO_STATE_CHANGE\"\n console.log(\"Customer closed the widget without completing the action.\");\n});\n```"], "tags": { "description": "\"Triggers when the widget closes and the payment state has **not** changed.\nThis typically means the customer dismissed or closed the widget without\ncompleting the action. The `NO_STATE_CHANGE` status confirms that no\nupdates occurred — your application can safely treat this as a no-op.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n // widgetData.status will be \"NO_STATE_CHANGE\"\n console.log(\"Customer closed the widget without completing the action.\");\n});\n```", "package": "Customer", "operationId": "Customer.Transaction.onWidgetCancel", "klarna-sdk-package": "Customer", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Customer.Transaction.onWidgetCancel", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "Event callback handler." } }] }, "widget": { "name": "widget", "kind": "method", "signature": "widget(widgetToken: string): void", "description": "Load the Klarna widget for the action. The widget token is obtained from\nthe Klarna API on your server and authenticates the widget session.\n\nRegister your event handlers (`widgeterror`, `widgetcomplete`, `widgetcancel`)\n**before** calling this method so that all events are captured from the start.\n\nThe `z-index` of elements in the application page calling `widget()` should\nnot exceed `10000`.", "fullDescription": "@description \"Load the Klarna widget for the action. The widget token is obtained from\nthe Klarna API on your server and authenticates the widget session.\n\nRegister your event handlers (`widgeterror`, `widgetcomplete`, `widgetcancel`)\n**before** calling this method so that all events are captured from the start.\n\nThe `z-index` of elements in the application page calling `widget()` should\nnot exceed `10000`.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// 1. Register event handlers first\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n});\n\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n await refreshOrderStatus();\n }\n});\n\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n console.log(\"Customer closed the widget.\");\n});\n\n// 2. Then load the widget with the token from your server\nklarna.Customer.Transaction.widget(\"eyJhbGciOi...\");\n```\n@package Customer\n@operationId Customer.Transaction.widget\n@klarna-sdk-package Customer\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Customer.Transaction.widget\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param widgetToken A token received from Klarna API that authenticates the widget.", "parameters": [{ "name": "widgetToken", "type": "string", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\n// 1. Register event handlers first\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n});\n\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n await refreshOrderStatus();\n }\n});\n\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n console.log(\"Customer closed the widget.\");\n});\n\n// 2. Then load the widget with the token from your server\nklarna.Customer.Transaction.widget(\"eyJhbGciOi...\");\n```"], "tags": { "description": "\"Load the Klarna widget for the action. The widget token is obtained from\nthe Klarna API on your server and authenticates the widget session.\n\nRegister your event handlers (`widgeterror`, `widgetcomplete`, `widgetcancel`)\n**before** calling this method so that all events are captured from the start.\n\nThe `z-index` of elements in the application page calling `widget()` should\nnot exceed `10000`.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// 1. Register event handlers first\nklarna.Customer.Transaction.on(\"widgeterror\", async (error, widgetData) => {\n console.error(\"Widget error:\", error.errorMessage);\n});\n\nklarna.Customer.Transaction.on(\"widgetcomplete\", async (widgetData) => {\n if (widgetData.status === \"STATE_CHANGE\") {\n await refreshOrderStatus();\n }\n});\n\nklarna.Customer.Transaction.on(\"widgetcancel\", async (widgetData) => {\n console.log(\"Customer closed the widget.\");\n});\n\n// 2. Then load the widget with the token from your server\nklarna.Customer.Transaction.widget(\"eyJhbGciOi...\");\n```", "package": "Customer", "operationId": "Customer.Transaction.widget", "klarna-sdk-package": "Customer", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Customer.Transaction.widget", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "A token received from Klarna API that authenticates the widget." } } }, "tags": {}, "examples": [] }, "KlarnaCustomer": { "name": "KlarnaCustomer", "kind": "interface", "description": "Customer widget and transaction APIs. Use Transaction for widget lifecycle and event handling.", "fullDescription": "Customer widget and transaction APIs. Use Transaction for widget lifecycle and event handling.\n\n@category Customer\n@packageInterface", "extends": [], "members": { "Transaction": { "name": "Transaction", "kind": "property", "type": "Transaction", "description": "Transaction APIs for widget lifecycle and event handling.", "fullDescription": "Transaction APIs for widget lifecycle and event handling.\n\n@klarna-lifecycle-stage general-availability\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "required": true, "tags": { "klarna-lifecycle-stage": "general-availability", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } } }, "tags": { "category": "Customer", "packageInterface": "" }, "examples": [] }, "OnWidgetErrorCallback": { "name": "OnWidgetErrorCallback", "kind": "type", "type": "( error: WidgetError, data: WidgetEventData ) => Promise", "description": "", "tags": {} }, "OnWidgetCallback": { "name": "OnWidgetCallback", "kind": "type", "type": "(data: WidgetEventData) => Promise", "description": "", "tags": {} }, "ClientTypeType": { "name": "ClientTypeType", "kind": "type", "type": "`${ClientType}`", "description": "", "tags": {} }, "KlarnaSDK": { "name": "KlarnaSDK", "kind": "interface", "description": "## Including Klarna Web SDK\n\nThe Klarna Web SDK follows [JavaScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) approach\nand you should include it where you need a reference to the SDK, such as when\nrendering components or initiating a payment flow. Always load the script directly\nfrom https://js.klarna.com/web-sdk/v2/klarna.mjs, rather\nthan included in a bundle or hosted yourself.\n\n## Initiating the SDK with credentials\n\nKlarna Web SDK can be imported directly as JS module. The `products` array should\nbe updated according to your needs, ensuring that only the utilized products are\nspecified for the best performance:\n\n```html\n\n```\n\n## For Acquiring Partners or integrators with complex account setups\n\nFor Acquiring Partners or integrators with complex account setups, the\n`partnerAccountId` field can be specified to refer to a specific Klarna Partner\nAccount:\n\n```html\n\n```\n\n## Loading SDK with bundlers\n\nSince the SDK is offered as JS a module, you can import the module directly in any\nJavaScript file. However, module bundlers such as webpack / rollup will try to load\nthe library while compiling which is not possible since its loaded from a CDN and\nnot as npm module. To avoid any errors, please use appropriate ignore mechanism for\nrespective bundlers. For webpack, the syntax will be following:\n\n```js\nconst { KlarnaSDK } = await import(/* webpackIgnore: true *\\/ \"https://js.klarna.com/web-sdk/v2/klarna.mjs\");\n```\n\n## Supported browsers:\n\nKlarna Web SDK supports the following set of browsers:\n\n- the last 2 versions of all browsers (not including those considered 'dead'),\n- any browser used by more than 0.5% of people,\n- Firefox Extended Support Release (ESR),\n- iOS versions greater than 10.\n\nYou can see the full supported list [here](https://browsersl.ist/#q=last+2+versions%2C+not+dead%2C+%3E+0.5%25%2C+Firefox+ESR%2C+iOS+%3E+10).\nEnsure that your usage of the SDK aligns with these browsers to guarantee full\nfunctionality.", "fullDescription": "## Including Klarna Web SDK\n\nThe Klarna Web SDK follows [JavaScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) approach\nand you should include it where you need a reference to the SDK, such as when\nrendering components or initiating a payment flow. Always load the script directly\nfrom https://js.klarna.com/web-sdk/v2/klarna.mjs, rather\nthan included in a bundle or hosted yourself.\n\n## Initiating the SDK with credentials\n\nKlarna Web SDK can be imported directly as JS module. The `products` array should\nbe updated according to your needs, ensuring that only the utilized products are\nspecified for the best performance:\n\n```html\n\n```\n\n## For Acquiring Partners or integrators with complex account setups\n\nFor Acquiring Partners or integrators with complex account setups, the\n`partnerAccountId` field can be specified to refer to a specific Klarna Partner\nAccount:\n\n```html\n\n```\n\n## Loading SDK with bundlers\n\nSince the SDK is offered as JS a module, you can import the module directly in any\nJavaScript file. However, module bundlers such as webpack / rollup will try to load\nthe library while compiling which is not possible since its loaded from a CDN and\nnot as npm module. To avoid any errors, please use appropriate ignore mechanism for\nrespective bundlers. For webpack, the syntax will be following:\n\n```js\nconst { KlarnaSDK } = await import(/* webpackIgnore: true *\\/ \"https://js.klarna.com/web-sdk/v2/klarna.mjs\");\n```\n\n## Supported browsers:\n\nKlarna Web SDK supports the following set of browsers:\n\n- the last 2 versions of all browsers (not including those considered 'dead'),\n- any browser used by more than 0.5% of people,\n- Firefox Extended Support Release (ESR),\n- iOS versions greater than 10.\n\nYou can see the full supported list [here](https://browsersl.ist/#q=last+2+versions%2C+not+dead%2C+%3E+0.5%25%2C+Firefox+ESR%2C+iOS+%3E+10).\nEnsure that your usage of the SDK aligns with these browsers to guarantee full\nfunctionality.\n@category Klarna", "extends": [], "members": { "[[call]]": { "name": "[[call]]", "kind": "method", "signature": "(config: SDKConfig): Promise", "description": "", "parameters": [{ "name": "config", "type": "SDKConfig", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": [], "tags": {} } }, "tags": { "category": "Klarna" }, "examples": [] }, "SDKConfig": { "name": "SDKConfig", "kind": "interface", "description": "", "fullDescription": "@category Klarna", "extends": [], "members": { "clientId": { "name": "clientId", "kind": "property", "type": "string", "description": "The client id of the partner account that is integrating the Klarna.js SDK.\n\nIf the integration is done by an Acquiring Partner or distribution partner then this must be set to the distribution partner's own client ID.", "required": true, "tags": {} }, "products": { "name": "products", "kind": "property", "type": "(\"PAYMENT\" | \"CUSTOMER\" | \"IDENTITY\" | \"MESSAGING\")[] | undefined", "description": "Array to specify which products to load for optimal performance.\n\nThis reduces the amount of data needed to download. For example, only loading\n'PAYMENT' will exclude the 'MESSAGING' product.", "fullDescription": "Array to specify which products to load for optimal performance.\n\nThis reduces the amount of data needed to download. For example, only loading\n'PAYMENT' will exclude the 'MESSAGING' product.\n\n@example\n```typescript\nproducts: [\"PAYMENT\"]\n```", "required": false, "tags": { "example": "```typescript\nproducts: [\"PAYMENT\"]\n```" } }, "partnerAccountId": { "name": "partnerAccountId", "kind": "property", "type": "string | undefined", "description": "When operating on behalf of another account, specify the partner account ID using\nthe `partnerAccountId` property.\n\nThis field is only used when the integrator is an Acquiring Partner or has a\ncomplex partner account setup. For direct integration or partner integration,\nthis field can be omitted.", "required": false, "tags": {} }, "locale": { "name": "locale", "kind": "property", "type": "string | undefined", "description": "Set the default locale for the SDK. See [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)", "required": false, "tags": {} }, "sdkToken": { "name": "sdkToken", "kind": "property", "type": "string | undefined", "description": "The sdkToken allows you to initialize the SDK with an existing session.\nOnly Partners or Acquiring Partners can retrieve this token on the server side.", "fullDescription": "The sdkToken allows you to initialize the SDK with an existing session.\nOnly Partners or Acquiring Partners can retrieve this token on the server side.\n@deprecated This field is deprecated and will be removed in future releases. Please use {@link klarnaNetworkSessionToken} instead.", "required": false, "tags": { "deprecated": "This field is deprecated and will be removed in future releases. Please use {@link klarnaNetworkSessionToken} instead." } }, "klarnaNetworkSessionToken": { "name": "klarnaNetworkSessionToken", "kind": "property", "type": "string | undefined", "description": "The klarnaNetworkSessionToken allows you to initialize the SDK with an existing session.\nOnly Partners or Acquiring Partners can retrieve this token on the server side.", "required": false, "tags": {} }, "integrationMetadata": { "name": "integrationMetadata", "kind": "property", "type": "IntegrationMetadataConfig | undefined", "description": "Integration metadata for tracking integrator and originator information.\nThis is useful for Acquiring Partners and platforms to track which integration\nand merchant is using the SDK.", "fullDescription": "Integration metadata for tracking integrator and originator information.\nThis is useful for Acquiring Partners and platforms to track which integration\nand merchant is using the SDK.\n\n@example\n```typescript\nintegrationMetadata: {\n integrator: {\n name: 'AcquiringPartner',\n moduleName: 'SubIntegration',\n moduleVersion: '2.0',\n sessionReference: 'xxx'\n },\n originators: [{\n name: 'ecommerceCompany',\n sessionReference: '5555-474',\n moduleName: 'ecommercePlugin',\n moduleVersion: '1.0'\n }]\n}\n```", "required": false, "tags": { "example": "```typescript\nintegrationMetadata: {\n integrator: {\n name: 'AcquiringPartner',\n moduleName: 'SubIntegration',\n moduleVersion: '2.0',\n sessionReference: 'xxx'\n },\n originators: [{\n name: 'ecommerceCompany',\n sessionReference: '5555-474',\n moduleName: 'ecommercePlugin',\n moduleVersion: '1.0'\n }]\n}\n```" } }, "acquiringConfig": { "name": "acquiringConfig", "kind": "property", "type": "AcquiringConfig | undefined", "description": "Acquiring configuration for payment account and settlement currency.\nUse when the Partner Account has multiple Payment Accounts.", "required": false, "tags": {} } }, "tags": { "category": "Klarna" }, "examples": [] }, "Klarna": { "name": "Klarna", "kind": "interface", "description": "The Klarna Web SDK instance that contains all the products.", "fullDescription": "The Klarna Web SDK instance that contains all the products.\n\n@category Klarna", "extends": [], "members": { "Config": { "name": "Config", "kind": "property", "type": "KlarnaConfig", "description": "", "required": true, "tags": {} }, "Network": { "name": "Network", "kind": "property", "type": "{ Session: KlarnaNetworkSession; }", "description": "", "required": true, "tags": {}, "members": { "Session": { "name": "Session", "kind": "property", "type": "KlarnaNetworkSession", "description": "", "required": true, "tags": {} } } }, "Payment": { "name": "Payment", "kind": "property", "type": "KlarnaPayment", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Klarna" }, "examples": [] }, "ProductType": { "name": "ProductType", "kind": "type", "type": "`${Product}`", "description": "", "tags": {} }, "PlacementKeyType": { "name": "PlacementKeyType", "kind": "type", "type": "`${PlacementKey}`", "description": "", "tags": {} }, "KlarnaNetworkSession": { "name": "KlarnaNetworkSession", "kind": "interface", "description": "Network Session refers to the ability of Klarna's full product suite to work seamlessly across multiple integration paths through network session tokens.", "fullDescription": "Network Session refers to the ability of Klarna's full product suite to work seamlessly across multiple integration paths through network session tokens.\n\n@category Network Session\n@packageInterface", "extends": [], "members": { "token": { "name": "token", "kind": "property", "type": "() => string", "description": "Get a network session token to be transferred to Acquiring Partner.", "fullDescription": "@description \"Get a network session token to be transferred to Acquiring Partner.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nconst token = klarna.Network.Session.token();\n\n// Send the token to your Acquiring Partner\nawait fetch(\"/api/payment\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken: token }),\n});\n```\n@package Network.Session\n@operationId Network.Session.token\n@klarna-sdk-package Network.Session\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Network.Session.token\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@returns {KlarnaNetworkSessionToken} The network session token", "required": true, "tags": { "description": "\"Get a network session token to be transferred to Acquiring Partner.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nconst token = klarna.Network.Session.token();\n\n// Send the token to your Acquiring Partner\nawait fetch(\"/api/payment\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken: token }),\n});\n```", "package": "Network.Session", "operationId": "Network.Session.token", "klarna-sdk-package": "Network.Session", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Network.Session.token", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "returns": "The network session token" } }, "on": { "name": "on", "kind": "property", "type": "(event: \"tokenupdate\", callback: (klarnaNetworkSessionToken: string) => void) => void", "description": "Register a callback for network session token updates.\n\nThis method allows partners to set a callback function that gets invoked whenever there is a change in the network session token.", "fullDescription": "@description \"Register a callback for network session token updates.\n\nThis method allows partners to set a callback function that gets invoked whenever there is a change in the network session token.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Network.Session.on('tokenupdate', (klarnaNetworkSessionToken) => {\n console.log('Network Session Token is updated:', klarnaNetworkSessionToken);\n // Forward the updated token to your backend\n sendTokenToBackend(klarnaNetworkSessionToken);\n});\n```\n@package Network.Session\n@operationId Network.Session.onTokenUpdate\n@klarna-sdk-package Network.Session\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Network.Session.onTokenUpdate\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param callback - A function to be executed when token is updated.", "required": true, "tags": { "description": "\"Register a callback for network session token updates.\n\nThis method allows partners to set a callback function that gets invoked whenever there is a change in the network session token.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Network.Session.on('tokenupdate', (klarnaNetworkSessionToken) => {\n console.log('Network Session Token is updated:', klarnaNetworkSessionToken);\n // Forward the updated token to your backend\n sendTokenToBackend(klarnaNetworkSessionToken);\n});\n```", "package": "Network.Session", "operationId": "Network.Session.onTokenUpdate", "klarna-sdk-package": "Network.Session", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Network.Session.onTokenUpdate", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "- A function to be executed when token is updated." } } }, "tags": { "category": "Network Session", "packageInterface": "" }, "examples": [] }, "PaymentError": { "name": "PaymentError", "kind": "interface", "description": "", "extends": ["KlarnaError"], "members": {}, "tags": {}, "examples": [] }, "PaymentRequestData": { "name": "PaymentRequestData", "kind": "interface", "description": "Payment request for a one-off purchase.", "fullDescription": "Payment request for a one-off purchase.\n\n@category Payment", "extends": [], "members": { "amount": { "name": "amount", "kind": "property", "type": "number | undefined", "description": "Total amount of a one-off purchase, including tax and any available discounts.\nThe value should be in non-negative minor units. Eg: 25 Dollars should be 2500.\nThis is the amount that Klarna will charge the customer for a one-off purchase.\nShould not include any amounts for subscriptions.", "required": false, "tags": {} }, "currency": { "name": "currency", "kind": "property", "type": "string", "description": "Currency in ISO 4217 format.", "required": true, "tags": {} }, "paymentOptionId": { "name": "paymentOptionId", "kind": "property", "type": "string | undefined", "description": "Specifies a payment option to be pre-selected in the purchase flow.\n\nThe available `payment_option_id` can be obtained from the Payment Options API.", "required": false, "tags": {} }, "paymentRequestReference": { "name": "paymentRequestReference", "kind": "property", "type": "string | undefined", "description": "Reference to the payment session or equivalent resource created on your side.\nThis will be exposed in payment request webhooks (`payment.request.*`) for the purpose of correlating your resource with the Klarna Payment Request.", "required": false, "tags": {} }, "supplementaryPurchaseData": { "name": "supplementaryPurchaseData", "kind": "property", "type": "SupplementaryPurchaseData | undefined", "description": "Provide additional details about the transaction to help reduce fraud risk and enhance transparency.\nInclude only the specific fields you wish to update within `supplementaryPurchaseData` in update requests.\nKlarna processes the supplementary data and uses it for fraud detection and customer communication.", "required": false, "tags": {} }, "requestCustomerToken": { "name": "requestCustomerToken", "kind": "property", "type": "{ scopes: (\"payment:customer_present\" | \"payment:customer_not_present\")[]; customerTokenReference?: string | undefined; } | undefined", "description": "Request a customer account linking to be set up, effectively returning a token called\n`customer_token` on successful confirmation of the payment request.\nThe generated token allows the token owner to act on-behalf of the customer.\n\nThe generated token will be available under `stateContext.klarnaCustomer.customerToken` when the request is in state `COMPLETED`", "required": false, "tags": {}, "members": { "scopes": { "name": "scopes", "kind": "property", "type": "(\"payment:customer_present\" | \"payment:customer_not_present\")[]", "description": "The scopes of the requested customer token. The scopes define the permissions of the token.\n\n* `payment:customer_not_present` - Enables payment tokenization of the customer, allows you to charge for subscriptions and on-demand when the customer is not present.\n* `payment:customer_present` - Enables tokenization of the customer, subsequent charges depending on risk assessment and the initially selected payment method might go through immediately or, in certain cases, require step-up.\n* `customer:login` - Enables account linking for the customer that allows the partner to create future payment requests in a logged in state for the customer.", "required": true, "tags": {} }, "customerTokenReference": { "name": "customerTokenReference", "kind": "property", "type": "string | undefined", "description": "Partner reference to the customer token created on Klarna side.\nThis will be exposed in webhooks related to changes to the customer token (e.g. token revoked) for the purpose of correlating your resource with the Klarna customer token.", "required": false, "tags": {} } } }, "shippingConfig": { "name": "shippingConfig", "kind": "property", "type": "ShippingConfig | undefined", "description": "Configure how the shipping collection form will behave in the purchase flow.\nWithout the shipping config, no shipping collection form will be displayed.", "required": false, "tags": {} }, "customerInteractionConfig": { "name": "customerInteractionConfig", "kind": "property", "type": "{ returnUrl?: string | undefined; } | undefined", "description": "Payment initiation methods that describes how to launch the purchase flow.", "required": false, "tags": {}, "members": { "returnUrl": { "name": "returnUrl", "kind": "property", "type": "string | undefined", "description": "URL to redirect the customer after the payment flow is completed.", "required": false, "tags": {} } } }, "agenticConfig": { "name": "agenticConfig", "kind": "property", "type": "AgenticConfig | undefined", "description": "Provide agentic configuration to enable AI Agent-initiated payment flows.\nUse this field when the payment is initiated by an Agent with Agentic Privilege.", "fullDescription": "Provide agentic configuration to enable AI Agent-initiated payment flows.\nUse this field when the payment is initiated by an Agent with Agentic Privilege.\n\n@klarna-lifecycle-stage future-release", "required": false, "tags": { "klarna-lifecycle-stage": "future-release" } } }, "tags": { "category": "Payment" }, "examples": [] }, "AgenticConfig": { "name": "AgenticConfig", "kind": "interface", "description": "Provide agentic configuration to enable AI Agent-initiated payment flows.\nUse this field when the payment is initiated by an Agent with Agentic Privilege.", "fullDescription": "Provide agentic configuration to enable AI Agent-initiated payment flows.\nUse this field when the payment is initiated by an Agent with Agentic Privilege.\n\n@category Payment\n@klarna-lifecycle-stage future-release", "extends": [], "members": { "paymentAccountId": { "name": "paymentAccountId", "kind": "property", "type": "string", "description": "Identifies the payment account to charge, in KRN format.\nThis is the Partner's Agentic identifier, targeted by the initiating Agent.", "required": true, "tags": {} }, "protocolData": { "name": "protocolData", "kind": "property", "type": "AgenticProtocolData", "description": "Protocol-specific configuration identifying which agentic protocol to use.", "required": true, "tags": {} } }, "tags": { "category": "Payment", "klarna-lifecycle-stage": "future-release" }, "examples": [] }, "AgenticProtocolDataAcp": { "name": "AgenticProtocolDataAcp", "kind": "interface", "description": "Protocol-specific data for the Agent Commerce Protocol (ACP).\nLearn more at https://www.agenticcommerce.dev/", "fullDescription": "Protocol-specific data for the Agent Commerce Protocol (ACP).\nLearn more at https://www.agenticcommerce.dev/\n\n@category Payment\n@klarna-lifecycle-stage future-release", "extends": [], "members": { "protocol": { "name": "protocol", "kind": "property", "type": "\"ACP\"", "description": "Identifier of the agentic protocol used.", "required": true, "tags": {} }, "sharedPaymentToken": { "name": "sharedPaymentToken", "kind": "property", "type": "string", "description": "A shared payment token issued by an Agent Distributor to facilitate payment authorization.", "fullDescription": "A shared payment token issued by an Agent Distributor to facilitate payment authorization.\n\n@example\n```text\n\"spt_1234567890abcdef\"\n```", "required": true, "tags": { "example": "```text\n\"spt_1234567890abcdef\"\n```" } } }, "tags": { "category": "Payment", "klarna-lifecycle-stage": "future-release" }, "examples": [] }, "AgenticProtocolDataUcp": { "name": "AgenticProtocolDataUcp", "kind": "interface", "description": "Protocol-specific data for the Universal Commerce Protocol (UCP).\nLearn more at https://ucp.dev/", "fullDescription": "Protocol-specific data for the Universal Commerce Protocol (UCP).\nLearn more at https://ucp.dev/\n\n@category Payment\n@klarna-lifecycle-stage future-release", "extends": [], "members": { "protocol": { "name": "protocol", "kind": "property", "type": "\"UCP\"", "description": "Identifier of the agentic protocol used.", "required": true, "tags": {} } }, "tags": { "category": "Payment", "klarna-lifecycle-stage": "future-release" }, "examples": [] }, "PaymentRequestOptions": { "name": "PaymentRequestOptions", "kind": "interface", "description": "Options to control the behavior of the Payment Request.", "fullDescription": "Options to control the behavior of the Payment Request.\n\n@category Payment", "extends": [], "members": { "initiationMode": { "name": "initiationMode", "kind": "property", "type": "\"DEVICE_BEST\" | \"REDIRECT\" | \"ON_PAGE\" | undefined", "description": "The initiation mode of the purchase flow.", "fullDescription": "The initiation mode of the purchase flow.\n\n@defaultValue `DEVICE_BEST`.", "required": false, "defaultValue": "`DEVICE_BEST`.", "tags": { "defaultValue": "`DEVICE_BEST`." } } }, "tags": { "category": "Payment" }, "examples": [] }, "PaymentRequestStateContext": { "name": "PaymentRequestStateContext", "kind": "interface", "description": "Context for the state of a payment request.", "fullDescription": "Context for the state of a payment request.\n\n@category Payment", "extends": [], "members": { "customerInteraction": { "name": "customerInteraction", "kind": "property", "type": "{ method?: string | undefined; paymentRequestUrl?: string | undefined; } | undefined", "description": "", "required": false, "tags": {}, "members": { "method": { "name": "method", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "paymentRequestUrl": { "name": "paymentRequestUrl", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} } } }, "interoperabilityToken": { "name": "interoperabilityToken", "kind": "property", "type": "string | undefined", "description": "", "fullDescription": "@deprecated Use `klarnaNetworkSessionToken` instead.", "required": false, "tags": { "deprecated": "Use `klarnaNetworkSessionToken` instead." } }, "paymentToken": { "name": "paymentToken", "kind": "property", "type": "string | undefined", "description": "", "fullDescription": "@deprecated Use `klarnaNetworkSessionToken` instead.", "required": false, "tags": { "deprecated": "Use `klarnaNetworkSessionToken` instead." } }, "klarnaNetworkSessionToken": { "name": "klarnaNetworkSessionToken", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "klarnaCustomer": { "name": "klarnaCustomer", "kind": "property", "type": "{ customerProfile?: KlarnaCustomerProfile | undefined; customerToken?: string | undefined; } | undefined", "description": "", "required": false, "tags": {}, "members": { "customerProfile": { "name": "customerProfile", "kind": "property", "type": "KlarnaCustomerProfile | undefined", "description": "", "required": false, "tags": {} }, "customerToken": { "name": "customerToken", "kind": "property", "type": "string | undefined", "description": "The customer token.", "required": false, "tags": { "klarna-lifecycle-stage": "future-release" } } } }, "shipping": { "name": "shipping", "kind": "property", "type": "Shipping | undefined", "description": "Shipping information.", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "PaymentRequest": { "name": "PaymentRequest", "kind": "interface", "description": "A Payment Request represents a request for a payment.\nThe Payment Request lifecycle is defined in {@link PaymentRequestStateType}.\n\nKlarna automatically creates a payment request when a customer clicks the Klarna payment button and the paymentRequest property is defined.\nSee {@link KlarnaPaymentButton} for more information.", "fullDescription": "A Payment Request represents a request for a payment.\nThe Payment Request lifecycle is defined in {@link PaymentRequestStateType}.\n\nKlarna automatically creates a payment request when a customer clicks the Klarna payment button and the paymentRequest property is defined.\nSee {@link KlarnaPaymentButton} for more information.\n\n@category Payment", "extends": [], "members": { "paymentRequestUrl": { "name": "paymentRequestUrl", "kind": "property", "type": "string", "description": "URL-based identifier of this payment request. Use this when handing the\npayment request off across systems (e.g. Sub-Partner delegated flows) and\nwhen calling {@link KlarnaPayment.fetch}.", "required": true, "tags": {} }, "paymentRequestId": { "name": "paymentRequestId", "kind": "property", "type": "string", "description": "Unique identifier of this payment request.", "fullDescription": "Unique identifier of this payment request.\n@deprecated Prefer `paymentRequestUrl` for new integrations.", "required": true, "tags": { "deprecated": "Prefer `paymentRequestUrl` for new integrations." } }, "state": { "name": "state", "kind": "property", "type": "\"SUBMITTED\" | \"IN_PROGRESS\" | \"COMPLETED\" | \"EXPIRED\" | \"CANCELED\" | \"DECLINED\"", "description": "Current state of the payment request", "required": true, "tags": {} }, "previousState": { "name": "previousState", "kind": "property", "type": "\"SUBMITTED\" | \"IN_PROGRESS\" | \"COMPLETED\" | \"EXPIRED\" | \"CANCELED\" | \"DECLINED\" | undefined", "description": "Previous state of the payment request", "required": false, "tags": {} }, "stateReason": { "name": "stateReason", "kind": "property", "type": "\"PARTNER_CANCELED\" | \"PURCHASE_FLOW_ABORTED\" | \"TECHNICAL_ERROR\" | undefined", "description": "Reason why the payment request is in its current state", "required": false, "tags": {} }, "stateContext": { "name": "stateContext", "kind": "property", "type": "PaymentRequestStateContext | undefined", "description": "Context for the current state of the payment request", "required": false, "tags": {} }, "paymentRequestReference": { "name": "paymentRequestReference", "kind": "property", "type": "string | undefined", "description": "Reference to the payment session or equivalent resource created on your side.\nThis will be exposed in payment request webhooks (payments.v2.request.*) for the purpose of correlating your resource with the Klarna Payment Request.", "required": false, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingOptionSelectRejectionResponse": { "name": "ShippingOptionSelectRejectionResponse", "kind": "interface", "description": "Shipping option select rejection response.", "fullDescription": "Shipping option select rejection response.\n\n@category Payment", "extends": [], "members": { "rejectionReason": { "name": "rejectionReason", "kind": "property", "type": "\"INVALID_OPTION\"", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingOptionSelectSuccessResponse": { "name": "ShippingOptionSelectSuccessResponse", "kind": "interface", "description": "Success information for shipping option select.", "fullDescription": "Success information for shipping option select.\n\n@category Payment", "extends": [], "members": { "amount": { "name": "amount", "kind": "property", "type": "number", "description": "", "required": true, "tags": {} }, "lineItems": { "name": "lineItems", "kind": "property", "type": "LineItem[]", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingChangeRejectionResponse": { "name": "ShippingChangeRejectionResponse", "kind": "interface", "description": "Shipping address change rejection response.", "fullDescription": "Shipping address change rejection response.\n\n@category Payment", "extends": [], "members": { "rejectionReason": { "name": "rejectionReason", "kind": "property", "type": "\"COUNTRY_NOT_SUPPORTED\" | \"POSTAL_CODE_NOT_SUPPORTED\" | \"CITY_NOT_SUPPORTED\" | \"REGION_NOT_SUPPORTED\" | \"ADDRESS_NOT_SUPPORTED\"", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingChangeSuccessResponse": { "name": "ShippingChangeSuccessResponse", "kind": "interface", "description": "Success information for shipping address change.", "fullDescription": "Success information for shipping address change.\n\n@category Payment", "extends": [], "members": { "amount": { "name": "amount", "kind": "property", "type": "number | undefined", "description": "", "required": false, "tags": {} }, "lineItems": { "name": "lineItems", "kind": "property", "type": "LineItem[] | undefined", "description": "", "required": false, "tags": {} }, "selectedShippingOptionReference": { "name": "selectedShippingOptionReference", "kind": "property", "type": "string | undefined", "description": "", "required": false, "tags": {} }, "shippingOptions": { "name": "shippingOptions", "kind": "property", "type": "ShippingOption[]", "description": "", "required": true, "tags": {} } }, "tags": { "category": "Payment" }, "examples": [] }, "PartialShippingAddress": { "name": "PartialShippingAddress", "kind": "interface", "description": "Partial shipping address of the customer. This enables the Partner to evaluate the shipping\noptions and whether they are available to the customer. The full shipping address is provided\nunder the `stateContext.shipping` object after the customer approves the purchase.", "fullDescription": "Partial shipping address of the customer. This enables the Partner to evaluate the shipping\noptions and whether they are available to the customer. The full shipping address is provided\nunder the `stateContext.shipping` object after the customer approves the purchase.\n\n@category Payment", "extends": [], "members": { "city": { "name": "city", "kind": "property", "type": "string", "description": "City/town, more precise than region.", "fullDescription": "City/town, more precise than region.\n@example\n```text\nColumbus\n```", "required": true, "tags": { "example": "```text\nColumbus\n```" } }, "postalCode": { "name": "postalCode", "kind": "property", "type": "string | undefined", "description": "Postal code formatted to the specification of the country specified in the country field.", "fullDescription": "Postal code formatted to the specification of the country specified in the country field.\n@example\n```text\n43215\n```", "required": false, "tags": { "example": "```text\n43215\n```" } }, "region": { "name": "region", "kind": "property", "type": "string | undefined", "description": "Region formatted to the specification of the country specified by the country field.\n\nThe region should be set to the state (ex. US), county, borough, or municipality depending on the addressing standards of the country.", "fullDescription": "Region formatted to the specification of the country specified by the country field.\n\nThe region should be set to the state (ex. US), county, borough, or municipality depending on the addressing standards of the country.\n@example\n```text\nOH\n```", "required": false, "tags": { "example": "```text\nOH\n```" } }, "country": { "name": "country", "kind": "property", "type": "string", "description": "2-letter ISO 3166 country code", "fullDescription": "2-letter ISO 3166 country code\n@example\n```text\nUS\n```", "required": true, "tags": { "example": "```text\nUS\n```" } } }, "tags": { "category": "Payment" }, "examples": [] }, "ShippingConfig": { "name": "ShippingConfig", "kind": "interface", "description": "Configure how the shipping collection form will behave in the purchase flow.\nWithout the shipping config, no shipping collection form will be displayed.", "extends": [], "members": { "mode": { "name": "mode", "kind": "property", "type": "\"EDITABLE\" | \"READ_ONLY\"", "description": "Configure if the shipping details should be collected from the customer.\n\n* `EDITABLE`: the shipping details will be collected from the customer and will be available under `stateContext.shipping` when the payment request is in state `COMPLETED`. If you enable this, you must read back and honour the shipping address returned in the payment request response.\n* `READ_ONLY`: the customer can only see the shipping details that are provided in the `supplementaryPurchaseData.shipping[0]` object without the ability to change them. The `READ_ONLY` mode will be supported in a future release. Setting it won't have any effect.", "required": true, "tags": {} }, "supportedCountries": { "name": "supportedCountries", "kind": "property", "type": "string[] | undefined", "description": "Partner's supported shipping countries (ISO 3166-1 alpha-2).", "fullDescription": "Partner's supported shipping countries (ISO 3166-1 alpha-2).\n\n@defaultValue []", "required": false, "defaultValue": "[]", "tags": { "defaultValue": "[]" } } }, "tags": {}, "examples": [] }, "PaymentRequestUrlHandoff": { "name": "PaymentRequestUrlHandoff", "kind": "interface", "description": "Hands Klarna a payment request your server created, for example the one returned\nwhen an authorization results in `STEP_UP_REQUIRED`.", "extends": [], "members": { "paymentRequestUrl": { "name": "paymentRequestUrl", "kind": "property", "type": "string", "description": "The URL of the payment request your server created.", "required": true, "tags": {} } }, "tags": {}, "examples": [] }, "DeprecatedPaymentRequestIdObject": { "name": "DeprecatedPaymentRequestIdObject", "kind": "interface", "description": "", "fullDescription": "@deprecated Prefer returning a `paymentRequestUrl` handoff for new integrations.", "extends": [], "members": { "paymentRequestId": { "name": "paymentRequestId", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} } }, "tags": { "deprecated": "Prefer returning a `paymentRequestUrl` handoff for new integrations." }, "examples": [] }, "PaymentPresentationData": { "name": "PaymentPresentationData", "kind": "interface", "description": "", "extends": [], "members": { "amount": { "name": "amount", "kind": "property", "type": "number | undefined", "description": "", "required": false, "tags": {} }, "currency": { "name": "currency", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} }, "intent": { "name": "intent", "kind": "property", "type": "\"PAY\" | \"SUBSCRIBE\" | \"ADD_TO_WALLET\" | undefined", "description": "", "required": false, "tags": {} }, "locale": { "name": "locale", "kind": "property", "type": "string | undefined", "description": "Sets the language and region (e.g., en-US).\n\nIf you don’t set this, it will automatically use the value chosen when you first set up the Web SDK.\nIf that’s not available, it will use your browser’s settings instead.", "fullDescription": "Sets the language and region (e.g., en-US).\n\nIf you don’t set this, it will automatically use the value chosen when you first set up the Web SDK.\nIf that’s not available, it will use your browser’s settings instead.\n\n@defaultValue `en-US`", "required": false, "defaultValue": "`en-US`", "tags": { "defaultValue": "`en-US`" } }, "subscriptionBillingInterval": { "name": "subscriptionBillingInterval", "kind": "property", "type": "\"DAY\" | \"WEEK\" | \"MONTH\" | \"YEAR\" | undefined", "description": "Billing plan interval. The interval of which the customer is receiving goods or services.", "fullDescription": "Billing plan interval. The interval of which the customer is receiving goods or services.\n\n@example\n```typescript\nsubscriptionBillingInterval: \"DAY\" // Daily billing\nsubscriptionBillingInterval: \"WEEK\" // Weekly billing\nsubscriptionBillingInterval: \"MONTH\" // Monthly billing\nsubscriptionBillingInterval: \"YEAR\" // Yearly billing\n```", "required": false, "tags": { "example": "```typescript\nsubscriptionBillingInterval: \"DAY\" // Daily billing\nsubscriptionBillingInterval: \"WEEK\" // Weekly billing\nsubscriptionBillingInterval: \"MONTH\" // Monthly billing\nsubscriptionBillingInterval: \"YEAR\" // Yearly billing\n```" } }, "subscriptionBillingIntervalFrequency": { "name": "subscriptionBillingIntervalFrequency", "kind": "property", "type": "number | undefined", "description": "Defines the billing plan interval frequency (integer >= 1).\n\nControls how often billing occurs within the specified interval type.", "fullDescription": "Defines the billing plan interval frequency (integer >= 1).\n\nControls how often billing occurs within the specified interval type.\n\n@example\n```typescript\n// Weekly billing (once per week)\nsubscriptionBillingIntervalFrequency: 1\n\n// Every second month\nsubscriptionBillingIntervalFrequency: 2\n\n// Twice per month (bi-weekly)\nsubscriptionBillingIntervalFrequency: 2\n```\n@minimum 1", "required": false, "tags": { "example": "```typescript\n// Weekly billing (once per week)\nsubscriptionBillingIntervalFrequency: 1\n\n// Every second month\nsubscriptionBillingIntervalFrequency: 2\n\n// Twice per month (bi-weekly)\nsubscriptionBillingIntervalFrequency: 2\n```", "minimum": "1" } } }, "tags": {}, "examples": [] }, "KlarnaPaymentButtonConfig": { "name": "KlarnaPaymentButtonConfig", "kind": "interface", "description": "", "extends": ["ButtonConfiguration"], "members": { "initiate": { "name": "initiate", "kind": "property", "type": "InitiateLegacyCallback | PresentationInitiateCallback | undefined", "description": "The function is triggered after the button is clicked.\n\nReturn a promise that resolves to a {@link PaymentRequestData} object if you want\nto create a payment request on the client side.\n\nReturn a promise that resolves to `{ paymentRequestUrl }` to continue from a payment request URL.\n\nReturn a promise that resolves to an object with an optional `returnUrl` if you want\nto redirect the customer to a success page. This is typically used when you have\ncustom logic on the server side which does not necessarily create a payment request.\nOne example is when you use `payment/authorize` which returns an approved transaction.", "required": false, "tags": {} } }, "tags": {}, "examples": [] }, "KlarnaPayment": { "name": "KlarnaPayment", "kind": "interface", "description": "The Klarna Payment interface provides access to the payment request API.\n\nAccepting a payment using the Klarna Payment button:", "fullDescription": "The Klarna Payment interface provides access to the payment request API.\n\nAccepting a payment using the Klarna Payment button:\n\n@exampleGroup label=\"Example\"\n@example Typescript\n```tsx\nconst klarna = ...;\n\n// Handle payment request completion\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n await fetch(\"https://example.com/my-backend\", {\n method: 'POST',\n body: JSON.stringify({\n klarnaNetworkSessionToken: paymentRequest.stateContext.klarnaNetworkSessionToken\n }),\n });\n});\n\n// Implement the initiate function to create a payment request.\nklarna.Payment.button({\n initiate: () => {\n return {\n currency: \"USD\",\n amount: 1000\n },\n }\n}).mount(\"#button-container\");\n```\n\n@example HTML\n```tsx\n\n

\n```\n\n@category Payment\n@packageInterface", "extends": [], "members": { "presentation": { "name": "presentation", "kind": "method", "signature": "presentation(data: PaymentPresentationData): Promise", "description": "Returns instructions on how Klarna should be presented in the payment selector\nand UI components to render.\nUse the `instruction` field to determine whether Klarna should be shown, preselected,\nshown exclusively, or hidden. Then mount the returned UI components (icon, header,\nsubheader, message, and **paymentButton**) into your checkout page.\nThe `paymentButton` is the component the customer clicks to start the Klarna purchase flow.", "fullDescription": "@description \"Returns instructions on how Klarna should be presented in the payment selector\nand UI components to render.\nUse the `instruction` field to determine whether Klarna should be shown, preselected,\nshown exclusively, or hidden. Then mount the returned UI components (icon, header,\nsubheader, message, and **paymentButton**) into your checkout page.\nThe `paymentButton` is the component the customer clicks to start the Klarna purchase flow.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Fetch the presentation, handle the instruction, and mount Klarna UI components.\nconst paymentPresentation = await klarna.Payment.presentation({\n amount: 11800,\n currency: \"USD\",\n locale: \"en-US\",\n intent: \"PAY\",\n});\n\nif (paymentPresentation) {\n switch (paymentPresentation.instruction) {\n case \"SHOW_KLARNA\":\n renderKlarnaOption(paymentPresentation);\n break;\n case \"PRESELECT_KLARNA\":\n renderKlarnaOption(paymentPresentation);\n break;\n case \"SHOW_ONLY_KLARNA\":\n document.getElementById(\"other-payment-methods\")?.remove();\n renderKlarnaOption(paymentPresentation);\n break;\n case \"HIDE_KLARNA\":\n document.getElementById(\"klarna-option\")?.remove();\n break;\n default:\n renderKlarnaOption(paymentPresentation);\n break;\n }\n}\n\nfunction renderKlarnaOption(paymentPresentation) {\n const klarnaContainer = document.getElementById(\"klarna-option\");\n\n if (!klarnaContainer) {\n return;\n }\n\n const { paymentOption } = paymentPresentation;\n if (!paymentOption) {\n return;\n }\n\n klarnaContainer.innerHTML = `\n

\n \n

\n `;\n\n // Mount Klarna UI components\n paymentOption.icon\n .component({ shape: \"badge\" })\n .mount(\"#klarna-icon-container\");\n\n paymentOption.header\n .component()\n .mount(\"#klarna-header-container\");\n\n paymentOption.subheader\n .component()\n .mount(\"#klarna-subheader-container\");\n\n if (paymentOption.message) {\n paymentOption.message\n .component()\n .mount(\"#klarna-message-container\");\n }\n\n // Mount the payment button — the customer clicks this to start the Klarna flow\n paymentOption.paymentButton\n .component({\n initiate: async ({ klarnaNetworkSessionToken, paymentOptionId }) => {\n const response = await fetch(\"/api/create-payment-request\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken, paymentOptionId }),\n });\n const { paymentRequestUrl } = await response.json();\n return { paymentRequestUrl };\n },\n })\n .mount(\"#klarna-button-container\");\n}\n```", "package": "Payment", "operationId": "Payment.presentation", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.presentation", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, "button": { "name": "button", "kind": "method", "signature": "button(config: KlarnaPaymentButtonConfig): KlarnaPaymentButton", "description": "Creates a Klarna payment button that handles the customer flow.\nYou provide an `initiate` callback that returns either a `paymentRequestUrl`\n(created server-side) or {@link PaymentRequestData} (created client-side),\nand Klarna takes care of launching the purchase flow.\n\nRegister event handlers (`complete`, `error`, `abort`) **before** mounting\nthe button so that all events are captured from the first interaction.", "fullDescription": "@description \"Creates a Klarna payment button that handles the customer flow.\nYou provide an `initiate` callback that returns either a `paymentRequestUrl`\n(created server-side) or {@link PaymentRequestData} (created client-side),\nand Klarna takes care of launching the purchase flow.\n\nRegister event handlers (`complete`, `error`, `abort`) **before** mounting\nthe button so that all events are captured from the first interaction.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// 1. Register event handlers first\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n console.log(\"Payment completed:\", paymentRequest.state);\n});\n\nklarna.Payment.on(\"error\", async (error) => {\n console.error(\"Payment error:\", error);\n});\n\n// 2. Create and mount the button\nklarna.Payment.button({\n initiate: async ({ klarnaNetworkSessionToken }) => {\n // Create the payment request on your server\n const response = await fetch(\"/api/create-payment-request\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken }),\n });\n const { paymentRequestUrl } = await response.json();\n\n return { paymentRequestUrl };\n },\n}).mount(\"#klarna-button-container\");\n```\n@package Payment\n@operationId Payment.button\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.button\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "config", "type": "KlarnaPaymentButtonConfig", "description": "", "required": true }], "returnType": "KlarnaPaymentButton", "returnDescription": "", "examples": ["```typescript\n// 1. Register event handlers first\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n console.log(\"Payment completed:\", paymentRequest.state);\n});\n\nklarna.Payment.on(\"error\", async (error) => {\n console.error(\"Payment error:\", error);\n});\n\n// 2. Create and mount the button\nklarna.Payment.button({\n initiate: async ({ klarnaNetworkSessionToken }) => {\n // Create the payment request on your server\n const response = await fetch(\"/api/create-payment-request\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken }),\n });\n const { paymentRequestUrl } = await response.json();\n\n return { paymentRequestUrl };\n },\n}).mount(\"#klarna-button-container\");\n```"], "tags": { "description": "\"Creates a Klarna payment button that handles the customer flow.\nYou provide an `initiate` callback that returns either a `paymentRequestUrl`\n(created server-side) or {@link PaymentRequestData} (created client-side),\nand Klarna takes care of launching the purchase flow.\n\nRegister event handlers (`complete`, `error`, `abort`) **before** mounting\nthe button so that all events are captured from the first interaction.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// 1. Register event handlers first\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n console.log(\"Payment completed:\", paymentRequest.state);\n});\n\nklarna.Payment.on(\"error\", async (error) => {\n console.error(\"Payment error:\", error);\n});\n\n// 2. Create and mount the button\nklarna.Payment.button({\n initiate: async ({ klarnaNetworkSessionToken }) => {\n // Create the payment request on your server\n const response = await fetch(\"/api/create-payment-request\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken }),\n });\n const { paymentRequestUrl } = await response.json();\n\n return { paymentRequestUrl };\n },\n}).mount(\"#klarna-button-container\");\n```", "package": "Payment", "operationId": "Payment.button", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.button", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, "on": { "name": "on", "kind": "method", "signature": "on(event: \"complete\", callback: OnCompleteCallback): void", "description": "Register an event handler for the `complete` event. A payment request is\ncompleted when the customer has approved the purchase.\n\nDuring a redirection flow the `complete` handler will trigger once your\npage has loaded on the success page. Pending updates are triggered even if\nthe event handler is registered after the page has loaded to avoid the\nneed for polling.\n\nReturn `false` from the callback to prevent automatic redirection to the\n`returnUrl` (e.g. if you want to show a custom confirmation screen). Return `true` and\nKlarna navigates to the `returnUrl`, emitting the `redirect` event first if you\nregistered a handler for it. The `complete` handler always runs before that `redirect`.", "fullDescription": "@description \"Register an event handler for the `complete` event. A payment request is\ncompleted when the customer has approved the purchase.\n\nDuring a redirection flow the `complete` handler will trigger once your\npage has loaded on the success page. Pending updates are triggered even if\nthe event handler is registered after the page has loaded to avoid the\nneed for polling.\n\nReturn `false` from the callback to prevent automatic redirection to the\n`returnUrl` (e.g. if you want to show a custom confirmation screen). Return `true` and\nKlarna navigates to the `returnUrl`, emitting the `redirect` event first if you\nregistered a handler for it. The `complete` handler always runs before that `redirect`.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n\n // Send the token to your backend for authorization\n await fetch(\"https://example.com/api/authorize\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken: token }),\n });\n\n // Return false to prevent automatic redirection to returnUrl\n return false;\n});\n```\n@package Payment\n@operationId Payment.onComplete\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.onComplete\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "event", "type": "\"complete\"", "description": "", "required": true }, { "name": "callback", "type": "OnCompleteCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n\n // Send the token to your backend for authorization\n await fetch(\"https://example.com/api/authorize\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken: token }),\n });\n\n // Return false to prevent automatic redirection to returnUrl\n return false;\n});\n```"], "tags": { "description": "\"Register an event handler for the `complete` event. A payment request is\ncompleted when the customer has approved the purchase.\n\nDuring a redirection flow the `complete` handler will trigger once your\npage has loaded on the success page. Pending updates are triggered even if\nthe event handler is registered after the page has loaded to avoid the\nneed for polling.\n\nReturn `false` from the callback to prevent automatic redirection to the\n`returnUrl` (e.g. if you want to show a custom confirmation screen). Return `true` and\nKlarna navigates to the `returnUrl`, emitting the `redirect` event first if you\nregistered a handler for it. The `complete` handler always runs before that `redirect`.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n\n // Send the token to your backend for authorization\n await fetch(\"https://example.com/api/authorize\", {\n method: \"POST\",\n body: JSON.stringify({ klarnaNetworkSessionToken: token }),\n });\n\n // Return false to prevent automatic redirection to returnUrl\n return false;\n});\n```", "package": "Payment", "operationId": "Payment.onComplete", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.onComplete", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" }, "overloads": [{ "name": "on", "kind": "method", "signature": "on(event: \"error\", callback: OnErrorCallback): void", "description": "Register an event handler for the `error` event. The handler is called\nwhen `initiate()` (including a click on the payment button), `fetch()` or\n`cancel()` fails. The same error is still thrown, or the returned promise\nrejected, after the handler has been called, so `try`/`catch` around your\nown calls keeps working. A failed click on the payment button has no caller\nto catch the error, so this handler is the only place to handle it.\n\nThe handler is not called when the customer closes the payment window\nbefore finishing, which is a cancellation rather than an error, or for\n`presentation()`, which falls back to a default presentation when the\nbackend call fails and rejects when required input such as `currency`\nis missing.\n\nThe `error` parameter may be a {@link PaymentError} (with structured\n`errorCode` and `errorMessage` fields) or a generic `Error`.", "fullDescription": "@description \"Register an event handler for the `error` event. The handler is called\nwhen `initiate()` (including a click on the payment button), `fetch()` or\n`cancel()` fails. The same error is still thrown, or the returned promise\nrejected, after the handler has been called, so `try`/`catch` around your\nown calls keeps working. A failed click on the payment button has no caller\nto catch the error, so this handler is the only place to handle it.\n\nThe handler is not called when the customer closes the payment window\nbefore finishing, which is a cancellation rather than an error, or for\n`presentation()`, which falls back to a default presentation when the\nbackend call fails and rejects when required input such as `currency`\nis missing.\n\nThe `error` parameter may be a {@link PaymentError} (with structured\n`errorCode` and `errorMessage` fields) or a generic `Error`.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Payment.on(\"error\", async (error, paymentRequest) => {\n if (\"errorCode\" in error) {\n // Structured PaymentError\n console.error(`Payment error [${error.errorCode}]: ${error.errorMessage}`);\n } else {\n // Generic Error\n console.error(\"Unexpected error:\", error.message);\n }\n\n if (paymentRequest) {\n console.log(\"Payment request state:\", paymentRequest.state);\n }\n});\n```\n@package Payment\n@operationId Payment.onError\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.onError\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "event", "type": "\"error\"", "description": "", "required": true }, { "name": "callback", "type": "OnErrorCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Payment.on(\"error\", async (error, paymentRequest) => {\n if (\"errorCode\" in error) {\n // Structured PaymentError\n console.error(`Payment error [${error.errorCode}]: ${error.errorMessage}`);\n } else {\n // Generic Error\n console.error(\"Unexpected error:\", error.message);\n }\n\n if (paymentRequest) {\n console.log(\"Payment request state:\", paymentRequest.state);\n }\n});\n```"], "tags": { "description": "\"Register an event handler for the `error` event. The handler is called\nwhen `initiate()` (including a click on the payment button), `fetch()` or\n`cancel()` fails. The same error is still thrown, or the returned promise\nrejected, after the handler has been called, so `try`/`catch` around your\nown calls keeps working. A failed click on the payment button has no caller\nto catch the error, so this handler is the only place to handle it.\n\nThe handler is not called when the customer closes the payment window\nbefore finishing, which is a cancellation rather than an error, or for\n`presentation()`, which falls back to a default presentation when the\nbackend call fails and rejects when required input such as `currency`\nis missing.\n\nThe `error` parameter may be a {@link PaymentError} (with structured\n`errorCode` and `errorMessage` fields) or a generic `Error`.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Payment.on(\"error\", async (error, paymentRequest) => {\n if (\"errorCode\" in error) {\n // Structured PaymentError\n console.error(`Payment error [${error.errorCode}]: ${error.errorMessage}`);\n } else {\n // Generic Error\n console.error(\"Unexpected error:\", error.message);\n }\n\n if (paymentRequest) {\n console.log(\"Payment request state:\", paymentRequest.state);\n }\n});\n```", "package": "Payment", "operationId": "Payment.onError", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.onError", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, { "name": "on", "kind": "method", "signature": "on(event: \"abort\", callback: OnAbortCallback): void", "description": "Register an event handler for the `abort` event. This fires when the\n**customer** cancels the payment request by closing the popup or otherwise\nstopping the process. This is distinct from {@docs-portal-link Payment.cancel}, which is\ninitiated programmatically by the integrator.", "fullDescription": "@description \"Register an event handler for the `abort` event. This fires when the\n**customer** cancels the payment request by closing the popup or otherwise\nstopping the process. This is distinct from {@docs-portal-link Payment.cancel}, which is\ninitiated programmatically by the integrator.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Payment.on(\"abort\", async (paymentRequest) => {\n console.log(\"Payment aborted, reason:\", paymentRequest?.stateReason);\n // Re-enable the checkout button so the customer can try again\n enableCheckoutButton();\n});\n```\n@package Payment\n@operationId Payment.onAbort\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.onAbort\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "event", "type": "\"abort\"", "description": "", "required": true }, { "name": "callback", "type": "OnAbortCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Payment.on(\"abort\", async (paymentRequest) => {\n console.log(\"Payment aborted, reason:\", paymentRequest?.stateReason);\n // Re-enable the checkout button so the customer can try again\n enableCheckoutButton();\n});\n```"], "tags": { "description": "\"Register an event handler for the `abort` event. This fires when the\n**customer** cancels the payment request by closing the popup or otherwise\nstopping the process. This is distinct from {@docs-portal-link Payment.cancel}, which is\ninitiated programmatically by the integrator.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Payment.on(\"abort\", async (paymentRequest) => {\n console.log(\"Payment aborted, reason:\", paymentRequest?.stateReason);\n // Re-enable the checkout button so the customer can try again\n enableCheckoutButton();\n});\n```", "package": "Payment", "operationId": "Payment.onAbort", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.onAbort", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, { "name": "on", "kind": "method", "signature": "on(event: \"shippingaddresschange\", callback: ShippingAddressChangeCallback): void", "description": "The shipping address changed event handler is triggered when the customer changes their\nshipping address during the payment flow. If the shipping address is present in the\ncustomer account, the event will be triggered immediately after the customer has logged\nin. Here, you are given the opportunity to accept or reject the shipping address.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.", "fullDescription": "@description \"The shipping address changed event handler is triggered when the customer changes their\nshipping address during the payment flow. If the shipping address is present in the\ncustomer account, the event will be triggered immediately after the customer has logged\nin. Here, you are given the opportunity to accept or reject the shipping address.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Payment.on(\"shippingaddresschange\", (paymentRequest, shippingAddress) => {\n // 1. Accept — return a list of shipping options.\n // The customer will be prompted to select one.\n if (canShipTo(shippingAddress)) {\n return {\n shippingOptions: [\n {\n shippingOptionReference: \"standard\",\n amount: 500,\n displayName: \"Standard Shipping\",\n description: \"3-5 business days\",\n },\n {\n shippingOptionReference: \"express\",\n amount: 1500,\n displayName: \"Express Shipping\",\n description: \"1-2 business days\",\n shippingType: \"EXPRESS\",\n },\n ],\n // 2. Accept with preselection — return selectedShippingOptionReference along\n // with updated amount and lineItems to skip the selection screen.\n amount: totalWithShipping,\n lineItems: [\n ...lineItems,\n { name: \"Standard Shipping\", quantity: 1, totalAmount: 500 },\n ],\n selectedShippingOptionReference: \"standard\",\n };\n }\n\n // 3. Reject — return a rejectionReason to prompt the customer for a new address.\n // Available reasons: POSTAL_CODE_NOT_SUPPORTED, CITY_NOT_SUPPORTED,\n // REGION_NOT_SUPPORTED, COUNTRY_NOT_SUPPORTED, ADDRESS_NOT_SUPPORTED.\n return {\n rejectionReason: \"COUNTRY_NOT_SUPPORTED\",\n };\n});\n```\n@package Payment\n@operationId Payment.onShippingAddressChange\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.onShippingAddressChange\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "event", "type": "\"shippingaddresschange\"", "description": "", "required": true }, { "name": "callback", "type": "ShippingAddressChangeCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Payment.on(\"shippingaddresschange\", (paymentRequest, shippingAddress) => {\n // 1. Accept — return a list of shipping options.\n // The customer will be prompted to select one.\n if (canShipTo(shippingAddress)) {\n return {\n shippingOptions: [\n {\n shippingOptionReference: \"standard\",\n amount: 500,\n displayName: \"Standard Shipping\",\n description: \"3-5 business days\",\n },\n {\n shippingOptionReference: \"express\",\n amount: 1500,\n displayName: \"Express Shipping\",\n description: \"1-2 business days\",\n shippingType: \"EXPRESS\",\n },\n ],\n // 2. Accept with preselection — return selectedShippingOptionReference along\n // with updated amount and lineItems to skip the selection screen.\n amount: totalWithShipping,\n lineItems: [\n ...lineItems,\n { name: \"Standard Shipping\", quantity: 1, totalAmount: 500 },\n ],\n selectedShippingOptionReference: \"standard\",\n };\n }\n\n // 3. Reject — return a rejectionReason to prompt the customer for a new address.\n // Available reasons: POSTAL_CODE_NOT_SUPPORTED, CITY_NOT_SUPPORTED,\n // REGION_NOT_SUPPORTED, COUNTRY_NOT_SUPPORTED, ADDRESS_NOT_SUPPORTED.\n return {\n rejectionReason: \"COUNTRY_NOT_SUPPORTED\",\n };\n});\n```"], "tags": { "description": "\"The shipping address changed event handler is triggered when the customer changes their\nshipping address during the payment flow. If the shipping address is present in the\ncustomer account, the event will be triggered immediately after the customer has logged\nin. Here, you are given the opportunity to accept or reject the shipping address.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Payment.on(\"shippingaddresschange\", (paymentRequest, shippingAddress) => {\n // 1. Accept — return a list of shipping options.\n // The customer will be prompted to select one.\n if (canShipTo(shippingAddress)) {\n return {\n shippingOptions: [\n {\n shippingOptionReference: \"standard\",\n amount: 500,\n displayName: \"Standard Shipping\",\n description: \"3-5 business days\",\n },\n {\n shippingOptionReference: \"express\",\n amount: 1500,\n displayName: \"Express Shipping\",\n description: \"1-2 business days\",\n shippingType: \"EXPRESS\",\n },\n ],\n // 2. Accept with preselection — return selectedShippingOptionReference along\n // with updated amount and lineItems to skip the selection screen.\n amount: totalWithShipping,\n lineItems: [\n ...lineItems,\n { name: \"Standard Shipping\", quantity: 1, totalAmount: 500 },\n ],\n selectedShippingOptionReference: \"standard\",\n };\n }\n\n // 3. Reject — return a rejectionReason to prompt the customer for a new address.\n // Available reasons: POSTAL_CODE_NOT_SUPPORTED, CITY_NOT_SUPPORTED,\n // REGION_NOT_SUPPORTED, COUNTRY_NOT_SUPPORTED, ADDRESS_NOT_SUPPORTED.\n return {\n rejectionReason: \"COUNTRY_NOT_SUPPORTED\",\n };\n});\n```", "package": "Payment", "operationId": "Payment.onShippingAddressChange", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.onShippingAddressChange", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, { "name": "on", "kind": "method", "signature": "on(event: \"shippingoptionselect\", callback: ShippingOptionSelectCallback): void", "description": "The shipping option selected event handler is triggered when the customer selects a\nshipping option during the payment flow. Here, you are given the opportunity to accept\nor reject the shipping option.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.", "fullDescription": "@description \"The shipping option selected event handler is triggered when the customer selects a\nshipping option during the payment flow. Here, you are given the opportunity to accept\nor reject the shipping option.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\nklarna.Payment.on(\"shippingoptionselect\", async (paymentRequest, shippingOption) => {\n // 1. Accept — return the updated order payload with the selected shipping\n // cost added to amount and lineItems.\n if (isValidOption(shippingOption)) {\n const { amount } = await fetch(\"/cart\", {\n method: \"POST\",\n body: JSON.stringify({ shipping_option: shippingOption }),\n });\n\n return {\n amount,\n lineItems: [\n ...lineItems,\n { name: \"Shipping\", quantity: 1, totalAmount: 500 },\n ],\n };\n }\n\n // 2. Reject — return a rejectionReason to prompt the customer to select\n // a different option. Available reasons: INVALID_OPTION.\n return {\n rejectionReason: \"INVALID_OPTION\",\n };\n});\n```\n@package Payment\n@operationId Payment.onShippingOptionSelect\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.onShippingOptionSelect\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true\n@param callback Shipping option selected event handler callback", "parameters": [{ "name": "event", "type": "\"shippingoptionselect\"", "description": "", "required": true }, { "name": "callback", "type": "ShippingOptionSelectCallback", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\nklarna.Payment.on(\"shippingoptionselect\", async (paymentRequest, shippingOption) => {\n // 1. Accept — return the updated order payload with the selected shipping\n // cost added to amount and lineItems.\n if (isValidOption(shippingOption)) {\n const { amount } = await fetch(\"/cart\", {\n method: \"POST\",\n body: JSON.stringify({ shipping_option: shippingOption }),\n });\n\n return {\n amount,\n lineItems: [\n ...lineItems,\n { name: \"Shipping\", quantity: 1, totalAmount: 500 },\n ],\n };\n }\n\n // 2. Reject — return a rejectionReason to prompt the customer to select\n // a different option. Available reasons: INVALID_OPTION.\n return {\n rejectionReason: \"INVALID_OPTION\",\n };\n});\n```"], "tags": { "description": "\"The shipping option selected event handler is triggered when the customer selects a\nshipping option during the payment flow. Here, you are given the opportunity to accept\nor reject the shipping option.\n\nIf you did not return anything during the 10 seconds after receiving this event, the\ncustomer will see the error screen and payment request will be aborted.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\nklarna.Payment.on(\"shippingoptionselect\", async (paymentRequest, shippingOption) => {\n // 1. Accept — return the updated order payload with the selected shipping\n // cost added to amount and lineItems.\n if (isValidOption(shippingOption)) {\n const { amount } = await fetch(\"/cart\", {\n method: \"POST\",\n body: JSON.stringify({ shipping_option: shippingOption }),\n });\n\n return {\n amount,\n lineItems: [\n ...lineItems,\n { name: \"Shipping\", quantity: 1, totalAmount: 500 },\n ],\n };\n }\n\n // 2. Reject — return a rejectionReason to prompt the customer to select\n // a different option. Available reasons: INVALID_OPTION.\n return {\n rejectionReason: \"INVALID_OPTION\",\n };\n});\n```", "package": "Payment", "operationId": "Payment.onShippingOptionSelect", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.onShippingOptionSelect", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true", "param": "Shipping option selected event handler callback" } }] }, "off": { "name": "off", "kind": "method", "signature": "off(event: string, callback: Function): void", "description": "Unregister an event handler for the given event. Pass the same function\nreference that was used when registering with `on()`. This is useful for\ncleanup when your component unmounts or when you need to swap handlers.", "fullDescription": "@description \"Unregister an event handler for the given event. Pass the same function\nreference that was used when registering with `on()`. This is useful for\ncleanup when your component unmounts or when you need to swap handlers.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Keep a reference to the handler so it can be removed later\nconst onComplete = async (paymentRequest) => {\n await handleCompletion(paymentRequest);\n return true;\n};\n\n// Register\nklarna.Payment.on(\"complete\", onComplete);\n\n// Later, unregister (e.g. on component unmount)\nklarna.Payment.off(\"complete\", onComplete);\n```\n@package Payment\n@operationId Payment.off\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.off\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "event", "type": "string", "description": "", "required": true }, { "name": "callback", "type": "Function", "description": "", "required": true }], "returnType": "void", "returnDescription": "", "examples": ["```typescript\n// Keep a reference to the handler so it can be removed later\nconst onComplete = async (paymentRequest) => {\n await handleCompletion(paymentRequest);\n return true;\n};\n\n// Register\nklarna.Payment.on(\"complete\", onComplete);\n\n// Later, unregister (e.g. on component unmount)\nklarna.Payment.off(\"complete\", onComplete);\n```"], "tags": { "description": "\"Unregister an event handler for the given event. Pass the same function\nreference that was used when registering with `on()`. This is useful for\ncleanup when your component unmounts or when you need to swap handlers.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Keep a reference to the handler so it can be removed later\nconst onComplete = async (paymentRequest) => {\n await handleCompletion(paymentRequest);\n return true;\n};\n\n// Register\nklarna.Payment.on(\"complete\", onComplete);\n\n// Later, unregister (e.g. on component unmount)\nklarna.Payment.off(\"complete\", onComplete);\n```", "package": "Payment", "operationId": "Payment.off", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.off", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, "fetch": { "name": "fetch", "kind": "method", "signature": "fetch(paymentRequestUrl: string): Promise", "description": "Fetches the current state of a payment request. It's only possible to fetch\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nThis is useful in redirect flows where the customer returns to your site\nand you need to check the payment request state to determine the outcome.", "fullDescription": "@description \"Fetches the current state of a payment request. It's only possible to fetch\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nThis is useful in redirect flows where the customer returns to your site\nand you need to check the payment request state to determine the outcome.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Fetch by payment request Url\nconst paymentRequest = await klarna.Payment.fetch(\"https://pay.klarna.com/l/...\");\n\nif (paymentRequest.state === \"COMPLETED\") {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n // Send the token to your backend for authorization\n await authorizePayment(token);\n} else if (paymentRequest.state === \"DECLINED\") {\n console.error(\"Payment declined:\", paymentRequest.stateReason);\n}\n```\n@package Payment\n@operationId Payment.fetch\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.fetch\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "paymentRequestUrl", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Fetch by payment request Url\nconst paymentRequest = await klarna.Payment.fetch(\"https://pay.klarna.com/l/...\");\n\nif (paymentRequest.state === \"COMPLETED\") {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n // Send the token to your backend for authorization\n await authorizePayment(token);\n} else if (paymentRequest.state === \"DECLINED\") {\n console.error(\"Payment declined:\", paymentRequest.stateReason);\n}\n```"], "tags": { "description": "\"Fetches the current state of a payment request. It's only possible to fetch\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nThis is useful in redirect flows where the customer returns to your site\nand you need to check the payment request state to determine the outcome.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Fetch by payment request Url\nconst paymentRequest = await klarna.Payment.fetch(\"https://pay.klarna.com/l/...\");\n\nif (paymentRequest.state === \"COMPLETED\") {\n const token = paymentRequest.stateContext?.klarnaNetworkSessionToken;\n // Send the token to your backend for authorization\n await authorizePayment(token);\n} else if (paymentRequest.state === \"DECLINED\") {\n console.error(\"Payment declined:\", paymentRequest.stateReason);\n}\n```", "package": "Payment", "operationId": "Payment.fetch", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.fetch", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, "cancel": { "name": "cancel", "kind": "method", "signature": "cancel(paymentRequestId: string): Promise", "description": "Cancels the payment request with the given ID. It's only possible to cancel\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nUse this when the customer clears their cart, starts a new checkout session,\nor you otherwise need to invalidate an in-progress payment request.", "fullDescription": "@description \"Cancels the payment request with the given ID. It's only possible to cancel\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nUse this when the customer clears their cart, starts a new checkout session,\nor you otherwise need to invalidate an in-progress payment request.\"\n\n@exampleGroup label=\"Example\"\n@example\n```typescript\n// Cancel an existing payment request when the customer empties their cart\nconst cancelledRequest = await klarna.Payment.cancel(\"kr_payment_req_123\");\nconsole.log(\"Payment request cancelled, state:\", cancelledRequest.state);\n```\n@deprecated Sub-Partners should not cancel payment requests owned by the Acquiring Partner.\nThis method will be removed in a future release.\n@package Payment\n@operationId Payment.cancel\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage deprecated\n@klarna-operation-id Payment.cancel\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "paymentRequestId", "type": "string", "description": "", "required": true }], "returnType": "Promise", "returnDescription": "", "examples": ["```typescript\n// Cancel an existing payment request when the customer empties their cart\nconst cancelledRequest = await klarna.Payment.cancel(\"kr_payment_req_123\");\nconsole.log(\"Payment request cancelled, state:\", cancelledRequest.state);\n```"], "tags": { "description": "\"Cancels the payment request with the given ID. It's only possible to cancel\npayment requests created by the same client/credentials.\n\nPass the **payment request URL** received from the payment request creation response.\n\nUse this when the customer clears their cart, starts a new checkout session,\nor you otherwise need to invalidate an in-progress payment request.\"", "exampleGroup": "label=\"Example\"", "example": "```typescript\n// Cancel an existing payment request when the customer empties their cart\nconst cancelledRequest = await klarna.Payment.cancel(\"kr_payment_req_123\");\nconsole.log(\"Payment request cancelled, state:\", cancelledRequest.state);\n```", "deprecated": "Sub-Partners should not cancel payment requests owned by the Acquiring Partner.\nThis method will be removed in a future release.", "package": "Payment", "operationId": "Payment.cancel", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "deprecated", "klarna-operation-id": "Payment.cancel", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } }, "initiate": { "name": "initiate", "kind": "method", "signature": "initiate(data: InitiateLegacyCallback | InitiateCallback, options?: PaymentRequestOptions | undefined): Promise", "description": "Initiates a payment with Klarna. Use this method only if you absolutely need to own your\nbutton. Otherwise, use the {@docs-portal-link Payment.button} method. If you use this method\nalong with initiationMode of `DEVICE_BEST` or `ON_PAGE`, it has to be called right after\nthe button is clicked. If there are long running operations such as network requests, you\ncan do that within the callback.", "fullDescription": "@description \"Initiates a payment with Klarna. Use this method only if you absolutely need to own your\nbutton. Otherwise, use the {@docs-portal-link Payment.button} method. If you use this method\nalong with initiationMode of `DEVICE_BEST` or `ON_PAGE`, it has to be called right after\nthe button is clicked. If there are long running operations such as network requests, you\ncan do that within the callback.\"\n\n@exampleGroup label=\"Example\"\n@example Typescript\n```typescript\n// Prefer Payment.button() — it handles click timing and popup blockers automatically.\n// Use initiate() only if you need full control over your own button.\n// Call initiate immediately after a click event.\n// Move network requests inside the callback to avoid browser popup blockers.\nlet isInitiating = false;\n\n// Suppose \"payWithKlarnaButton\" is your checkout button\npayWithKlarnaButton.addEventListener('click', async () => {\n if (isInitiating) {\n return;\n }\n\n try {\n isInitiating = true;\n payWithKlarnaButton.disabled = true;\n\n await klarna.Payment.initiate(async ({ klarnaNetworkSessionToken }) => {\n // Do network requests inside the callback.\n // The klarnaNetworkSessionToken can optionally be sent to your backend\n // for server-side payment request creation.\n const paymentData = await createPaymentSession(klarnaNetworkSessionToken);\n\n return {\n currency: \"USD\",\n amount: paymentData.amount,\n customerInteractionConfig: {\n returnUrl: \"https://example.com/success\",\n },\n };\n }, {\n initiationMode: \"DEVICE_BEST\",\n });\n } catch (error) {\n console.error('Payment initiation failed:', error);\n } finally {\n isInitiating = false;\n payWithKlarnaButton.disabled = false;\n }\n});\n```\n@package Payment\n@operationId Payment.initiate\n@klarna-sdk-package Payment\n@klarna-lifecycle-stage general-availability\n@klarna-operation-id Payment.initiate\n@klarna-implementation-available-playground true\n@klarna-implementation-available-production true", "parameters": [{ "name": "data", "type": "InitiateLegacyCallback | InitiateCallback", "description": "", "required": true }, { "name": "options", "type": "PaymentRequestOptions | undefined", "description": "", "required": false }], "returnType": "Promise", "returnDescription": "", "examples": ["Typescript\n```typescript\n// Prefer Payment.button() — it handles click timing and popup blockers automatically.\n// Use initiate() only if you need full control over your own button.\n// Call initiate immediately after a click event.\n// Move network requests inside the callback to avoid browser popup blockers.\nlet isInitiating = false;\n\n// Suppose \"payWithKlarnaButton\" is your checkout button\npayWithKlarnaButton.addEventListener('click', async () => {\nif (isInitiating) {\nreturn;\n}\n\ntry {\nisInitiating = true;\npayWithKlarnaButton.disabled = true;\n\nawait klarna.Payment.initiate(async ({ klarnaNetworkSessionToken }) => {\n// Do network requests inside the callback.\n// The klarnaNetworkSessionToken can optionally be sent to your backend\n// for server-side payment request creation.\nconst paymentData = await createPaymentSession(klarnaNetworkSessionToken);\n\nreturn {\ncurrency: \"USD\",\namount: paymentData.amount,\ncustomerInteractionConfig: {\n returnUrl: \"https://example.com/success\",\n},\n};\n}, {\ninitiationMode: \"DEVICE_BEST\",\n});\n} catch (error) {\nconsole.error('Payment initiation failed:', error);\n} finally {\nisInitiating = false;\npayWithKlarnaButton.disabled = false;\n}\n});\n```"], "tags": { "description": "\"Initiates a payment with Klarna. Use this method only if you absolutely need to own your\nbutton. Otherwise, use the {@docs-portal-link Payment.button} method. If you use this method\nalong with initiationMode of `DEVICE_BEST` or `ON_PAGE`, it has to be called right after\nthe button is clicked. If there are long running operations such as network requests, you\ncan do that within the callback.\"", "exampleGroup": "label=\"Example\"", "example": "Typescript\n```typescript\n// Prefer Payment.button() — it handles click timing and popup blockers automatically.\n// Use initiate() only if you need full control over your own button.\n// Call initiate immediately after a click event.\n// Move network requests inside the callback to avoid browser popup blockers.\nlet isInitiating = false;\n\n// Suppose \"payWithKlarnaButton\" is your checkout button\npayWithKlarnaButton.addEventListener('click', async () => {\nif (isInitiating) {\nreturn;\n}\n\ntry {\nisInitiating = true;\npayWithKlarnaButton.disabled = true;\n\nawait klarna.Payment.initiate(async ({ klarnaNetworkSessionToken }) => {\n// Do network requests inside the callback.\n// The klarnaNetworkSessionToken can optionally be sent to your backend\n// for server-side payment request creation.\nconst paymentData = await createPaymentSession(klarnaNetworkSessionToken);\n\nreturn {\ncurrency: \"USD\",\namount: paymentData.amount,\ncustomerInteractionConfig: {\n returnUrl: \"https://example.com/success\",\n},\n};\n}, {\ninitiationMode: \"DEVICE_BEST\",\n});\n} catch (error) {\nconsole.error('Payment initiation failed:', error);\n} finally {\nisInitiating = false;\npayWithKlarnaButton.disabled = false;\n}\n});\n```", "package": "Payment", "operationId": "Payment.initiate", "klarna-sdk-package": "Payment", "klarna-lifecycle-stage": "general-availability", "klarna-operation-id": "Payment.initiate", "klarna-implementation-available-playground": "true", "klarna-implementation-available-production": "true" } } }, "tags": { "exampleGroup": "label=\"Example\"", "example": "HTML\n```tsx\n\n

\n```", "category": "Payment", "packageInterface": "" }, "examples": ["Typescript\n```tsx\nconst klarna = ...;\n\n// Handle payment request completion\nklarna.Payment.on(\"complete\", async (paymentRequest) => {\nawait fetch(\"https://example.com/my-backend\", {\nmethod: 'POST',\nbody: JSON.stringify({\nklarnaNetworkSessionToken: paymentRequest.stateContext.klarnaNetworkSessionToken\n}),\n});\n});\n\n// Implement the initiate function to create a payment request.\nklarna.Payment.button({\ninitiate: () => {\nreturn {\ncurrency: \"USD\",\namount: 1000\n},\n}\n}).mount(\"#button-container\");\n```", "HTML\n```tsx\n\n

\n```"] }, "KlarnaPaymentButton": { "name": "KlarnaPaymentButton", "kind": "interface", "description": "", "extends": ["KlarnaButton"], "members": {}, "tags": {}, "examples": [] }, "PaymentPresentation": { "name": "PaymentPresentation", "kind": "interface", "description": "", "extends": [], "members": { "instruction": { "name": "instruction", "kind": "property", "type": "\"SHOW_KLARNA\" | \"PRESELECT_KLARNA\" | \"SHOW_ONLY_KLARNA\" | \"HIDE_KLARNA\"", "description": "Instruction on how Klarna should be presented in the payment selector:\n\n- `SHOW_ONLY_KLARNA`: The payment selector must show only Klarna and collapse all other options with a UX pattern implying that no choice needs to be made as it was done previously. This is returned when the customer has already approved the purchase or shown clear intent for paying with Klarna.\n- `PRESELECT_KLARNA`: The payment selector must pre-select Klarna and put it first as conversion will be increased. Klarna suggests collapsing all other payment methods. This is returned when the customer is recognized as a Klarna user and likely to pay with Klarna.\n- `SHOW_KLARNA` (default): Klarna should be available in the payment selector, respecting the ordering of the merchant and the Klarna guidelines.\n- `HIDE_KLARNA`: Don't show a Klarna button or offer Klarna.", "required": true, "tags": {} }, "paymentStatus": { "name": "paymentStatus", "kind": "property", "type": "\"PENDING_PARTNER_AUTHORIZATION\" | \"REQUIRES_CUSTOMER_ACTION\"", "description": "The payment status of the payment.\n\n- `PENDING_PARTNER_AUTHORIZATION`: The payment is pending partner authorization.\n- `REQUIRES_CUSTOMER_ACTION`: The payment requires customer action.", "required": true, "tags": {} }, "paymentOption": { "name": "paymentOption", "kind": "property", "type": "{ icon: { component: (config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement; }; header: { component: () => KlarnaUIElement; }; message?: { component: () => KlarnaUIElement; } | undefined; subheader: { component: () => KlarnaUIElement; }; paymentButton: { component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton; }; badge?: { component: () => KlarnaUIElement; } | undefined; terms?: { component: () => KlarnaUIElement; } | undefined; paymentOptionId: string; } | undefined", "description": "Payment option configuration for new payments.", "fullDescription": "Payment option configuration for new payments.\n\n@param icon A UI component that renders the Klarna icon.\n@param header A UI component that renders the header.\n@param message A UI component that renders the message.\n@param subheader A UI component that renders the subheader.\n@param paymentButton A UI component that renders the button for this payment option.\n@param badge A UI component that renders the badge (optional).\n@param terms A UI component that renders the terms (optional).\n@param paymentOptionId Unique identifier for the payment option.", "required": false, "tags": { "param": "Unique identifier for the payment option." }, "members": { "icon": { "name": "icon", "kind": "property", "type": "{ component: (config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "(config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "header": { "name": "header", "kind": "property", "type": "{ component: () => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "message": { "name": "message", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "subheader": { "name": "subheader", "kind": "property", "type": "{ component: () => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "paymentButton": { "name": "paymentButton", "kind": "property", "type": "{ component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "(config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton", "description": "", "required": true, "tags": {} } } }, "badge": { "name": "badge", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "terms": { "name": "terms", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "paymentOptionId": { "name": "paymentOptionId", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} } } }, "savedPaymentOption": { "name": "savedPaymentOption", "kind": "property", "type": "{ icon: { component: (config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement; }; header: { component: () => KlarnaUIElement; }; message?: { component: () => KlarnaUIElement; } | undefined; subheader: { component: () => KlarnaUIElement; }; paymentButton: { component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton; }; badge?: { component: () => KlarnaUIElement; } | undefined; terms?: { component: () => KlarnaUIElement; } | undefined; paymentOptionId: string; } | undefined", "description": "Saved payment option configuration for tokenized customers.", "fullDescription": "Saved payment option configuration for tokenized customers.\n\n@param icon A UI component that renders the icon.\n@param header A UI component that renders the header.\n@param message A UI component that renders the message.\n@param subheader A UI component that renders the subheader.\n@param paymentButton A UI component that renders the button for this payment option.\n@param badge A UI component that renders the badge (optional).\n@param terms A UI component that renders the terms (optional).\n@param paymentOptionId Unique identifier for the saved payment option.", "required": false, "tags": { "param": "Unique identifier for the saved payment option." }, "members": { "icon": { "name": "icon", "kind": "property", "type": "{ component: (config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "(config: { shape: \"default\" | \"badge\" | \"rectangle\" | \"square\"; }) => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "header": { "name": "header", "kind": "property", "type": "{ component: () => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "message": { "name": "message", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "subheader": { "name": "subheader", "kind": "property", "type": "{ component: () => KlarnaUIElement; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "paymentButton": { "name": "paymentButton", "kind": "property", "type": "{ component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton; }", "description": "", "required": true, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "(config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton", "description": "", "required": true, "tags": {} } } }, "badge": { "name": "badge", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "terms": { "name": "terms", "kind": "property", "type": "{ component: () => KlarnaUIElement; } | undefined", "description": "", "required": false, "tags": {}, "members": { "component": { "name": "component", "kind": "property", "type": "() => KlarnaUIElement", "description": "", "required": true, "tags": {} } } }, "paymentOptionId": { "name": "paymentOptionId", "kind": "property", "type": "string", "description": "", "required": true, "tags": {} } } } }, "tags": {}, "examples": [] }, "PaymentRequestId": { "name": "PaymentRequestId", "kind": "type", "type": "string", "description": "", "tags": {} }, "PaymentRequestUrl": { "name": "PaymentRequestUrl", "kind": "type", "type": "string", "description": "", "tags": {} }, "PaymentPresentationInstructionType": { "name": "PaymentPresentationInstructionType", "kind": "type", "type": "`${PaymentPresentationInstruction}`", "description": "", "tags": {} }, "PaymentRequestIntentType": { "name": "PaymentRequestIntentType", "kind": "type", "type": "`${PaymentRequestIntent}`", "description": "Payment request intent type.", "tags": { "klarna-lifecycle-stage": "future-release" } }, "ShippingModeType": { "name": "ShippingModeType", "kind": "type", "type": "`${ShippingMode}`", "description": "", "tags": {} }, "CollectCustomerProfileType": { "name": "CollectCustomerProfileType", "kind": "type", "type": "`${CollectCustomerProfile}`", "description": "", "tags": {} }, "RequestCustomerTokenScopeType": { "name": "RequestCustomerTokenScopeType", "kind": "type", "type": "`${RequestCustomerTokenScope}`", "description": "Scope type for requested customer tokens.", "tags": { "klarna-lifecycle-stage": "future-release" } }, "AgenticProtocolData": { "name": "AgenticProtocolData", "kind": "type", "type": "| AgenticProtocolDataAcp | AgenticProtocolDataUcp", "description": "Protocol-specific agentic configuration. The `protocol` field discriminates\nwhich agentic protocol is used and which additional fields are required.", "tags": { "category": "Payment", "klarna-lifecycle-stage": "future-release" } }, "PaymentRequestStateType": { "name": "PaymentRequestStateType", "kind": "type", "type": "`${PaymentRequestState}`", "description": "", "tags": {} }, "PaymentRequestStateReasonType": { "name": "PaymentRequestStateReasonType", "kind": "type", "type": "`${PaymentRequestStateReason}`", "description": "", "tags": {} }, "PaymentToken": { "name": "PaymentToken", "kind": "type", "type": "string", "description": "The payment token represents a customer approval for payment.\n\nKlarna issues this token when a Payment Request completes.", "tags": {} }, "ShippingOptionRejectionReasonType": { "name": "ShippingOptionRejectionReasonType", "kind": "type", "type": "`${ShippingOptionRejectionReason}`", "description": "", "tags": {} }, "ShippingOptionSelectCallback": { "name": "ShippingOptionSelectCallback", "kind": "type", "type": "( paymentRequest: PaymentRequest, selectedShippingOption: { shippingOptionReference?: string; } ) => Promise< ShippingOptionSelectSuccessResponse | ShippingOptionSelectRejectionResponse >", "description": "Shipping Option Selected Callback.", "tags": { "category": "Payment" } }, "ShippingRejectionReasonType": { "name": "ShippingRejectionReasonType", "kind": "type", "type": "`${ShippingRejectionReason}`", "description": "", "tags": {} }, "ShippingAddressChangeCallback": { "name": "ShippingAddressChangeCallback", "kind": "type", "type": "( paymentRequest: PaymentRequest, shippingAddress: PartialShippingAddress ) => Promise", "description": "On Shipping Address Change Callback.", "tags": { "category": "Payment" } }, "OnCompleteCallback": { "name": "OnCompleteCallback", "kind": "type", "type": "( paymentRequest: PaymentRequest ) => Promise", "description": "", "tags": {} }, "OnErrorCallback": { "name": "OnErrorCallback", "kind": "type", "type": "( error: PaymentError | Error, paymentRequest?: PaymentRequest ) => Promise", "description": "", "tags": {} }, "OnAbortCallback": { "name": "OnAbortCallback", "kind": "type", "type": "( paymentRequest?: PaymentRequest ) => Promise", "description": "", "tags": {} }, "OnPresentationUpdateCallback": { "name": "OnPresentationUpdateCallback", "kind": "type", "type": "( presentation: PaymentPresentation ) => void", "description": "", "tags": {} }, "FetchPaymentRequestByIdInput": { "name": "FetchPaymentRequestByIdInput", "kind": "type", "type": "PaymentRequestId", "description": "", "tags": { "deprecated": "Prefer passing a {@link PaymentRequestUrl} string to {@link KlarnaPayment.fetch} for new integrations instead of a bare KRN id string." } }, "InitiateLegacyCallback": { "name": "InitiateLegacyCallback", "kind": "type", "type": "() => Promise< PaymentRequestData | { paymentRequestUrl: PaymentRequestUrl } | DeprecatedPaymentRequestIdObject | { returnUrl?: string } >", "description": "", "tags": { "deprecated": "Use {@link InitiateCallback} instead." } }, "InitiateCallback": { "name": "InitiateCallback", "kind": "type", "type": "(params: { klarnaNetworkSessionToken: string; acquiringConfig?: AcquiringConfig; }) => Promise< PaymentRequestData | PaymentRequestUrlHandoff | DeprecatedPaymentRequestIdObject | { returnUrl?: string } >", "description": "", "tags": {} }, "PresentationInitiateCallback": { "name": "PresentationInitiateCallback", "kind": "type", "type": "(params: { klarnaNetworkSessionToken: string; paymentOptionId: string; acquiringConfig?: AcquiringConfig; }) => Promise< PaymentRequestData | PaymentRequestUrlHandoff | DeprecatedPaymentRequestIdObject | { returnUrl?: string } >", "description": "", "tags": {} } } }; function _createMdxContent(props) { const {SdkArticle} = { ..._provideComponents(), ...props.components }; if (!SdkArticle) _missingMdxReference("SdkArticle", true); return _jsx(SdkArticle, { ...sdkArticle }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { sdkArticle, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }