Add custom input fields to Klarna Checkout page. Added via shortcode [woocommerce_klarna_checkout_extra_fields]. Saved as post_meta to the order directly on .blur via ajax.

klarna-checkout-extra-fields.php

<?php
/**
 * Plugin Name:     Klarna Checkout Extra Fields
 * Plugin URI:      http://krokedil.com
 * Description:     Add custom input fields to Klarna Checkout page. Added via shortcode [woocommerce_klarna_checkout_extra_fields]. Saved as post_meta to the order directly on .blur via ajax.
 * Version:         1.1
 * Author:          Krokedil
 * Author URI:      http://krokedil.com
 * License:         GPL-2.0+
 * License URI:     http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:     klarna-checkout-extra-fields
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

class Klarna_Checkout_Extra_Fields {
	
	public function __construct() {
		
		// Add shortcode
		add_shortcode( 'woocommerce_klarna_checkout_extra_fields', array( $this, 'klarna_checkout_extra_fields') );
		
		// Js in footer
		add_action( 'wp_footer', array( $this, 'js_in_footer' ) );
		
		// Ajax
		add_action( 'wp_ajax_customer_update_kco_extra_field', array($this, 'customer_update_kco_extra_field') );
		add_action( 'wp_ajax_nopriv_customer_update_kco_extra_field', array($this, 'customer_update_kco_extra_field') );
	}
			
	
	
	/**
	 * Function klarna_checkout_extra_fields
	 * Rendering of the shortcode woocommerce_klarna_checkout_extra_fields
	**/
	function klarna_checkout_extra_fields() {
		global $woocommerce;
		$field = array(
			'type'              => 'textarea',
			'label'             => __( 'Extra info', 'klarna-checkout-extra-fields' ),
			'placeholder'       => _x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'klarna-checkout-extra-fields'),
			'class'             => array('notes'),
		);
		
		ob_start();
		
		echo '<div class="woocommerce"><form>';
		woocommerce_form_field( 'kco_extra_info', $field );
		echo '</form></div>';
		
		return ob_get_clean();
		
	}
	
	
	/**
	 * JS for updating the extra fields (via ajax) if displayed on KCO checkout 
	 *
	**/
	function js_in_footer() {
		
		global $post;
		if ( is_singular() ) {
			
			if ( has_shortcode( $post->post_content, 'woocommerce_klarna_checkout_extra_fields') || defined( 'WOOCOMMERCE_KLARNA_CHECKOUT' ) ) {
			
				?>
				<script type="text/javascript">
				jQuery(document).ready(function($){
					
					jQuery('#kco_extra_info').blur(function () {
						var kco_extra_info = '';
						
						if( jQuery('#kco_extra_info').val() != '' ) {
							var kco_extra_info = jQuery('#kco_extra_info').val();
						}
						
						if(kco_extra_info == '') {
						
						} else {
								
							jQuery.post(
								'<?php echo get_site_url() . '/wp-admin/admin-ajax.php' ?>',
								{
									action			: 'customer_update_kco_extra_field',
									kco_extra_info	: kco_extra_info,
									kco_order_id	: '<?php echo WC()->session->get('ongoing_klarna_order');?>',
									_wpnonce		: '<?php echo wp_create_nonce('update-kco-checkout-extra-info'); ?>',
								},
								function(response) {
									console.log(response);
								}
							);
							
						}				
					});
				});
				</script>
				<?php
				
			} // End if has_shortcode()
		} // End if is_singular()
		
	} // End function
	
	
	
	/**
	 * Function customer_update_kco_extra_field
	 * Ajax request callback function
	 * 
	 */
	function customer_update_kco_extra_field() {
		
		// The $_REQUEST contains all the data sent via ajax
		if ( isset($_REQUEST) && wp_verify_nonce( $_POST['_wpnonce'], 'update-kco-checkout-extra-info' ) ) {
		
			$kco_extra_info = sanitize_text_field($_REQUEST['kco_extra_info']);
			$kco_order_id = sanitize_text_field($_REQUEST['kco_order_id']);
	
			update_post_meta( $kco_order_id, 'kco_extra_info', $kco_extra_info );
			
			echo 'Updated in order id: ' . $kco_order_id;
		
		} else {
		
			echo '';
		
		}
		
		die(); // this is required to terminate immediately and return a proper response
		
	} // End function
	
} // End class

$klarna_checkout_extra_fields = new Klarna_Checkout_Extra_Fields;

LOVELY gist @NiklasHogefjord 👏

Does this still work in 2019?

This gist is for the old Klarna v2 platform. I recommend that you switch to the new Klarna v3 platform. With that plugin we have better built in support for extra checkout fields. Take a look at the plugin here: https://wordpress.org/plugins/klarna-checkout-for-woocommerce/. The merchant will ned a new agreement with Klarna to use this plugin/platform though.