\n \n

\n Merchant Checkout\n

\n\n

\n Purchase was successfull!\n

\n\n

\n \n Go Back\n \n

\n \n",[],[28,176],"7586860a-81af-11f0-a33b-0224a6c84d84","script.js","0198e136-342a-7139-9383-a2096181f18a",["D",1756125103935],"script","/**\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});",[],[28,183],"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",[],[28,191],["D",1756125082539],[163,164,165],[28],["D",1756125082539],{"_16":17,"_86":82},{"_16":17,"_80":-5,"_81":82,"_32":33,"_83":84,"_85":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":70,"_71":72,"_73":28,"_74":75,"_76":77,"_78":21,"_79":17},"ctx",{"_57":-5,"_109":237,"_238":239,"_240":241,"_242":26,"_243":26,"_244":26,"_245":37,"_246":-5,"_247":-7,"_248":-7,"_249":41,"_250":26,"_251":26,"_252":-5,"_253":26,"_254":26,"_255":26,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":66,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"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"]

Search