{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","step"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Tokenize payment data using Klarna BNPL","description":"Learn how to use the FramePay library to tokenize payment data using Klarna BNPL.","siteUrl":"https://www.rebilly.com","image":"/assets/rebillysocial.94fb32fc280c9e84b963c440ec462771d25f4e6fdaaa6c59de41e8135113b46b.db81178d.png","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]},"keywords":"Developer docs, FramePay"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeWalkthrough","attributes":{"__idx":1,"preview":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment data using Klarna BNPL."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete the payment flow using this test card number: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4111 1111 1111 1111"]},"."," ","Use any future expiration date and any 3 digits for the CVC number."," ","For more test cards, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/tutorials/test-payment-cards"},"children":["Test cards, IBANs, and ACH details"]},"."]},{"$$mdtype":"Tag","name":"iframe","attributes":{"border":"0","frameBorder":"0","scrolling":"no","style":{"height":"1000px","width":"100%"},"src":"/examples/framepay/setup-klarna-method.html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/examples/framepay/setup-klarna-method.html","target":"_blank"},"children":["View console.log messages in a new window"]},"."]}],"filters":{},"filesets":[{"files":[{"path":"docs/dev-docs/_code-samples/setup-klarna-method/example.html","content":["",""," ",{"start":3,"condition":{"steps":["include-framepay-stylesheet"]},"children":[" "]},{"start":6,"condition":{"steps":["include-framepay-script"]},"children":[" "]}," "," "," ",{"start":12,"condition":{"steps":["create-checkout-form"]},"children":["
"," "," "," "," "," "," "," "," "," "," ",{"start":24,"condition":{"steps":["include-html-mounting-points"]},"children":["
"]},"
"]}," ","",""],"metadata":{"steps":["include-framepay-stylesheet","include-framepay-script","create-checkout-form","include-html-mounting-points"]},"basename":"example.html","language":"html"}],"downloadAssociatedFiles":[]},{"files":[{"path":"docs/dev-docs/_code-samples/setup-klarna-method/client.js","content":[{"start":0,"condition":{"steps":["initialize-framepay"]},"children":["Framepay.initialize({",{"start":2,"condition":{"steps":["rebilly-data"]},"children":[" publishableKey: \"pk_sandbox_123\","," organizationId: \"org-123\","," websiteId: \"website-123\","]},{"start":7,"condition":{"steps":["transaction-data"]},"children":[" transactionData: {"," currency: \"USD\","," amount: 10,"," },"]},"});"]},{"start":15,"condition":{"steps":["mount-klarna-widget"]},"children":["Framepay.on(\"ready\", (data) => {"," const klarna = Framepay.klarna.mount(\"#klarna-widget-mounting-point\");","});"]},{"start":20,"condition":{"steps":["authorize-payment"]},"children":["try {"," const form = document.getElementById(\"klarna-form\");"," const paymentToken = await Framepay.createToken(form, {"," method: \"klarna-payments\","," });"," console.log(paymentToken);","} catch (error) {"," console.log(\"❌ Create token error:\", error);","}"]},""],"metadata":{"steps":["initialize-framepay","rebilly-data","transaction-data","mount-klarna-widget","authorize-payment"]},"basename":"client.js","language":"javascript"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"include-framepay-stylesheet","heading":"Include the FramePay stylesheet"},{"id":"include-framepay-script","heading":"Include the FramePay script"},{"id":"create-checkout-form","heading":"Create your checkout form"},{"id":"include-html-mounting-points","heading":"Include the HTML mounting points"},{"id":"initialize-framepay","heading":"Initialize FramePay"},{"id":"rebilly-data","heading":"Rebilly data"},{"id":"transaction-data","heading":"Transaction data"},{"id":"mount-klarna-widget","heading":"Mount the Klarna widget"},{"id":"authorize-payment","heading":"Authorize the payment"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tokenize-payment-data-using-klarna-bnpl","__idx":0},"children":["Tokenize payment data using Klarna BNPL"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes how to use the FramePay library to tokenize payment data using Klarna BNPL."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To complete this guide, you must have an organization ID, a website ID, and a publishable API key."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must also have a payment gateway configured in your Rebilly account."," ","For sandbox testing, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TestProcessor"]}," gateway is pre-configured."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you already have your IDs and API key, continue to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#step-1-initial-setup"},"children":["Step 1: Initial setup"]},"."," ","If you do not, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/set-up-environment"},"children":["Set up your environment"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-initial-setup","__idx":1},"children":["Step 1: Initial setup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set up the FramePay library and create the necessary HTML structure."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"include-framepay-stylesheet","heading":"Include the FramePay stylesheet"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the default styles for the FramePay library elements on the page."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"include-framepay-script","heading":"Include the FramePay script"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Expose the FramePay library in the global JS scope as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"create-checkout-form","heading":"Create your checkout form"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a checkout form on your page."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes on your input fields."," ","This instructs the FramePay library to automatically gather data from your checkout form."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"include-html-mounting-points","heading":"Include the HTML mounting points"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Specify an empty HTML element where the FramePay library renders the Klarna widget."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Edit your checkout form to add a new HTML element with a unique ID."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-configure-framepay","__idx":2},"children":["Step 2: Configure FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure the FramePay library to mount the Klarna widget and authorize the payment."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"initialize-framepay","heading":"Initialize FramePay"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a configuration object and initialize the FramePay library with it."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference/"},"children":["FramePay configuration reference"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"rebilly-data","heading":"Rebilly data"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-klarna-method#prerequisites"},"children":["Prerequisites"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"transaction-data","heading":"Transaction data"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide the transaction data."," ","Klarna requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currency"]}," properties."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-get-the-payment-token","__idx":3},"children":["Step 3: Get the payment token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mount FramePay onto your page and authorize to create a payment token."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"mount-klarna-widget","heading":"Mount the Klarna widget"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mount the Klarna widget in the container element."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/events/#ready"},"children":["Framepay.on('ready', ...)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference/#framepayklarnamount"},"children":["Framepay.klarna.mount(...)"]}]}]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"authorize-payment","heading":"Authorize the payment"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the Klarna widget is mounted and the form is filled, you can authorize Klarna."," ","To request Klarna authorization, call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken()"]},"."," ","This requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method: 'klarna-payments'"]}," as part of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]}," payload."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken()"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A Klarna popup is created where customers verify their information and choose their BNPL payment plan (if available)."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A Klarna risk assessment is performed on the transaction."," ","If Klarna declines the authorization, FramePay will throw an error."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the form data is valid and Klarna approves the transaction, you receive a payment token that you can use to process the payment."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference/#framepaycreatetoken"},"children":["Framepay.createToken(form)"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-topics","__idx":4},"children":["Related topics"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference/"},"children":["FramePay configuration reference"]}]}]}]}]},"headings":[{"value":"Tokenize payment data using Klarna BNPL","id":"tokenize-payment-data-using-klarna-bnpl","depth":1},{"value":"Step 1: Initial setup","id":"step-1-initial-setup","depth":2},{"value":"Step 2: Configure FramePay","id":"step-2-configure-framepay","depth":2},{"value":"Step 3: Get the payment token","id":"step-3-get-the-payment-token","depth":2},{"value":"Related topics","id":"related-topics","depth":2}],"frontmatter":{"seo":{"title":"Tokenize payment data using Klarna BNPL","description":"Learn how to use the FramePay library to tokenize payment data using Klarna BNPL.","keywords":"Developer docs, FramePay","lang":"en-US"},"excludeFromSearch":true,"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-03-24T10:16:15.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/setup-klarna-method","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}