Integrate Log in with PayPal

Add the Log in with PayPal button to your website or app

docscurrentLast updated: September 30th 2021, @ 12:32:31 pm


Follow these steps to add the Log in with PayPal button to your website or app:

  1. Enable the Log in with PayPal
  2. Add Log in with PayPal button
  3. Get access token
  4. Exchange refresh token for access token
  5. Get customer info
  6. Test
  7. Go live

Quick start

Add the following JavaScript to your website or app:

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

Technical flow

access-token-flow

Know before you code

  • Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:

    • Your client ID
    • Your access token
    • Your business account credentials
    • Your personal account credentials
  • This integration uses the Identity API.

Enable Log in with PayPal

  1. Select your app from the My Apps & Credentials page on the Developer Dashboard.
  2. Enter a Return URL. Your website or app redirects your users to this URL after they complete the Log in with PayPal flow.
  3. Select the Log in with PayPal checkbox and then select Advanced options.
  4. Select the user information you want shared with your website or app.

    • We recommend that you ask your users to share only the minimum amount of information that you need. The fewer permissions you ask for, the more likely it is your users will grant them.
    • If you intend to use payouts or money withdrawal, select the following:

      • Email
      • Account verification status
      • PayPal account ID (payer ID)

    Note: You'll have access to the values of the attributes that you select. However, this doesn't authorize you to email users. You must provide your users with a separate option to opt-in or opt-out of communications not related to purchases (such as marketing emails, newsletters, and offers).

  5. Enter your Privacy policy URL and User agreement URL.

    • For testing purposes, you can enter https://example.com.
    • When you go live, replace the example URLs with your live URLs. The PayPal privacy and security team reviews these URLs and they are necessary for activating Log in with PayPal for your website or app.

Add Log in with PayPal button

You have two options for adding the Log in with PayPal button to your website or app:

Option Use case
Generate button If you want the simplest integration, use the PayPal button generator to dynamically generate the necessary JavaScript.
Build button If you want greater control and customization options, manually build the button and construct your own authorization endpoint and parameters.

Get access token

Exchange the authorization code for an access token so you can call PayPal's user profile service.

  1. Make a call to PayPal's tokenservice endpoint:

    https://api-m.sandbox.paypal.com/v1/oauth2/token

  2. Pass the authorization code to the tokenservice endpoint with the following parameters:
Parameter Specify in Description
Authorization header Separate your Base64-encoded client ID and secret credentials by a colon (:).
grant_type form body The type of credentials that you provide to obtain a refresh token. Set to authorization_code.
code form body Enter the PayPal-generated authorization code.

Sample Request

curl -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
-H 'Authorization: Basic {Your Base64-encoded ClientID:Secret}' \
-d 'grant_type=authorization_code&code={authorization_code}'

Sample Response

{
   "token_type": "Bearer",
   "expires_in": "28800",
   "refresh_token": {refresh_token},
   "access_token": {access_token}
}

Note: The access token expires after a short period of time, so you also receive a refresh token that you use to periodically refresh the access token. When you need to make a call to the user info service, use the refresh token first to get a new access token that you can then use to call the user info service.

Field Type Description
token_type: {type} String Defines the type of token, in this case the token type is Bearer.
expires_in: 28800 String Identifies the number of seconds until the access token expires. Default is 28800 seconds or 8 hours.
refresh_token: {refresh token} String Identifies the actual token used to refresh the access token.
access_token: {access token} String Identifies the actual token used to call the user info endpoint.

Exchange refresh token for access token

  1. Make a call to Paypal's tokenservice endpoint:

    https://api-m.sandbox.paypal.com/v1/oauth2/token

  2. Pass the refresh token to the tokenservice endpoint with the following parameters:
Parameter Specify in Description
Authorization header Separate your Base64-encoded client ID and secret credentials by a colon (:).
grant_type form body Set to refresh_token.

Sample request

curl -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
-H 'Authorization: Basic {Your Base64-encoded ClientID:Secret}=' \
-d 'grant_type=refresh_token&refresh_token={refresh token}'

Sample response

{
   "token_type": "Bearer",
   "expires_in": "28800",
   "access_token": {access_token}
}
Field Type Description
token_type: {type} String Defines the type of token, in this case the token type is Bearer.
expires_in: 28800 String Identifies the number of seconds until the access token expires. Default is 28800 seconds or 8 hours.
access_token: {access token} String Identifies the actual token used to call the user info endpoint.

Get customer info

Call the Show user profile information method with the desired parameters to obtain the customer information.

Test

  1. Log in to the Developer Dashboard and create a new sandbox test account.
  2. Click your Log in with PayPal button.
  3. Log in to PayPal using the test buyer account you created.
  4. Make sure you received a non-empty authorization code in the return URL query parameter.
  5. Exchange the authorization code for a token as described in Get access token.
  6. Call the user info endpoint with the access token and verify that you received the correct user information.

Go live

App review

PayPal must review your app to approve the sharing of customer data. By default, Full name is enabled, but all other scopes require PayPal's approval.

Note: The app review process typically takes 7-10 business days. Initiate the app approval process accordingly before your planned go live date.

To send your app for review, email us at help-loginappreview@paypal.com. Include the following in your email:

  • Client ID of your live app.
  • A short description and explanation of your website or app.
  • Screenshots or site URL.
  • Detailed description of how your app will use Log in with PayPal.
  • List of the scope attributes you want to enable.
  • Description of how you will use each scope attribute, how it benefits your users, and why your app needs the scope.

After you receive email confirmation that your app is approved, you can start receiving customer information by calling the user info endpoint.

Replace sandbox credentials with live credentials

  1. Button URL: change the endpoint from https://www.sandbox.paypal.com/connect? to https://www.paypal.com/connect?

Example

https://www.paypal.com/connect?flowEntry=static&client_id= ARfDleH_j-C17kxbdUzYivR70xP5Uy5N_DvNGBaPB_QNbwWkgF7lMsemGJycLRFVwaM&response_type=code&scope=openid%20profile%20email%20address&redirect_uri=https%3A%2F%2Fwww.google.com%3Fstate=123456
  1. Code to token: change the endpoint from https://api-m.sandbox.paypal.com/v1/oauth2/token to https://api-m.paypal.com/v1/oauth2/token
  2. User info: change the endpoint from https://api-m.sandbox.paypal.com/v1/identity/oauth2/userinfo to https://api-m.paypal.com/v1/identity/oauth2/userinfo

Test a live user flow

  1. Click your Log in with PayPal button.
  2. Log in to the PayPal window using a real buyer account. If you don’t have a real PayPal buyer account, go to the PayPal website and click Sign Up.
  3. Click on the Log in with PayPal button to complete the consent.
  4. Make sure you received a non-empty authorization code in the return URL query parameter.
  5. Exchange the authorization code to token as described in Get access token.
  6. Call the user info endpoint with the access token and verify that you receive the correct user information.

Next steps

See also