\n \n

\n Merchant Checkout\n

\n\n

\n Purchase was successfull!\n

\n\n

\n \n Go Back\n \n

\n \n","6a41df58-4cb7-4c39-be53-731f3173b863",["D",1752668338335],"branchVersion","label",[78,67],"pulls","branches","forks","envVars",{"_171":173,"_174":26},"connections",{"_171":26,"_172":26},"count","unfilledCount",2,"emptyCount",{"_32":218,"_13":78,"_65":159,"_42":-5,"_34":35,"_161":39,"_184":85,"_36":219,"_38":26,"_68":220,"_157":-5,"_69":24,"_162":-5,"_189":221,"_17":222},{"_32":211,"_13":212,"_65":213,"_42":159,"_34":35,"_161":39,"_184":85,"_36":214,"_38":26,"_68":21,"_157":215,"_69":24,"_162":-5,"_189":216,"_17":217},{"_32":202,"_13":203,"_65":204,"_42":159,"_34":35,"_161":108,"_184":85,"_36":205,"_38":206,"_68":207,"_157":208,"_69":24,"_162":-5,"_189":209,"_17":210},{"_32":156,"_13":67,"_65":66,"_42":159,"_34":35,"_161":39,"_184":85,"_36":199,"_38":26,"_68":21,"_157":158,"_69":24,"_162":-5,"_189":200,"_17":201},{"_32":192,"_13":193,"_65":194,"_42":-5,"_34":35,"_161":39,"_184":85,"_36":195,"_38":26,"_68":21,"_157":196,"_69":24,"_162":-5,"_189":197,"_17":198},{"_32":181,"_13":182,"_65":83,"_42":-5,"_34":35,"_161":183,"_184":85,"_36":185,"_38":186,"_68":187,"_157":188,"_69":24,"_162":-5,"_189":190,"_17":191},"ed3e151c-623f-11f0-9aec-0224a6c84d84","server.js",4,"latest",["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;","children",[],[182],"0cb493b8-623f-11f0-96f0-0224a6c84d84","README.md","ae1457f2-6178-4aed-9316-8b87ddc109da",["D",1752668338335],"TBD",[],[193],["D",1752668338335],[],[78,67],"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});",[],[78,203],"0cb48152-623f-11f0-96f0-0224a6c84d84","index.html","140bf80a-221b-4664-842f-091c5e4a4a9d",["D",1752668338335],"\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",[],[78,212],"0cb49232-623f-11f0-96f0-0224a6c84d84",["D",1752668338335],"directory",[176,177,178],[78],["D",1752668338335],{"_11":12,"_124":72},{"_11":12,"_120":-5,"_71":72,"_30":70,"_121":122,"_123":24},{"_38":108,"_13":16,"_32":35,"_109":74,"_110":62,"_111":112,"_113":78,"_114":115,"_116":117,"_118":14,"_119":12},"ctx",{"_51":-5,"_145":260,"_261":262,"_263":264,"_265":24,"_266":24,"_267":24,"_268":85,"_269":-5,"_270":-7,"_271":-7,"_272":26,"_273":24,"_274":24,"_275":-5,"_276":24,"_277":24,"_278":24,"_279":-5},"ENV",{"_231":232,"_233":234,"_235":16,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259},"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"]

History · success.html