Klarna: Headless Guide

use_frameworks!
target 'PrimerSDK_Example' do
  pod 'PrimerSDK'
  # Add the line below 👇
  pod 'PrimerKlarnaSDK'
end

let settings = PrimerSettings(
        paymentHandling: .auto,
        // 👇 Add this line
        paymentMethodOptions: PrimerPaymentMethodOptions(urlScheme: "merchant://primer.io")
)

do {
 manager = PrimerHeadlessUniversalCheckout.KlarnaManager()
 klarnaComponent = try manager.provideKlarnaComponent(with: sessionIntent)
} catch {
 // Catch errors here
}

func didReceiveStep(step: PrimerSDK.PrimerHeadlessStep) {
    if let step = step as? KlarnaStep {
        switch step {
        // Emitted once the component is started via `start()` method call.
        case .paymentSessionCreated(let clientToken, let paymentCategories):
            // Render categories.
        // Emitted once the payment options are collected
        // via `updateCollectedData(collectableData: KlarnaCollectableData)` method call.
        case .viewLoaded(let view):
            // Render the payment view corresponding to the selected payment category
        // Emitted once the payment is authorized via `submit()` method call
        // after the user confirms the payment via the Klarna payment screen
        case .paymentSessionAuthorized( _, let checkoutData):
            // Payment was authorized, now you can perform your finalization flow.
        // Payment requires finalization.
        case .paymentSessionFinalizationRequired:
            // Perform klarnaComponent.updateCollectedData(collectableData: KlarnaCollectableData.finalizePayment)
            // to perform the finalization
        // Emitted once the payment finalization is requested
        // via `updateCollectedData(collectableData: KlarnaCollectableData.finalizePayment)`.
        case .paymentSessionFinalized( _, let checkoutData):
            // Payment was finalized, now you can perform your finalization flow.
        default:
            break
        }
    }
}

func didUpdate(validationStatus: PrimerSDK.PrimerValidationStatus, for data: PrimerSDK.PrimerCollectableData?) {
        switch validationStatus {
        case .validating:
            // Handle validation being in progress (e.g. show a progress view)
        case .valid:
            // Handle valid (e.g. hide a progress view)
        case .invalid(errors: let errors):
            // Handle errors that might occour, display them to the user
        case .error(error: let error):
            // Display the error message to the user
        }
    }

func updatePaymentOptions(paymentCategory: KlarnaPaymentCategory) {
    let klarnaCollectableData = KlarnaCollectableData.paymentCategory(paymentCategory, clientToken: clientToken)
    klarnaComponent.updateCollectedData(collectableData: klarnaCollectableData)   
}

klarnaComponent.updateCollectedData(collectableData: KlarnaCollectableData.finalizePayment)

klarnaComponent?.submit()

func didReceiveError(error: PrimerSDK.PrimerError) {
        // Handle errors (e.g., display error messages to the user)
    }

KLARNA_DISTRIBUTION_URL=https://x.klarnacdn.net/mobile-sdk/

Amend the repositories section of your app's build.gradle to include our given repositories
repositories {
    /* Other repositories... */
    maven {
        url "${KLARNA_DISTRIBUTION_URL}"
    }
}

dependencies {
  /* Other dependencies... */
  implementation "io.primer:klarna-android:1.2.0"
}

val klarnaComponent = PrimerHeadlessUniversalCheckoutKlarnaManager(viewModelStoreOwner).provideKlarnaComponent(PrimerSessionIntent.CHECKOUT)

klarnaComponent.componentStep.collectLatest { klarnaPaymentStep ->
    when (klarnaPaymentStep) {
        // Emitted once the component is started via a call to the `start()` function.
        is KlarnaPaymentStep.PaymentSessionCreated -> {
            klarnaStep.paymentCategories.forEach { paymentCategory ->
                // Render category
            }
        }
        // Emitted once the payment options are collected via a call to the 
        // `updateCollectedData(KlarnaPaymentCollectableData.PaymentOptions(...))` function.
        is KlarnaPaymentStep.PaymentViewLoaded -> {
            // Render the payment view corresponding to the selected payment category
        }
        // Emitted once the component is submitted via a call to the `submit()` function, 
        // after the user confirms the payment via the Klarna payment screen
        is KlarnaPaymentStep.PaymentSessionAuthorized -> {
            if (klarnaStep.isFinalized) {
                // no-op
            } else {
                // Payment requires finalization. From this point on, you may call
                // klarnaComponent.updateCollectedData(KlarnaPaymentCollectableData.FinalizePayment)
                // to perform the finalization.
            }
        }
        // Emitted once the component is submitted and payment finalization is requested 
        // via `updateCollectedData(KlarnaPaymentCollectableData.FinalizePayment)`.
        is KlarnaPaymentStep.PaymentSessionFinalized -> {
            // Do something when the payment is finalized
        }
    }
}

