\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",[],[104,169],{"_108":179,"_100":180,"_150":181,"_152":151,"_153":138,"_154":137,"_156":157,"_110":182,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_165":186,"_103":187},"c278fd2c-5111-11f0-9f0b-f69ea79377d9","script.js","b46696a6-5105-11f0-91f9-f69ea79377d9",["D",1750779716735],4,"script","/**\n * Import Web SDK\n */\nasync function loadKlarnaSdk() {\n const { KlarnaSDK } = await import(\"https://js.klarna.com/web-sdk/v2/klarna.mjs\");\n\n return await KlarnaSDK({\n clientId:\n \"klarna_test_client_TjMjOUlseXVvS0N6ZllLI3VteEtzWmQ3MHV0b0I_U0ssMDA3MGRjYmItNmM0Mi00MTQzLWIwYmItYjIzZDA2MDRiZWI0LDEseUtkc084TXZ1SlJtRGxXcXFMdzB2SzJURzBMMENnWUFTQTFXMWdCb3dFMD0\",\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(`/paymentRequest?amount=2000¤cy=USD&returnUrl=${window.location.href}`);\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: \"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(\"complete\", async (paymentRequest) => {\n const interoperabilityToken = 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.Interoperability.token();\n});",[],[104,180],{"_108":189,"_100":190,"_150":191,"_152":151,"_153":138,"_154":192,"_156":157,"_110":193,"_105":194,"_160":174,"_162":195,"_163":27,"_164":-5,"_165":196,"_103":197},"d261f556-5105-11f0-b895-f69ea79377d9","success.html","acd402e8-5105-11f0-860e-f69ea79377d9",24,["D",1750774589455],3,"\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",[],[104,190],[104],{"_108":200,"_100":201,"_150":202,"_152":-5,"_153":138,"_154":203,"_156":157,"_110":204,"_105":159,"_160":174,"_162":205,"_163":27,"_164":-5,"_165":206,"_103":207},"9a911914-5109-11f0-9efe-f69ea79377d9","README.md","133ff55c-5104-11f0-a556-f69ea79377d9",58,["D",1750776213811],"TBD",[],[201],{"_108":209,"_100":210,"_150":211,"_152":-5,"_153":138,"_154":212,"_156":157,"_110":213,"_105":214,"_160":215,"_162":216,"_163":27,"_164":-5,"_165":217,"_103":218},"674158aa-5111-11f0-ad93-f69ea79377d9","server.js","13491f88-5104-11f0-a556-f69ea79377d9",66,["D",1750779563699],36,"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://misha--1d669a16510b11f0a592f69ea79377d9.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;",[],[210],"files",[148,167,178,188,199,208],"counts",{"_223":31,"_224":159,"_225":159,"_226":159},"pulls","branches","forks","envVars","contents",[229,232,235],{"_108":168,"_100":169,"_150":170,"_152":151,"_153":138,"_154":171,"_156":157,"_110":230,"_105":173,"_160":174,"_162":175,"_163":27,"_164":-5,"_103":231},["D",1750776704165],[104,169],{"_108":179,"_100":180,"_150":181,"_152":151,"_153":138,"_154":137,"_156":157,"_110":233,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_103":234},["D",1750779716735],[104,180],{"_108":189,"_100":190,"_150":191,"_152":151,"_153":138,"_154":192,"_156":157,"_110":236,"_105":194,"_160":174,"_162":195,"_163":27,"_164":-5,"_103":237},["D",1750774589455],[104,190],{"_108":149,"_100":104,"_150":151,"_152":-5,"_153":138,"_154":155,"_156":157,"_110":239,"_105":159,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":240},["D",1750774508384],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_98":99,"_100":101,"_102":42,"_105":-7,"_103":104,"_106":247,"_146":251,"_219":270,"_174":271,"_227":273,"_280":-5,"_281":27,"_282":-5,"_283":-5,"_284":-5,"_285":286},{"_108":109,"_100":101,"_110":248,"_112":-5,"_113":27,"_114":104,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":27,"_21":249,"_135":250},["D",1750773839290],{"_98":99,"_133":134},{"_105":137,"_100":42,"_108":138,"_139":109,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},[252,264,267],{"_108":149,"_100":104,"_150":151,"_152":-5,"_153":138,"_154":155,"_156":157,"_110":158,"_105":159,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":253,"_103":263},[254,257,260],{"_108":168,"_100":169,"_150":170,"_152":151,"_153":138,"_154":171,"_156":157,"_110":172,"_105":173,"_160":174,"_162":175,"_163":27,"_164":-5,"_165":255,"_103":256},[],[104,169],{"_108":179,"_100":180,"_150":181,"_152":151,"_153":138,"_154":137,"_156":157,"_110":182,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_165":258,"_103":259},[],[104,180],{"_108":189,"_100":190,"_150":191,"_152":151,"_153":138,"_154":192,"_156":157,"_110":193,"_105":194,"_160":174,"_162":195,"_163":27,"_164":-5,"_165":261,"_103":262},[],[104,190],[104],{"_108":200,"_100":201,"_150":202,"_152":-5,"_153":138,"_154":203,"_156":157,"_110":204,"_105":159,"_160":174,"_162":205,"_163":27,"_164":-5,"_165":265,"_103":266},[],[201],{"_108":209,"_100":210,"_150":211,"_152":-5,"_153":138,"_154":212,"_156":157,"_110":213,"_105":214,"_160":215,"_162":216,"_163":27,"_164":-5,"_165":268,"_103":269},[],[210],[252,254,257,260,264,267],{"_108":149,"_100":104,"_150":151,"_152":-5,"_153":138,"_154":155,"_156":157,"_110":239,"_105":159,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":272},[104],[274,276,278],{"_108":168,"_100":169,"_150":170,"_152":151,"_153":138,"_154":171,"_156":157,"_110":230,"_105":173,"_160":174,"_162":175,"_163":27,"_164":-5,"_103":275},[104,169],{"_108":179,"_100":180,"_150":181,"_152":151,"_153":138,"_154":137,"_156":157,"_110":233,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_103":277},[104,180],{"_108":189,"_100":190,"_150":191,"_152":151,"_153":138,"_154":192,"_156":157,"_110":236,"_105":194,"_160":174,"_162":195,"_163":27,"_164":-5,"_103":279},[104,190],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]