Klarna: Headless Guide

​

Handle payment method

Integration

1. The PrimerHeadlessCheckout will help you configure the headless payment method and then start the payment process
2. When calling configure provide a callback function for onAvailablePaymentMethodsLoaded as described here
3. For the Klarna payment method,configure a handler for the KLARNA payment method manager type and create a payment method manager as described here `
4. When the payment categories for the Klarna payment method have been retrieved, onPaymentMethodCategoriesChange callback will be called with a payload that will have a format as seen here
5. You can use the payment categories retrieved through the onPaymentMethodCategoriesChange callback to create the custom component/form
6. When the user has selected a payment category you should call the renderCategory function available in the manager. The renderCategory function requires, as parameters, the selected category id, a container id where to render the details about the payment category and an onHeightChange callback that will be called when the payment category height has changed. You can use the height returned by the onHeightChange callback to update the height of the container in which the payment category details will be displayed.
7. After the user has selected a category and the details about this category have been displayed you can call the start function provided by the payment method manager created at step 3

Create the PrimerHeadlessCheckout in order to interact with the Primer API

Provide a custom handler for the KLARNA payment method manager

await headless.configure({
    onAvailablePaymentMethodsLoad(paymentMethods) {
        // Called when the available payment methods are retrieved

        for (const paymentMethod of paymentMethods) {
            // `type` is a unique ID representing the payment method
            const { type, managerType } = paymentMethod
            if (managerType === 'KLARNA') {
                configureKlarnaPaymentMethodManager()
            }
        }
    },
    onCheckoutComplete({ payment }) {
        console.log('onCheckoutComplete', payment)
    },
    onCheckoutFail(error, { payment }, handler) {
        return handler.showErrorMessage()
    },
})

await headless.start()

function configureKlarnaPaymentMethodManager(){
    paymentMethodManager = await headless.createPaymentMethodManager(
        paymentMethod,
        {
        onPaymentMethodCategoriesChange:(categories: KlarnaPaymentMethodCategory[]) =>{
            renderCustomComponent(categories)
        },
        },
    );
  }

async function onPaymentCategorySelected( categoryId: string ) {
    const response  = await paymentMethodManager.start({
      paymentMethodCategoryId: categoryId,
    });

    if (response?.outcome === 'DENIED') {
        console.log("Something went wrong.", result.validationErrors)
        return;
    }

    console.log("The payment finalized")
}