Adding Klarna Payments to Your App
Adding Klarna Payments to your application is as easy as adding a view and performing a few operations on it. You can read more about the flow here .
This guide will teach you how to:
- Render a Payment View
- Operate on a payment method via its Payment View.
A Payment View in iOS is called a KlarnaPaymentView
. Rendering a payment view consists
of creating an instance of the view, passing it an event listener and, adding it to your
view hierarchy.
Creating the View
You can initialize the KlarnaPaymentView
by providing a return URL and the event listener.
Param | Type | Description |
---|---|---|
Param category | Type String | Description The payment method category that should be rendered in the view. |
Param eventListener | Type KlarnaPaymentEventListener | Description Listener that receives events during the payment process. |
1 2 3 4 5 6 7 8 9 10
// Create the view let paymentView = KlarnaPaymentView(category: "pay_over_time", eventListener: self) // Add as subview paymentView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(paymentView) // Create a height constraint that we'll update as its height changes. self.heightConstr = paymentView.heightAnchor.constraint(equalToConstant: 0) heightConstr.isActive = true
The Payment View Event Listener
The SDK will notify you of events via an event listener that you’ll need to implement. It acts like a conventional delegate on iOS, however, unlike a delegate, it’s not optional.
Handling Height Changes
The payment view does not define any height internally. This is because we want to allow you to handle height changes in whichever way is most convenient to you.
The payment view instead notifies you through the event listener you provide it.
1 2 3
func klarnaResized(paymentView: KlarnaPaymentView, to newHeight: CGFloat) { self.heightConstr.constant = newHeight }
We expose six methods on the payment view that you can use to interact with the payment method it’s presenting:
Initializing the View
Before content is rendered into a payment view, it needs to be configured. You can do this by initializing the view.
Initialization
After the view has been added and set up, you’ll need to call initialize()
with the
clientToken
you received from the back-end and a returnURL
.
Param | Type | Description |
---|---|---|
Param clientToken | Type String | Description Token that was returned when you created the session. |
Param returnUrl | Type URL | Description URL schema as defined in your app’s Plist to return from external applications. |
1
paymentView.initialize(clientToken: clientToken, returnUrl: returnUrl)
Result
If successful, klarnaInitialized()
will be called in the listener you supplied.
If it’s not successful klarnaFailed()
will be called
instead.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that was initialized. |
1 2 3
func klarnaInitialized(paymentView: KlarnaPaymentView) { klarnaPaymentView.load() }
Loading the View
Once you’ve initialized the view and you’re ready to display the KlarnaPaymentView
.
Loading
Simply call load()
, supplying an optional string with updated order data to update the session.
This string should be formatted as valid JSON.
Param | Type | Description |
---|---|---|
Param jsonData | Type String? | Description An optional string with the order data to update the session. Formatted as JSON. |
1
klarnaPaymentView.load()
Result
If successful, klarnaLoaded()
will be called in your listener. If anything went
wrong, klarnaFailed()
will be called. If you’ve loaded several views, you should keep track of
which view your user selected to know what to authorize in the next step.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that was loaded. |
1 2 3
func klarnaLoaded(paymentView: KlarnaPaymentView) { // Content has finished loading and if you have any loader you could hide it here. }
When the payment view is loaded, and the user has confirmed that they want to pay with one of Klarna’s selected payment methods, it’s time to authorize the session.
When you are ready to authorize the session, call authorize()
. As with load, you can supply
an optional string to update the session. You can also specify whether auto-finalization
should be turned off; if it is, the user may need to be prompted a second time to input data.
Param | Type | Description |
---|---|---|
Param autoFinalize | Type Boolean? | Description A flag used to turn auto-finalization for direct bank transfer on/off. |
Param jsonData | Type String? | Description An optional string to update the session. Formatted as JSON. |
1
paymentView.authorize()
Result
If successful, klarnaAuthorized()
will be called in your listener. If not,
klarnaFailed()
will be called.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that was authorized. |
Param approved | Type Bool | Description Whether the authorization was approved or not. |
Param authToken | Type String? | Description If the session was authorized, the token will not be null. |
Param finalizedRequired | Type Bool | Description Will be true if autoFinalize was false and this payment method needs a second confirmation step. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
func klarnaAuthorized(paymentView: KlarnaPaymentView, approved: Bool, authToken: String?, finalizeRequired: Bool) { if approved == true { // the authorization was successful } else { // user is not approved or might require finalization } if let token = authToken { // authorization is successful, backend may create order } if finalizedRequired == true { // app needs to call finalize() } }
There are cases when you might want to allow your customer to change their order after it has been authorized (e.g. in some form of order/summary view). In these cases, if the order or customer details have changed, you’ll need to reauthorize the session.
Param | Type | Description |
---|---|---|
Param jsonData | Type String? | Description An optional string to update the session. Formatted as JSON |
1
paymentView.reauthorize()
Result
If successful, klarnaReauthorized()
will be called, and if not,
klarnaFailed()
will be called instead.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that was reauthorized. |
Param approved | Type Bool | Description Whether the reauthorization was approved or not. |
Param authToken | Type String? | Description If the session was previously authorized, the token will not be null. |
1 2 3 4 5 6 7 8 9 10 11
func klarnaReauthorized(paymentView: KlarnaPaymentView, approved: Bool, authToken: String?) { if approved == true { // the reauthorization was successful } else { // user is not approved or might require finalization } if let token = authToken { // reauthorization is successful, backend may create order } }
Finalizing the Session
If the session needs to be finalized, you’ll need to perform this last step to get an authorization token.
Finalize
Call finalise()
in order to get the token.
While we tend to name all finalize operations “finalize” with a “z”, all classes
subclassing from NSObject
already have a a conflicting finalize()
method. In this
specific case, we use the alternative british-english spelling.
Param | Type | Description |
---|---|---|
Param sessionData | Type String? | Description An optional string to update the session. Formatted as JSON |
1
paymentView.finalise()
Result
If successful, klarnaFinalized()
will be called in your listener. If not
successful, klarnaFailed()
will be called.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that was finalized. |
Param approved | Type Bool | Description Whether the user was approved on finalize or not. |
Param authToken | Type String? | Description If the finalization went through, the token will not be null. |
1 2 3 4 5 6 7 8 9 10 11
func klarnaFinalized(paymentView: KlarnaPaymentView, approved: Bool, authToken: String?) { if approved == true { // the finalization was successful } else { // user is not approved or might require finalization } if let token = authToken { // finalization is successful, backend may create order } }
Loading a Payment Review
If you’d like to allow the user to review their payment after it’s authorized, this can be done in two ways:
Render it in a new view:
- Create a new
KlarnaPaymentView
with the same payment method - Call
initialize()
- Call then
loadPaymentReview()
- Create a new
Render it in the existing payment view:
- Call
loadPaymentReview()
in the existing view.
- Call
Only specific payment method categories and countries are currently supported. Contact
us to make sure that you can call this method.
Load the Payment Review
This will load/replace the view’s content with a description of how your customer will have to perform payment.
1
paymentView.loadPaymentReview()
Result
If successful klarnaLoadedPaymentReview()
will be called in your listener. If not,
klarnaFailed()
will be called instead.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that dsplayed payment review. |
1 2 3
func klarnaLoadedPaymentReview(paymentView: KlarnaPaymentView) { // Payment review loaded }
Handling Errors
This will handle all the errors from the previous implementations. KlarnaPaymentError will contain the information needed to show to the user and also to handle all the states of the listener.
Param | Type | Description |
---|---|---|
Param paymentView | Type KlarnaPaymentView | Description The payment view that had the error. |
Param error | Type KlarnaPaymentError? | Description Class that contains the information (name , message , isFatal and debugDescription ) about the error. |
1 2 3
func klarnaFailed(inPaymentView paymentView: KlarnaPaymentView, withError error: KlarnaPaymentError) { // handle error }