klarnaComponent.componentValidationStatus.collectLatest { validationStatus ->
    // Handle validation being in progress (e.g. show progress view),  
    // valid (e.g. enable payment button, submit data automatically..),  
    // invalid (e.g. disable submit button, show validation error messages in input components..)  
    // and error status (e.g. display error messages to the user)
}

klarnaComponent.start()

<activity
    android:name=".DeeplinkReturnActivity"
    android:exported="true"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="app" />
        <data android:host="deeplink.return.activity" />
    </intent-filter>
</activity>

fun updatePaymentOptions() {
    klarnaComponent.updateCollectedData(
            KlarnaPaymentCollectableData.PaymentOptions(
                context = requireContext(),
                paymentCategory = getSelectedPaymentCategory(),
               // Built from the deeplink activity's intent filter scheme and host. 
                             // This will be used by third-party apps to link back to your app.
                returnIntentData = "app://deeplink.return.activity"
            )
        )
    )
}

fun getSelectedPaymentCategory() : KlarnaPaymentCategory {
    // Return the payment category selected by the user
}

klarnaComponent.updateCollectedData(KlarnaPaymentCollectableData.FinalizePayment)

klarnaComponent.submit()

klarnaComponent.componentError.collectLatest { error ->
    // Handle errors (e.g., display error messages to the user)
}

const klarnaManagerProps: KlarnaManagerProps = {
    // Pass either PrimerSessionIntent.CHECKOUT or PrimerSessionIntent.VAULT, depending on the session type you'd like to create.
    primerSessionIntent: PrimerSessionIntent.CHECKOUT,
    onStep: (data: KlarnaPaymentStep) => {
        // Show loading indicator, render categories or finalize payment
    },
    onError: (error: PrimerError) => {
        // An error that occurred during the component's operation.
    },
    onInvalid: (data: PrimerInvalidComponentData<KlarnaPaymentValidatableData>) => {
        // Data was considered invalid during validation.
    },
    onValid: (data: PrimerValidComponentData<KlarnaPaymentValidatableData>) => {
        // Data was successfully validated.
    },
    onValidating: (data: PrimerValidatingComponentData<KlarnaPaymentValidatableData>) => {
        // Data is in the process of being validated.
    },
    onValidationError: (data: PrimerComponentDataValidationError<KlarnaPaymentValidatableData>) => {
        // Error occurred during data validation
    },
};

const klarnaManager = new KlarnaManager();
const klarnaComponent: KlarnaComponent = await klarnaManager.provide(klarnaManagerProps);

const klarnaManagerProps: KlarnaManagerProps = {
    ...
    onStep: (data: KlarnaPaymentStep) => {
        switch(data.stepName) {
            case "paymentSessionCreated":
                // Emitted once the component is started via a call to the `start()` function.
                // Render the payment categories, found in `data.paymentCategories` from here.
                break;
            case "paymentViewLoaded":
                // Emitted once the payment options are collected via a call to the `onSetPaymentOptions()` function. 
                // Render the PrimerKlarnaPaymentView from here.
                break;
            case "paymentSessionAuthorized":
                // Emitted once the component is submitted via a call to the `submit()` function, 
                // after the user confirms the payment via the Klarna payment screen.
                if (data.isFinalized) {
                    // no-op
                } else {
                    // Payment requires finalization. From this point on, you may call
                    // klarnaComponent.onFinalizePayment() to perform the finalization.
                }
                break;
            case "paymentSessionFinalized":
                // Emitted once the component is submitted and payment finalization is requested 
                // via `onFinalizePayment()`.
                break;
        }
    },
    ...
};

