[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_214":215,"_216":217},"routes/_app.x.$handle.$name",{"_100":99,"_32":46,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":59,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","public/script.js","latestPath","fileId","0198e136-342a-7139-9383-a2096181f18a","name","script.js","fileType","script","content","/**\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});","/**\n * Import Web SDK\n */\nasync function loadKlarnaSdk() {\n const { KlarnaSDK } = await import(\n \"https://js.klarna.com/web-sdk/v2/klarna.mjs\"\n );\n\n return await KlarnaSDK({\n clientId:\n \"klarna_test_client_eW45SXF6M0NUJSNzMWRnNSVrcEFWVFRsamMkcU9KLTgsNWM5ZmU5NzItZjY0Ni00MWM5LWFlNDYtOTFmZTEyZDcxMmQ3LDEsWXlDMzdYdkExNlNhOFU1YU95dTh3WTg1VEZCVW56VDc2WUk3QUl2b1VHUT0\",\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(\"complete\", 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});","createdAt",["D",1756125103935],"branchVersion","branchId","68d293a4-81af-11f0-ae2f-0224a6c84d84","id","68ca2778-81af-11f0-ae2f-0224a6c84d84","klarna-merchant-interoperability-3",["D",1756125082539],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","3119e8f0-618d-11f0-9f31-43b88cca106e","pinnedFileId","0198e136-342a-7139-9383-b326b03cf4d6","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","3119e8f1-618d-11f0-9f31-43b88cca106e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":14,"_32":86,"_44":43,"_87":45,"_88":89,"_90":91,"_92":51,"_93":94,"_95":96,"_97":46,"_98":99},"isOwned","main","projectId","forkedBranchId","133d0e46-5104-11f0-a556-f69ea79377d9","forkedBranchVersion",67,"forkedProjectPrivacy","forkedProjectId","133c7076-5104-11f0-a556-f69ea79377d9","forkedProjectOrgId","398b8069-b69f-4e59-80f3-9486dda41f35","projectName","userHandle","dudekmac","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yenVyalgzR3VUTGNWRk44UnBpTzlESEw1YWQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":210,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":211,"_81":212,"_83":213,"_85":25},"tree",[176,180,181],"files",[176,177,178,179,180,181],"counts",{"_166":63,"_167":148,"_168":63,"_169":170,"_171":172},"contents",[142,143,144],"upstreamProject",{"_44":94,"_32":139,"_53":-5,"_54":-5,"_50":51,"_79":140},"upstreamBranch",{"_44":89,"_39":132,"_133":134,"_32":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_48":-5,"_85":25,"_50":51,"_98":138,"_64":96,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1750773839290],"updatedAt",["D",1768483215088],136,"lockfileKey","1764480000534-esm.town_v_misha_klarna-merchant-interoperability@135-main","mishatsypkin","klarna-merchant-interoperability",{"_100":138,"_107":141},"https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5eFFjMEN6em91cnVPSUFlczRvQldzYml1eiJ9",{"_44":161,"_32":51,"_30":162,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":163,"_13":63,"_34":164,"_36":-5,"_24":25,"_153":-5,"_27":165},{"_44":155,"_32":156,"_30":157,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":158,"_13":63,"_34":20,"_36":159,"_24":25,"_153":-5,"_27":160},{"_44":145,"_32":146,"_30":57,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":150,"_13":63,"_34":151,"_36":152,"_24":25,"_153":-5,"_27":154},"68d92642-81af-11f0-ae2f-0224a6c84d84","server.js","parentId",1,"latest",["D",1756125082539],"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;","label",[146],"68d9253e-81af-11f0-ae2f-0224a6c84d84","README.md","0198e136-342a-7139-9383-ac39199b472e",["D",1756125082539],"TBD",[156],"68d923e0-81af-11f0-ae2f-0224a6c84d84","0198e136-342a-7139-9383-ab66ab0b78ab",["D",1756125082539],"directory",[51],"pulls","branches","forks","envVars",{"_173":148,"_175":148},"connections",{"_173":63,"_174":63},"count","unfilledCount","emptyCount",{"_44":161,"_32":51,"_30":162,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":207,"_13":63,"_34":164,"_36":-5,"_24":25,"_153":-5,"_183":208,"_27":209},{"_44":200,"_32":201,"_30":202,"_147":162,"_42":43,"_41":148,"_149":59,"_39":203,"_13":63,"_34":20,"_36":204,"_24":25,"_153":-5,"_183":205,"_27":206},{"_44":196,"_32":33,"_30":31,"_147":162,"_42":43,"_41":14,"_149":59,"_39":197,"_13":148,"_34":35,"_36":38,"_24":25,"_153":-5,"_183":198,"_27":199},{"_44":189,"_32":190,"_30":191,"_147":162,"_42":43,"_41":148,"_149":59,"_39":192,"_13":63,"_34":20,"_36":193,"_24":25,"_153":-5,"_183":194,"_27":195},{"_44":155,"_32":156,"_30":157,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":186,"_13":63,"_34":20,"_36":159,"_24":25,"_153":-5,"_183":187,"_27":188},{"_44":145,"_32":146,"_30":57,"_147":-5,"_42":43,"_41":148,"_149":59,"_39":182,"_13":63,"_34":151,"_36":152,"_24":25,"_153":-5,"_183":184,"_27":185},["D",1756125082539],"children",[],[146],["D",1756125082539],[],[156],"68d92232-81af-11f0-ae2f-0224a6c84d84","success.html","0198e136-342a-7139-9383-a7935f133f60",["D",1756125082539],"\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",[],[51,190],"7586860a-81af-11f0-a33b-0224a6c84d84",["D",1756125103935],[],[51,33],"68d912f6-81af-11f0-ae2f-0224a6c84d84","index.html","0198e136-342a-7139-9383-9cf7e8f3a073",["D",1756125082539],"\n\n \n \n \n \n\n \n \n \n \n

\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",[],[51,201],["D",1756125082539],[177,178,179],[51],["D",1756125082539],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":14,"_32":86,"_44":43,"_87":45,"_88":89,"_90":91,"_92":51,"_93":94,"_95":96,"_97":46,"_98":99},"ctx",{"_79":-5,"_129":247,"_248":249,"_250":251,"_252":25,"_253":25,"_254":25,"_255":59,"_256":-5,"_257":-7,"_258":-7,"_259":63,"_260":25,"_261":25,"_262":-5,"_263":25,"_264":25,"_265":25,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":86,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2