How to combine login and tokenized payments
Sign in with Klarna goes beyond the typical social login functionality of signing in or signing up. It's designed to enhance user experiences across various touchpoints, particularly in shopping, but its versatility makes it ideal for a wide range of applications. Whether you're creating seamless onboarding paths for on-demand mobility services, food delivery apps, or subscription-based platforms, Sign in with Klarna offers a tailored solution.
As businesses increasingly adopt tokenized payments to enhance security and streamline user experiences, we've developed a flow that seamlessly integrates account creation and payment setup. With Sign in with Klarna, consumers can sign up and set up payments in a single, effortless step—without any redirects or additional work on your end, apart from enabling this best-in-class flow.
Both use cases are facilitated by the "customer token"[[#Representation of payment data tied to a specific customer and merchant.]].
Learn more about customer tokens here.
Example of on-demand flow.
The tokenized payment flow is supported in the Klarna Mobile SDK for:
Make sure to request the correct scope for your use case:
Use case | Scope |
---|---|
On-demand | payment:customer_present |
Subscription | payment:customer_not_present |
const siwkButton = klarna.Identity.button({
scope: "profile:name profile:email payment:customer_present",
redirectUri: "http://localhost:3000/callback",
});
Web SDK
KlarnaSignInButton initializer has new argument of tokenizationDelegate to received the KlarnaSignInTokenizationDelegate instance.
Pass the KlarnaSignInTokenizationCallback instance into the KlarnaSignInButton constructor. Mobile SDK
Handle the tokenizationTrigger event by making a call to the Klarna Payments API through your backend to create a new payment session.
siwkButton.on("tokenizationTrigger", async (callback) => {
const response = await fetch("https://merchant-backend.com/payment", {
method: "POST",
});
callback(response.session_id)
});
Web SDK
The KlarnaSignInButton now has a new protocol called KlarnaSignInTokenizationDelegate that needs to be implemented. The delegate implementation must provide the tokenization ID to the completion handler in order to continue the flow.
The KlarnaSignInButton now has a new callback called KlarnaSignInTokenizationCallback that needs to be implemented. The callback implementation must provide the tokenization ID to the completion handler in order to continue the flow.
When creating the payment session, remember to:
When offering on-demand services with Klarna, you must include the customer_tokens EMD package, to enable Klarna to perform accurate underwriting and fraud checks when the customer adds Klarna as a payment option for future on-demand payments.
After the customer consents to share their data, Klarna will automatically create an HPP session connected to the payment session_id provided in the response of the create_session.
You can read the tokens from the signin event response, the id_token will contain requested customer data.
The refresh_token refresh_token can be used to fetch access token, allowing you to either retrieve customer data or log in customers during the purchase flow at a later time.
You should receive the authorization_token in a webhook to the URL that you provided in the create session call.
Make sure to generate a customer_token using the authorization_token following our documentation.
After that, customer_token can be charged.