// Import PrimerKlarnaPaymentView
import { PrimerKlarnaPaymentView } from '@primer-io/react-native';
...
// Define a hook that controls the payment view's visibility
const [isKlarnaPaymentViewVisible, setKlarnaPaymentViewVisible] = useState<boolean>(false)
...
const klarnaManagerProps: KlarnaManagerProps = {
    ...
    onStep: (data: KlarnaPaymentStep) => {
        switch(data.stepName) {
            ...
            case "paymentViewLoaded":
                // Update the hook's state
                setKlarnaPaymentViewVisible(true)
                break;
            ...
        }
    },
    ...
};
...
// JSX
// Render the payment view whenever the visible state is true. 
// Please note that setting a 'minHeight' is mandatory for the payment view to show.
{isKlarnaPaymentViewVisible && <PrimerKlarnaPaymentView style={{ minHeight: 250 }} />}
...

const klarnaManagerProps: KlarnaManagerProps = {
    ...
    onInvalid: (data: PrimerInvalidComponentData<KlarnaPaymentValidatableData>) => {
        // Data was considered invalid during validation, perhaps display an error message to the user.
        switch(data.data.validatableDataName) {
            case 'klarnaPaymentOptions': 
                // ...
                break;
            case 'klarnaPaymentFinalization': 
                // ...
                break;
        }
    },
    onValid: (data: PrimerValidComponentData<KlarnaPaymentValidatableData>) => {
        // Data was successfully validated, perhaps enable a submission button.
        switch(data.data.validatableDataName) {
            case 'klarnaPaymentOptions': 
                // ...
                break;
            case 'klarnaPaymentFinalization': 
                // ...
                break;
        }
    },
    onValidating: (data: PrimerValidatingComponentData<KlarnaPaymentValidatableData>) => {
        // Data is in the process of being validated, perhaps show a progress view.
        switch(data.data.validatableDataName) {
            case 'klarnaPaymentOptions': 
                // ...
                break;
            case 'klarnaPaymentFinalization': 
                // ...
                break;
        }
    },
    onValidationError: (data: PrimerComponentDataValidationError<KlarnaPaymentValidatableData>) => {
        // Error occurred during data validation, perhaps display an error message to the user.
        switch(data.data.validatableDataName) {
            case 'klarnaPaymentOptions': 
                // ...
                break;
            case 'klarnaPaymentFinalization': 
                // ...
                break;
        }
    },
};

klarnaComponent.start()

<activity
    android:name=".DeeplinkReturnActivity"
    android:exported="true"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="app" />
        <data android:host="deeplink.return.activity" />
    </intent-filter>
</activity>

class DeeplinkReturnActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val intent = Intent(this, MainActivity::class.java)
        startActivity(intent)
        finish()
    }
}

function updatePaymentOptions() {
    try {
        const klarnaPaymentCategory = getSelectedPaymentCategory();
        await klarnaComponent.onSetPaymentOptions(
            {
                /*
                * Built from the deeplink activity's intent filter scheme and host. 
                * This will be used by third-party apps to link back to your app on Android devices.
                */
                returnIntentUrl: "app://deeplink.return.activity.rn",
                paymentCategory: klarnaPaymentCategory
            }
        );
    } catch (err) {
        console.error(err);
    }
}
function getSelectedPaymentCategory() : KlarnaPaymentCategory {
    // Return the payment category selected by the user
}

klarnaComponent.onFinalizePayment();

klarnaComponent.submit()

const klarnaManagerProps: KlarnaManagerProps = {
    ...
    onError: (error: PrimerError) => {
        // An error that occurred during the component's operation, perhaps display an error message to the user.
    },
    ...
};

// 👇 Create the payment method manager
let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(paymentMethodType: "KLARNA")
// 👇 Show the payment method
try nativeUIPaymentMethodManager.showPaymentMethod(intent: .vault)

// 👇 Create the payment method manager
val nativeUiManager = PrimerHeadlessUniversalCheckoutNativeUiManager.newInstance("KLARNA")
 
// 👇 Show the payment method
nativeUiManager.showPaymentMethod(this, PrimerSessionIntent.VAULT)