\n\n

\n \n Acquirer Checkout\n

Ammout due:\n {{amount}}\n $\n

\n\n \n

\n
Pay with Card
\n\n
\n
\n
Pay with Klarna
\n\n
\n

\n\n

\n Presentation components:\n

\n \n

\n\n

\n\n \n \n

\n \n \n \n \n \n",[],[154,173],[154],{"_102":182,"_95":109,"_155":183,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":184,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":185,"_98":204},"4d2da98c-618d-11f0-bb82-0224a6c84d84","9a420f53-34d2-4a38-86b3-e24a394df0a9",["D",1752591996071],[186,196],{"_102":187,"_95":188,"_155":189,"_157":183,"_158":136,"_159":135,"_161":162,"_104":190,"_99":191,"_164":192,"_166":193,"_167":22,"_168":-5,"_169":194,"_98":195},"9528465a-72d8-11f0-8bd8-0224a6c84d84","script.js","bb2c571a-54d3-4b72-a550-f4aa4a61fe28",["D",1754493498933],37,"script","/**\n * Initialize Web SDK\n */\nasync function loadKlarnaSdk() {\n const { KlarnaSDK } = await import(\n \"https://s3.int.klarna.net/web-sdk/v2/klarna.mjs\"\n );\n\n const sdkToken = document.querySelector(\"#sdk-token\")?.value;\n // let params = (new URL(document.location)).searchParams;\n // let sdkToken = params.get(\"sdk_token\");\n // there is something wrong with encoding so I've used static string instead\n\n return await KlarnaSDK({\n clientId:\n // \"klarna_test_client_KSNJeUNWc1NuODdXYWNOaGQ4Nk5uWEFoTmZBUWVZaSksMmEzYmMwMGUtMjg5Yi00YjMyLWFjNTMtMDYzZDE2YjU0ZWRlLDEsaUc1alB2WEU0dHRINDAvRXpNUldGTVRidGxBVlpjM3RtTnRuMmNCS2hlUT0\",\n \"klarna_test_client_WC1tN3JBSWxuVXdjL0V3TzhsWXdrZ3AlSUlEV3oxQncsZmU5NTA0NDYtZDQ4ZS00Y2MwLTgxMWUtNmY0NjAzMTJiM2I5LDEsb3BPUWxmYXBDdHFWMk95YkUxWnFTeitZZkpEcFA1SW5RSVNqUEpieTB6cz0\",\n // \"klarna_test_client_KnMlbGMzY3FJZWkyWEl3WlBvV2hkam5tTSVIVkllR1QsMjBmYWJlYTAtZWI0Ni00NGNjLTk2N2ItMmFlYjAxMzI3MjJiLDEsT21CTFZGbEZzYzdCWFZZYXBrSmRIZVk5K2NsU3l6d2YzaGJTcW9JTmZZVT0\",\n locale: \"en-US\",\n // accountId: \"K332722\",\n accountId: \"K2836618\",\n // sdkToken,\n sdkToken:\n \"5d55a0e7-2dce-48f3-ac45-7b4ab77d43b4:XEgf7Prqt7Yd1VyQ:YrvcrVLZEhZ3olriFDjqDZNttglmL2yvK/TQ+5RfiKg/Pd3HbKfGPRKzRj+hMrvNluh3Br/yh1S3CAAO5ctJNuZc3vN4AGvkhl7ubx6THV59Yn9t8i2ydeAh4o4e3QWwvyBWkG5u7f5F5mjlzvI8oFoYj0l25YQNGPXv5lA9XKGe+aA=\",\n });\n}\n\nloadKlarnaSdk().then(async (Klarna) => {\n // setting to window for debugging purpose\n window.Klarna = Klarna;\n\n const intentId = document.querySelector(\"#intent-id\")?.value;\n\n /**\n * Render Klarna Button\n */\n const presentationData = {\n amount: 100,\n currency: \"USD\",\n locale: \"en-US\",\n intents: [\"PAY\"],\n };\n\n const presentationResponse = await Klarna.Payment.presentation(presentationData);\n presentationResponse.header.component().mount(\"#klarna-messaging--header\");\n presentationResponse.subheader.enriched.component().mount(\"#klarna-messaging--subheader\");\n presentationResponse.icon.component().mount(\"#klarna-messaging--icon\");\n\n // it's also possible to use Presentation response to render UI elements\n console.log({ presentationResponse });\n\n const buttonAPI = presentationResponse.paymentButton;\n\n const buttonConfig = {\n intents: presentationData.intents,\n initiate: async () => {\n try {\n const res = await fetch(\"/authorize/\" + intentId, {\n method: \"POST\",\n });\n\n const body = await res.json();\n\n return { paymentRequestId: body.payment_request_id };\n } catch (err) {\n console.log(\"Error fetching authorization data:\", err);\n throw err;\n }\n },\n };\n\n const klarnaButton = buttonAPI.component(buttonConfig).mount(\"#klarna-payment-button\");\n\n Klarna.Payment.on(\"complete\", async (paymentRequest) => {\n console.log({ paymentRequest });\n window.location = paymentRequest.customerInteractionConfig.returnUrl;\n });\n});",[],[109,188],{"_102":197,"_95":198,"_155":199,"_157":183,"_158":136,"_159":160,"_161":162,"_104":200,"_99":32,"_164":176,"_166":201,"_167":22,"_168":-5,"_169":202,"_98":203},"4d2da6ee-618d-11f0-bb82-0224a6c84d84","style.css","4c60d0b9-df62-4e4e-bc6c-5750909fa100",["D",1752591996071],"/* Main container styling */\n\n/* Title styling */\nh1 {\n font-size: 2rem;\n font-weight: bold;\n color: #2c3e50;\n text-align: center;\n margin-bottom: 1.5rem;\n padding-bottom: 0.5rem;\n}\n\ndiv#main-title-pp h1 {\n font-size: 1.2rem;\n}\n\nspan#payment-component-header {\n margin-left: 10px;\n}\n\n/* Button container styling */\n#klarna-button-container {\n margin-top: 1.5rem;\n text-align: center;\n}\n\n/* Payment option frame styling */\n.payment-option-frame {\n border: 1px solid #ddd;\n padding: 1rem;\n margin-bottom: 1rem;\n border-radius: 8px;\n transition: box-shadow 0.3s ease;\n}\n\n.payment-option-frame:hover {\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* Payment header row styling */\n.payment-header-row {\n display: flex;\n align-items: center;\n}\n\n.payment-header {\n margin-left: 0.5rem;\n font-weight: 500;\n color: #555;\n}\n\n.payment-icon {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n/* Subheader styling */\n.payment-details {\n margin-top: 0.5rem;\n font-size: 0.9em;\n color: #777;\n}\n\n#payment-component-icon {\n margin-left: 4px;\n width: 32px;\n}\n\ndiv#main-container-pp {\n background-color: #ffffff;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n max-width: 600px;\n width: 100%;\n}",[],[109,198],[109],{"_102":206,"_95":207,"_155":208,"_157":-5,"_158":136,"_159":209,"_161":162,"_104":210,"_99":211,"_164":212,"_166":213,"_167":22,"_168":-5,"_169":214,"_98":215},"b8af78c8-6243-11f0-9a12-0224a6c84d84","server.js","0bef9646-cbbe-4873-86e1-7650e15736c1",3,["D",1752670344925],2,"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport Handlebars from \"npm:handlebars\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\nconst checkoutTmplbody = (await serveFile(\"/pages/checkout.hbs\", import.meta.url)).body;\nconst checkoutTmpl = Handlebars.compile(await new Response(checkoutTmplbody).text());\n\n// Serve all /frontend files\napp.get(\"/public/**/*\", c => serveFile(c.req.path, import.meta.url));\n\nconst { accountId: ACCOUNT_ID, apiKey: API_KEY } = process.env;\n\nconst authorizeWithKlarna = async (\n amount,\n currency,\n interoperabilityToken,\n returnUrl,\n) => {\n const response = await fetch(\n `https://api-global.test.klarna.com/v2/accounts/${ACCOUNT_ID}/payment/authorize`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Klarna-Interoperability-Token\": interoperabilityToken,\n Authorization: \"Basic \" + API_KEY,\n },\n body: JSON.stringify({\n currency,\n request_payment_transaction: { amount },\n step_up_config: {\n customer_interaction_config: {\n method: \"HANDOVER\",\n return_url: returnUrl,\n },\n },\n }),\n },\n );\n console.log(JSON.stringify({\n currency,\n request_payment_transaction: { amount },\n step_up_config: {\n customer_interaction_config: {\n method: \"HANDOVER\",\n return_url: returnUrl,\n },\n },\n }));\n console.log({ response }, response.status);\n const body = await response.json();\n console.log({ body });\n return body;\n};\n\nconst getKlarnaSDKToken = async (interoperabilityToken) => {\n const response = await fetch(\n `https://api-global.test.klarna.com/v2/accounts/${ACCOUNT_ID}/interoperability/sdk-tokens`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Klarna-Interoperability-Token\": interoperabilityToken,\n Authorization: \"Basic \" + API_KEY,\n },\n },\n );\n\n const { sdk_token: sdkToken } = await response.json();\n return sdkToken;\n};\n\n/**\n * Temporary Database to store payment intents\n */\nconst paymentIntentDB = {\n test: {\n amount: 2000,\n currency: \"USD\",\n interoperabilityToken:\n \"krn:network:us1:test:interoperability:eyJhbGciOiJSUzI1NiIsImtpZCI6IjgyMzA1ZWJjLWI4MTEtMzYzNy1hYTRjLTY2ZWNhMTg3NGYzZCJ9.eyJwYXltZW50X3JlcXVlc3RzIjpbeyJpZCI6ImtybjpwYXltZW50OnVzMTpyZXF1ZXN0OmE5YjlhYzYwLWM5MGYtNmU4Ni1iOGI2LWE3OWZjYjg5NGY4ZiJ9XSwiZXhwIjoxNzQ0NjMyNzM1fQ.Bq2ZxEQqWHTlBgNMw6n04jZpdpNZDhqdSfPENrEU5TAqH2fliVSm9LryzNF9EW5hKh_KyJ_2ZIn_YNRWloPzSqUETzWKI7ipNdbCXoxIf141moVnC4ZTjfOlF_fc6oh-KktGJMplol3sqHWrMvmUbrDeOSlANw_Nnn8O3ybSr99MrXPb9ehNAepB8BEd5Ow7D1nU2RIoSsP32_PQ0IbvtpkqVfQ6lBr5Li-VkngUeuIbLiZrJNxAHms6wG6WazzPdRsqoRZIEFGhHGCRCVp9NT0_kJYdf66nuTumVKG7HOLQSY7hYhiybANmHolR7ElRu5I_-aihWSkBy9-PjidvjQ\",\n returnUrl: \"https://dudekmac--711830ec0ca74f05a369841f2c86c781.web.val.run/public/success.html\",\n },\n};\n\n/**\n * Create payment intent and return the checkout URL\n */\napp.get(\"/intent\", async function(c) {\n const intentId = crypto.randomUUID();\n const { amount, currency, interoperabilityToken, returnUrl } = c.req.query();\n paymentIntentDB[intentId] = {\n amount,\n currency,\n interoperabilityToken,\n returnUrl,\n };\n\n return c.json({\n redirectUrl: `https://dudekmac--0bef9646cbbe487386e17650e15736c1.web.val.run/checkout/${intentId}`,\n });\n});\n\n/**\n * Render checkout page by payment intent id\n */\napp.get(\"/checkout/:intentId\", async function(c) {\n const intentId = c.req.param(\"intentId\");\n const { amount, currency, interoperabilityToken, returnUrl } = paymentIntentDB[intentId];\n\n const authorizeResponse = await authorizeWithKlarna(\n amount,\n currency,\n interoperabilityToken,\n returnUrl,\n );\n const { result, payment_transaction } = authorizeResponse.payment_transaction_response;\n\n if (result === \"APPROVED\") {\n const transactionId = payment_transaction.payment_transaction_id;\n // Transaction already approved, payment_transaction_id can be used to capture the payment\n console.log(\"payment_transaction_id\", { transactionId });\n\n return c.redirect(`${returnUrl}?transactionId=${transactionId}`, 301);\n }\n\n // Otherwise, rendering payment selector:\n const sdkToken = await getKlarnaSDKToken(interoperabilityToken);\n\n return c.html(checkoutTmpl({\n amount,\n currency,\n intentId,\n sdkToken,\n }));\n});\n\n/**\n * Authorize payment with Klarna by payment intent id\n */\napp.post(\"/authorize/:intentId\", async function(c) {\n const intentId = c.req.param(\"intentId\");\n const { amount, currency, interoperabilityToken, returnUrl } = paymentIntentDB[intentId];\n\n const authorizeResponse = await authorizeWithKlarna(\n amount,\n currency,\n interoperabilityToken,\n returnUrl,\n );\n\n return c.json(authorizeResponse.payment_request);\n});\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[207],"files",[152,171,181,186,196,205],"counts",{"_220":32,"_221":160,"_222":32,"_223":224},"pulls","branches","forks","envVars",{"_225":211,"_226":32},"count","emptyCount","contents",[229,232,235],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":230,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":231},["D",1752591996071],[154],{"_102":182,"_95":109,"_155":183,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":233,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":234},["D",1752591996071],[109],{"_102":206,"_95":207,"_155":208,"_157":-5,"_158":136,"_159":209,"_161":162,"_104":236,"_99":211,"_164":212,"_166":213,"_167":22,"_168":-5,"_98":237},["D",1752670344925],[207],"upstreamProject",{"_102":144,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":240},{"_93":241,"_128":242},"misha","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5eFFjMEN6em91cnVPSUFlczRvQldzYml1eiJ9","upstreamBranch",{"_102":139,"_104":245,"_246":247,"_95":43,"_137":144,"_99":248,"_138":-5,"_140":-5,"_249":250,"_106":-5,"_149":22,"_108":109,"_148":241,"_16":146,"_147":96},["D",1750776862802],"updatedAt",["D",1756459848287],140,"lockfileKey","1752650855714-esm.town_v_misha_klarna-acquirer-interoperability@63-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":257,"_227":262,"_269":-7,"_270":271,"_274":-5,"_216":275,"_294":295,"_296":297,"_298":299},{"_102":103,"_95":96,"_104":258,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":259,"_130":260,"_133":261,"_149":22},["D",1752591996071],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[263,265,267],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":230,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":264},[154],{"_102":182,"_95":109,"_155":183,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":233,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":266},[109],{"_102":206,"_95":207,"_155":208,"_157":-5,"_158":136,"_159":209,"_161":162,"_104":236,"_99":211,"_164":212,"_166":213,"_167":22,"_168":-5,"_98":268},[207],"readme","upstream",{"_102":139,"_104":272,"_246":273,"_95":43,"_137":144,"_99":248,"_138":-5,"_140":-5,"_249":250,"_106":-5,"_149":22,"_108":109,"_148":241,"_16":146,"_147":96},["D",1750776862802],["D",1756459848287],"pull",[276,278,282,284,287,291],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":163,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":277,"_98":281},[278],{"_102":172,"_95":173,"_155":174,"_157":156,"_158":136,"_159":160,"_161":162,"_104":175,"_99":32,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":279,"_98":280},[],[154,173],[154],{"_102":182,"_95":109,"_155":183,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":184,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":283,"_98":290},[284,287],{"_102":187,"_95":188,"_155":189,"_157":183,"_158":136,"_159":135,"_161":162,"_104":190,"_99":191,"_164":192,"_166":193,"_167":22,"_168":-5,"_169":285,"_98":286},[],[109,188],{"_102":197,"_95":198,"_155":199,"_157":183,"_158":136,"_159":160,"_161":162,"_104":200,"_99":32,"_164":176,"_166":201,"_167":22,"_168":-5,"_169":288,"_98":289},[],[109,198],[109],{"_102":206,"_95":207,"_155":208,"_157":-5,"_158":136,"_159":209,"_161":162,"_104":210,"_99":211,"_164":212,"_166":213,"_167":22,"_168":-5,"_169":292,"_98":293},[],[207],"previews",[291],"ahead",39,"behind",77,"actionData","errors"]