I have implemented Klarna payment method in my website. It was working fine but after sometime, I ran into a loading problem. When it was working the modal'd show with Klarna image as a button as you can see within the image. When it was working after clicking on image, it'd show the Buy Now button along with some text from the klarna API I guess and then It'd proceed to normal flow of the payment. When I ran into the issue, the page'd still load Buy Now button but without any text When it started giving error and when I click on that button it gives error in the console on Google chrome Error. On firefox. the error is of authorization_tokken as you can see Firefox error. If I wait for about 1 or two minutes everything works fine but if I rush towards it after loading the page, it keeps on giving this error and I am stuck here. I'm working in codeigniter 3 and here is my code: 1) I am creating client tokken by calling klarnaSession() through a curl request which is working perfectly fine` <?php // Klarna code $klarnaProducts = []; $klarnaDetail = []; $klarnaDetail['name'] = 'U-Flow 2L Keg Kit'; $klarnaDetail['quantity'] = 1;
$product_price = 84.99;
$klarnaAmount = round($product_price , 2);
$klarnaAmount = $klarnaAmount*100;
$quantity_price = $product_price*1;
$klarnaDetail['unit_price'] = $product_price*100;
$klarnaDetail['total_amount'] = round($quantity_price, 2);
$klarnaDetail['total_amount'] = $klarnaDetail['total_amount']*100;
array_push($klarnaProducts, $klarnaDetail);
$this->session->set_userdata('product_name', 'U-Flow 2L Keg Kit');
$this->session->set_userdata('klarnaAmount' , $product_price*100);
$this->session->set_userdata('klarnaProducts' , json_encode($klarnaProducts));
$client_token = klarnaSession($klarnaAmount , $klarnaProducts);
?>`
Here is how I am creating client tokken:
function klarnaSession($amount = 0, $products = []){
if(empty($amount)){
return false;
}
$CI = & get_instance();
$post = [
"locale" => "en-GB",
"purchase_country" => "GB",
"purchase_currency" => "GBP",
"order_amount" => $amount,
"order_tax_amount" => 0,
"order_lines" => $products
];
echo "<pre>";
print_r($post);
echo "</pre>";
$api = KLARNA_URL."payments/v1/sessions";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $api);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST' );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post));
curl_setopt($ch, CURLOPT_HTTPHEADER , array(
"Content-Type:application/json",
"Authorization: Basic ".base64_encode(KLARNA_CREDENTIALS)
));
$response = curl_exec( $ch );
curl_close( $ch );
$response = json_decode($response , true);
echo "<pre>";
print_r($response);
echo "</pre>";
if(!empty($response['session_id'])){
return $response['client_token'];
}
return false;
}
Then on the basis of this tokken, I'm seding Javascript requests:
<!-- Klarna script -->
<?php if(!empty($client_token)){ ?>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
<script type="text/javascript">
$(document).ready(function(){
$('.klarnaSection').hide();
$(document).on('click','#klarnaButton',function(e){
$(this).hide();
$('.klarnaSection').fadeIn();
});
window.klarnaAsyncCallback = function(){
Klarna.Payments.init({
client_token: '<?php echo $client_token;?>'
});
console.log("Payments initialized");
//The following method loads the payment_method_category in the container with the id of 'klarna_container'
Klarna.Payments.load({
container: '#klarna_container',
payment_method_category: 'pay_over_time'
},
function (res) {
console.log("Load function called");
console.debug(res);
});
};
/*The following is the authorize function, which triggers Klarna to perform a risk assessment of the purchase
The successful response of this risk assessment is an authorization token, which in this example is logged in the console
*/
$(document).on('click',"button.authorize", function(e){
Klarna.Payments.authorize({
payment_method_category: 'pay_over_time'
},
{
order_amount: "<?php echo $klarnaAmount;?>",
order_lines: <?php echo json_encode($klarnaProducts);?>,
},
function(res) {
console.log("Response from the authorize call:");
console.log(res);
$.ajax({
url: base_url+"klarna/getAuthorizationToken/"+res.authorization_token,
type: "GET",
dataType: 'json',
success: function(data){
if(data.response){
swal({
title: "Success",
text: "Payment successfully done.",
icon: "success",
}).then((value) => {
if(value){
var redirect_url = base_url+"klarna/confirmation";
window.location.replace(redirect_url);
}
});
}
}
});
});
});
});
</script>
<?php } ?>
On here function(res) { the issue appears because this res.authorization_token is supposed to have authorization_token which is given when I wait for 1 or 2 minutes as I have mentioned before. Please help. You can test it live at here: https://kegs.uflow.co.uk/
