Build button

Customize your integration by manually building the JavaScript button

docscurrentLast updated: September 30th 2021, @ 2:42:01 pm


Follow these steps to manually build the Log in with PayPal button:

  1. Select button type
  2. Construct authorization endpoint
  3. Customize functionality
  4. Get authorization code

Select button type

Chose if you want to use the branded Log in with PayPal button or to create your own.

  • To create your own Log in with PayPal button, reference our Button design guide.
  • To use the branded Log in with PayPal button, use the following URL for the button image location:

    https://www.paypalobjects.com/webstatic/en_US/developer/docs/login/log_in_with_paypal.png
    

    Note: To ensure the button image stays in sync with PayPal branding, don't download the button image and host it on your own server.

Construct authorization endpoint

The authorization URL is called each time your users select the Log in with PayPal button. Construct the authorization endpoint according to the following template:

 ```text
 https://www.sandbox.paypal.com/connect?flowEntry=static&client_id=[client id]&scope=[list of scopes]&redirect_uri=[return URL]
 ```
Variable Description
client ID Replace client id with your app’s sandbox or live client ID, depending where this URL is used.

Example:

ARfDleH_j-C17kxbdUzYivR70xP5Uy5N_DrFZVOvyZvNGBaPB_QNbwWkgF7lMsemGJycLRFVwaM
list of scopes Replace list of scopes with a space-separated list of scopes. It is mandatory to include openid scope. See Scope attributes for details on how attributes map to scopes.

Example:

openid profile email address https://uri.paypal.com/services/paypalattributes
return URL Page to return to after successful login. This URL must be encoded and exactly match the Return URL you set in the My App & Credentials page.

Example:

https%3A%2F%2Fwww.myreturnurl.com&state=123456

Sample URL

 ```text
  https://www.sandbox.paypal.com/connect/?flowEntry=static&client_id= ARfDleH_j-C17kxbdUzYivR70xP5Uy5N_DvNGBaPB_QNbwWkgF7lMsemGJycLRFVwaM&response_type=code&scope=openid profile email address&redirect_uri=https%3A%2F%2Fwww.myreturnurl.com&state=123456
 ```

Customize functionality

You can optionally use the following advanced parameters to further customize your button functionality:

Parameter Description
response_type code – to receive authentication code in the response.
id_token – used only by direct instruction of your integration team.
fullPage To open the flow in a mini browser, do not pass this parameter.

To open the Log in with PayPal flow as a full page in the same tab, pass true.

Get authorization code

When your users successfully log in to PayPal and consent to sharing their basic information, PayPal passes an authorization code to the return URL you specify.

Parameter Description
authorization code The authorization code is appended as a parameter to the return URL after the user logs in and consents to share information with your website.

Sample URL

https://myreturnurl.com/?code={authorization_code}&scope=address%20openid%20profile%20email

Next steps