This topic describes how to use the FramePay library to tokenize payment data using Klarna BNPL.
Prerequisites
To complete this guide, you must have an organization ID, a website ID, and a publishable API key.
You must also have a payment gateway configured in your Rebilly account. For sandbox testing, the TestProcessor
gateway is pre-configured.
If you already have your IDs and API key, continue to Step 1: Initial setup. If you do not, see Set up your environment.
Set up the FramePay library and create the necessary HTML structure.
Include the FramePay stylesheet
Add the default styles for the FramePay library elements on the page.
Include the FramePay script
Expose the FramePay library in the global JS scope as Framepay
.
Create your checkout form
Create a checkout form on your page.
Define the data-rebilly
attributes on your input fields. This instructs the FramePay library to automatically gather data from your checkout form.
Include the HTML mounting points
Specify an empty HTML element where the FramePay library renders the Klarna widget.
Edit your checkout form to add a new HTML element with a unique ID.
Configure the FramePay library to mount the Klarna widget and authorize the payment.
Initialize FramePay
Create a configuration object and initialize the FramePay library with it.
For more information, see FramePay configuration reference.
Rebilly data
Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.
For more information, see Prerequisites.
Transaction data
Provide the transaction data. Klarna requires amount
and currency
properties.
Mount FramePay onto your page and authorize to create a payment token.
Mount the Klarna widget
Mount the Klarna widget in the container element.
For more information, see:
Authorize the payment
When the Klarna widget is mounted and the form is filled, you can authorize Klarna. To request Klarna authorization, call Framepay.createToken()
. This requires method: 'klarna-payments'
as part of the extraData
payload.
When you call Framepay.createToken()
:
A Klarna popup is created where customers verify their information and choose their BNPL payment plan (if available).
A Klarna risk assessment is performed on the transaction. If Klarna declines the authorization, FramePay will throw an error.
If the form data is valid and Klarna approves the transaction, you receive a payment token that you can use to process the payment.
For more information, see Framepay.createToken(form).
This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment data using Klarna BNPL.
Complete the payment flow using this test card number: 4111 1111 1111 1111
. Use any future expiration date and any 3 digits for the CVC number. For more test cards, see Test payment cards, IBANs, and ACH details.
<!doctype html>
<html>
<head>
<link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
<script src="https://framepay.rebilly.com/framepay.js"></script>
<script src="./client.js" defer></script>
</head>
<body>
<form id="klarna-form">
<input data-rebilly="emails" placeholder="Email Address" />
<input data-rebilly="firstName" placeholder="First Name" />
<input data-rebilly="lastName" placeholder="Last Name" />
<input data-rebilly="address" placeholder="Address Line 1" />
<input data-rebilly="address2" placeholder="Address Line 2" />
<input data-rebilly="city" placeholder="City" />
<input data-rebilly="postalCode" placeholder="Postcode" />
<input data-rebilly="region" placeholder="Region" />
<input data-rebilly="country" placeholder="Country" />
<input data-rebilly="phoneNumbers" placeholder="Phone Number" />
<div id="klarna-widget-mounting-point"></div>
</form>
</body>
</html>