Handle payment method

Integration

The KlarnaPaymentMethodMethodManager is an SDK manager designed to streamline the headless integrations of the Klarna payment method that is comprised of an initial component/form for selecting a payment category and a redirect flow.

To integrate KlarnaPaymentMethodMethodManager, follow these steps:

1. 1

   The PrimerHeadlessCheckout will help you configure the headless payment method and then start the payment process

2. 2

   When calling configure provide a callback function for onAvailablePaymentMethodsLoaded as described here

3. 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. 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. 5

   You can use the payment categories retrieved through the onPaymentMethodCategoriesChange callback to create the custom component/form

6. 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. 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

You can follow the steps described here in order to configure the PrimerHeadlessCheckout.

Provide a custom handler for the KLARNA payment method manager

As described here the onAvailablePaymentMethodsLoad callback will be called with all available payment methods. Use this function and create a custom configuration for the KLARNA payment method manager type and afterwards start the payment process.

123456789101112131415161718192021

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()

Create the KlarnaPaymentMethodManager

Call the start function in order to start the flow of the component:

12345678910

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

The onPaymentMethodCategoriesChange callback received a payload as described here The options array can be used to configure a custom component/form.

Handle data collection

As mentioned previously, the component allows you to collect the payment categories, and to request payment finalization by calling the start function from the payment method manager. You can use the result of the start function to handle any errors

123456789101112

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")}