Invalid return_uri on PayPal Oauth

Question

I'm trying to set up PayPal login on a website, and used the custom button generator on the PayPal website to make the login button:

<div id="proceed-to-confirmation-page-link" class="text-right">
    <span id="lippButton"></span>
</div>

<script src='https://www.paypalobjects.com/js/external/api.js'></script>
<script>
    paypal.use(['login'], function (login) {
        login.render({
            "appid": "<MY APP ID>",
            "authend": "sandbox",
            "scopes": "openid profile address",
            "containerid": "lippButton",
            "locale": "en-us",
            "text": "Login to PayPal to order",
            "redirect_uri": "<MyRedirectURI>"
        });
    });
</script>

I have verified that the appid and redirect_uri are correct. I have tried both http://localhost:####/myredirecturi and http://www.myproductionsite.com/myredirecturl. I have added both of these return urls on developer.paypal.com, and waited three hours or more.

No matter what I do, I get the error message: Sorry about that Looks like this action is not supported. Please return and report this error so that we can support it in the future. (invalid client_id or redirect_uri)

I understand what the error message is saying, but I have triple-checked that these are correct. What am I missing?

I read PayPal's documentation, but it is woefully inadequate -- it explains what's supposed to happen, but gives hardly any detail about how the authorization code is supposed to be returned back to my site. If you can point me to further documentation, I would be very grateful.

Jamnis

Answer 1

This is a partial answer to my question: I had tried using the key "redirect_uri" instead of "returnurl" because I had seen it in someone else's stuff somewhere. It turns out "returnurl" is correct.

<div id="proceed-to-confirmation-page-link" class="text-right">
    <span id="lippButton"></span>
</div>

<script src='https://www.paypalobjects.com/js/external/api.js'></script>
<script>
    paypal.use(['login'], function (login) {
        login.render({
            "appid": "<MY APP ID>",
            "authend": "sandbox",
            "scopes": "openid profile address",
            "containerid": "lippButton",
            "locale": "en-us",
            "text": "Login to PayPal to order",
            "redirect_uri": "<MyRedirectURI>"
        });
    });
</script>

I am still at a loss, however, to know how PayPal returns an authorization code confirming that the user is logged in. I don't see anything in the session.

Jamnis

Answer 2

I had the same problem. You might use the wrong app id. Post on https://api.sandbox.paypal.com/v1/oauth2/token returns this:

{
    "scope": "scopes",
    "nonce": "something",
    "access_token": "something",
    "token_type": "Bearer",
    "app_id": "some id",
    "expires_in": 32400
}

This is not the appid you want. Use the client id from your developer dashboard.

Undersigned

Answer 3

Hello with the following code it works for me!

        <span id='lippButton'></span>
        <script src='https://www.paypalobjects.com/js/external/api.js'></script>
        <script>
            paypal.use( ['login'], function (login) {
                login.render ({
                    "appid":"<MY APP ID>",
                    "authend": "sandbox",
                    "scopes":"openid",
                    "containerid":"lippButton",
                    "responseType":"code",
                    "locale":"en-us",
                    "buttonType":"LWP",
                    "buttonShape":"pill",
                    "buttonSize":"lg",
                    "fullPage":"true",
                    "returnurl":"http://127.0.0.1/CyFlying/public/"
                });
            });
        </script>

Hammerless

Answer 4

What solved this issue for me was enabling "Login with PayPal" in the sandbox account. Attached reference: https://developer.paypal.com/docs/log-in-with-paypal/integrate/#link-enableloginwithpaypal

Handel