\n \n

\n Merchant Checkout\n

\n\n

\n Classic and stylish bag in sustainable high quality white leather.\n The perfect accessory for work or for a day down town with friends.\n The bag closures with a zipper and have two inner compartments which\n of one has a zipper.\n

\n\n

\n
Leather Handbag
\n\n
2000 $
\n
\n
Total:
\n\n
2000 $
\n

\n\n

\n\n \n Proceed to checkout\n \n\n

Client side:

\n Interoperability token:\n \n

\n \n \n",[],[109,172],{"_102":180,"_95":181,"_154":182,"_156":155,"_157":136,"_158":135,"_160":161,"_104":183,"_99":184,"_163":185,"_165":186,"_166":22,"_167":-5,"_168":187,"_98":188},"e7c96094-7e8e-11f0-a22c-0224a6c84d84","script.js","360c0b4e-ab21-4ae7-a07f-28340e443341",["D",1755781268758],13,"script","/**\n * Import Web SDK\n */\nasync function loadKlarnaSdk() {\n const { KlarnaSDK } = await import(\"http://localhost:4000/klarna.mjs\");\n\n return await KlarnaSDK({\n clientId:\n \"klarna_test_client_aWJsdz9yU25TeS1uNGQvJFgoamhuTlRKVkRDRXdpKCQsNzBjNzEzOWEtNTI3ZC00ODlmLTk1MzMtY2I3MGVmNzI3MzM0LDEsTGZaTDF1OTRNQ3lRSVF2UXNVMVYyWldDaEFud05RcjgyNVBSN25teFBxVT0\",\n locale: \"en-US\",\n });\n}\n\n/**\n * Creates an order with Aquiring partner and returns back a hosted checkout page url\n */\nconst createOrder = async (amount, currency, interoperabilityToken) => {\n const returnUrl = window.location.href + \"public/success.html\";\n const resp = await fetch(\n `/order?interoperabilityToken=${interoperabilityToken}&amount=${amount}¤cy=${currency}&returnUrl=${returnUrl}`,\n );\n const { redirectUrl } = await resp.json();\n\n return redirectUrl;\n};\n\nloadKlarnaSdk().then(async (Klarna) => {\n // adding to the window for debugging purpose\n window.Klarna = Klarna;\n\n /**\n * Render on-site messaging\n */\n Klarna.Messaging.placement({\n key: \"credit-promotion-auto-size\",\n locale: \"en-US\",\n purchaseAmount: \"2000\",\n }).mount(\"#messaging\");\n\n /**\n * Create payment with acquirer and redirect to payment flow\n */\n document\n .querySelector(\"#checkout-btn\")\n .addEventListener(\"click\", async () => {\n const interoperabilityToken = await Klarna.Interoperability.token();\n const redirectUrl = await createOrder(2000, \"USD\", interoperabilityToken);\n\n window.location = redirectUrl;\n });\n\n Klarna.Payment.button({\n locale: \"en-US\",\n shape: \"default\",\n intents: [\"PAY\"],\n initiate: async () => {\n try {\n const res = await fetch(\n `/paymentRequest?amount=2000¤cy=USD&returnUrl=${window.location.href}`,\n );\n const body = await res.json();\n\n console.log({ body });\n\n // call your server to create a payment request backend side\n return { paymentRequestId: body.payment_request_id };\n } catch (error) {\n console.log(\"Error fetching authorization data:\", error);\n throw error;\n }\n },\n initiationMode: \"DEVICE_BEST\",\n }).mount(\"#kec-button\");\n\n /**\n * Client side example\n */\n Klarna.Payment.button({\n initiate: () => ({\n currency: \"USD\",\n amount: 2000,\n customerInteractionConfig: {\n returnUrl:\n \"https://example.com?id={klarna.paymentRequest.id}&token={klarna.paymentRequest.payment_token}\",\n },\n }),\n initiationMode: \"ON_PAGE\",\n }).mount(\"#klarna-payment-btn\");\n\n Klarna.Payment.on(\"error\", async (err) => {\n console.log(\"Payment error:\", err);\n });\n\n Klarna.Payment.on(\"update\", async (paymentRequest) => {\n const interoperabilityToken =\n paymentRequest.stateContext.interoperabilityToken;\n const redirectUrl = await createOrder(2000, \"USD\", interoperabilityToken);\n\n console.log(\"KEC interoperability token:\", interoperabilityToken);\n window.location = redirectUrl;\n return false;\n });\n\n document.querySelector(\"#interoperability-token\").innerText = await Klarna\n .Interoperability.token();\n});",[],[109,181],{"_102":190,"_95":191,"_154":192,"_156":155,"_157":136,"_158":159,"_160":161,"_104":193,"_99":32,"_163":175,"_165":194,"_166":22,"_167":-5,"_168":195,"_98":196},"0cb490a2-623f-11f0-96f0-0224a6c84d84","success.html","303f60e4-43c3-4681-888f-1c752acaea48",["D",1752668338335],"\n\n \n \n \n \n \n\n \n \n \n \n

\n \n

\n Merchant Checkout\n

\n\n

\n Purchase was successfull!\n

\n\n

\n \n Go Back\n \n

\n \n",[],[109,191],[109],{"_102":199,"_95":200,"_154":201,"_156":-5,"_157":136,"_158":159,"_160":161,"_104":202,"_99":32,"_163":175,"_165":203,"_166":22,"_167":-5,"_168":204,"_98":205},"0cb493b8-623f-11f0-96f0-0224a6c84d84","README.md","ae1457f2-6178-4aed-9316-8b87ddc109da",["D",1752668338335],"TBD",[],[200],{"_102":207,"_95":208,"_154":209,"_156":-5,"_157":136,"_158":210,"_160":161,"_104":211,"_99":212,"_163":213,"_165":214,"_166":22,"_167":-5,"_168":215,"_98":216},"ed3e151c-623f-11f0-9aec-0224a6c84d84","server.js","711830ec-0ca7-4f05-a369-841f2c86c781",4,["D",1752668715111],3,"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport fetch from \"npm:node-fetch\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/public/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/public/**/*\", c => serveFile(c.req.path, import.meta.url));\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/**\n * Create payment intent with acquirer\n */\napp.get(\"/order\", async function(c) {\n const { amount, currency, interoperabilityToken, returnUrl } = c.req.query();\n const resp = await fetch(\n `https://dudekmac--0bef9646cbbe487386e17650e15736c1.web.val.run/intent?amount=${amount}¤cy=${currency}&returnUrl=${returnUrl}&interoperabilityToken=${interoperabilityToken}`,\n );\n\n const data = await resp.json();\n return c.json(data);\n});\n\napp.get(\"/paymentRequest\", async function(c) {\n const { amount, currency, returnUrl } = c.req.query();\n const apiKey = process.env.API_KEY;\n\n const response = await fetch(\n `https://api-global.test.klarna.com/v2/payment/requests`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Basic \" + apiKey,\n },\n body: JSON.stringify({\n currency,\n amount,\n customer_interaction_config: {\n method: \"HANDOVER\",\n return_url: returnUrl,\n },\n }),\n },\n );\n\n const data = await response.json();\n return c.json(data);\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;",[],[208],"files",[152,170,179,189,198,206],"counts",{"_221":32,"_222":159,"_223":159,"_224":225},"pulls","branches","forks","envVars",{"_226":227,"_228":32},"count",2,"emptyCount","contents",[231,234,237],{"_102":153,"_95":109,"_154":155,"_156":-5,"_157":136,"_158":159,"_160":161,"_104":232,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":233},["D",1752668338335],[109],{"_102":199,"_95":200,"_154":201,"_156":-5,"_157":136,"_158":159,"_160":161,"_104":235,"_99":32,"_163":175,"_165":203,"_166":22,"_167":-5,"_98":236},["D",1752668338335],[200],{"_102":207,"_95":208,"_154":209,"_156":-5,"_157":136,"_158":210,"_160":161,"_104":238,"_99":212,"_163":213,"_165":214,"_166":22,"_167":-5,"_98":239},["D",1752668715111],[208],"upstreamProject",{"_102":144,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":242},{"_93":243,"_128":244},"misha","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5eFFjMEN6em91cnVPSUFlczRvQldzYml1eiJ9","upstreamBranch",{"_102":139,"_104":247,"_248":249,"_95":43,"_137":144,"_99":250,"_138":-5,"_140":-5,"_251":252,"_106":-5,"_149":22,"_108":109,"_148":243,"_16":146,"_147":96},["D",1750773839290],"updatedAt",["D",1756397490992],135,"lockfileKey","1752650855712-esm.town_v_misha_klarna-merchant-interoperability@67-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":259,"_223":264,"_271":272},{"_102":103,"_95":96,"_104":260,"_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":261,"_130":262,"_133":263,"_149":22},["D",1752668338335],{"_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},[265],{"_102":266,"_95":267,"_110":-5,"_111":-5,"_108":109,"_14":112,"_16":117,"_149":22,"_23":268,"_130":269,"_113":-5,"_114":22,"_104":270,"_116":32},"7e1cefd4-6c83-11f0-a999-0224a6c84d84","klarna-merchant-interoperability-2",{"_93":94,"_128":129},{"_93":94,"_132":129},["D",1753797246073],"upstream",{"_102":144,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":273},{"_93":243,"_128":244},"actionData","errors"]