Issues implementing Klarna into my own bespoke web site

118 Views Asked by At

I am having issues trying to get Klarna working on my own web site that I coded myself from scratch. i.e. not an off the shelf package.

I am trying to use the Express Sign on which works in Playground but not Production. Then I am trying to get the Sign in with Klarna working which won't work at all. Not even got to the Payment part yet!

This is the implementation code I am using for Express button. This works if I use the playground environment but not production. Oddly if I just change the data-environment to playground but leave my LIVE MID in there, it works. Would expect to have to use the playgorund MID

<script 
    src="https://x.klarnacdn.net/express-button/v1/lib.js"
    data-id="My_MID"
    data-environment="production"
    async
    >
</script>

 window.klarnaExpressButtonAsyncCallback = function()
    {
        Klarna.ExpressButton.on('user-authenticated', function (callbackData) {        
            // https://docs.klarna.com/express-button/integrate-express-button/web-integration/
            // Accessing the first_name property
            const firstname = callbackData.first_name;
            const lastname = callbackData.last_name;
            const email = callbackData.email;
            const date_of_birth = callbackData.date_of_birth;
            const phone = callbackData.phone;
            const address1 = callbackData.address.street_address;
            const address2 = callbackData.address.street_address2;
            const city = callbackData.address.city;
            const region = callbackData.address.region;
            const postal_code = callbackData.address.postal_code;
            const country = callbackData.address.country;

            // Use AJAX to process all this client information
    } 

For the Sign In with Klarna I am doing this:

<script
   src="https://x.klarnacdn.net/sign-in-with-klarna/v1/lib.js"   
   data-client-id="UUID"
   data-market="GB"
   data-scope="offline_access profile email billing_address create_payment_session"
   data-environment="production"
   data-on-sign-in="onSignIn"
   data-on-error="klarna_error">
</script>

I am not sure what the UUID is. Is this the user credentials username or the merchant ID? Tried both and neither work though.

<script>
function onSignIn(response) {
    const { access_token, refresh_token, id_token } = response
}
</script>

When I click on the sign in button I just get a window come up with

There’s a problem connecting you to Klarna right now

The URL for that window is : https://login.klarna.com/error?error=invalid_client&error_description=Client+authentication+failed+%28e.g.%2C+unknown+client%2C+no+client+authentication+included%2C+or+unsupported+authentication+method%29.+The+requested+OAuth+2.0+Client+does+not+exist.

Says invalid client but the UUID is correct and works for normal on-site messaging API calls.

0

There are 0 best solutions below