PayPal pay link and button troubleshooting tips
I'm getting an error, and the button isn't displaying on my website.
- Check that your internet connection is working.
- Visit other pages on your website and check that they’re loading correctly.
- Go to the PayPal Buttons page and check:
* Is the button showing under ‘Saved Buttons’?
* Select Edit and ensure that the button code matches what is on your website. - Right-click on your product page (where you have pasted the button code) and click Inspect. Go to the Console tab (you'll see this on the top). You may see CSP errors. If you've deployed a Content Security Policy, you may see CSP errors such as these (sample CSP errors):
- Refused to load the script ‘https://www.paypal.com/sdk/js**’ because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
- Refused to connect to 'https://www.paypal.com/**' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
- Refused to execute inline script because it violates the following Content Security Policy directive: "script-src https://*.paypal.com". Either the 'unsafe-inline' keyword, a hash ('sha256-WYDWDPwB8j2VePYrqy38aHPcJLsasO//lnXymmxscUk='), or a nonce ('nonce-...') is required to enable inline execution.
- Refused to load the image 'https://tracking.qa.paypal.com/webapps/tracking/ts?**' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
- Refused to frame 'https://www.paypal.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.
You can try adding the below to resolve any of the above errors:
Option-1 (HTML): If your CSP is configured in HTML file use the below code to replace your CSP code
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'unsafe-inline' https://*.paypal.com https://*.paypalobjects.com;
style-src 'unsafe-inline' https://*.paypal.com; connect-src
https://*.paypal.com; frame-src https://*.paypal.com; img-src
https://*.paypal.com https://*.paypalobjects.com">
Option-2 (Server side): If your CSP is configured on the server side use the below code to replace your CSP code
Content-Security-Policy: script-src 'unsafe-inline' https://*.paypal.com https://*.paypalobjects.com
Content-Security-Policy: style-src 'unsafe-inline' https://*.paypal.com
Content-Security-Policy: connect-src https://*.paypal.com
Content-Security-Policy: frame-src https://*.paypal.com
Content-Security-Policy: img-src https://*.paypal.com https://*.paypalobjects.com
How do I change the layout/ size/ colour of the product name/ price/ quantity?
Here's how to change the layout/ size/ colour of the product name/ price/ quantity on the PayPal website:
- Go to the PayPal Buttons page.
- Click Open beside the saved button and select Edit.
- Click Customize your Buttons and make any necessary changes.
I edited product information (name, amount, or anything else); do I need
to copy/paste the button code again?
No, we take all of the information from the PayPal server. Once you’ve saved the changes on your account, you don’t need to update your website's copy/ pasted button code.
Note: If you change the currency code on your product, you'll need to update your payment button.
I see a client ID in the code; what does it mean?
Client ID is the merchant client ID that's part of your account. You shouldn't edit it. Use it as it is offered in the button code.
I added multiple buttons, but none are showing on my web page.
Multiple buttons on the same web page won’t work in the following scenarios:
- If you have copied/pasted the same button ID multiple times on the same web page, only the first button will show. You can’t repeat the same button ID multiple times.
- If you have copied/pasted different button IDs but with other currencies on the same web page, only the first button will show. You can’t add foreign currencies on buttons on the same web page.
- If you have copied/pasted different button IDs and experience slowness, ensure the script tag with the client ID is only added once. The script line will look like this:
<script src="https://www.paypal.com/sdk/js?client-id=XYZ&components=hosted-buttons&enable-funding=venmo¤cy=USD"></script>
I have a Premier PayPal account, and I don’t see pay links and buttons as
an option.
This feature is only available for Business PayPal accounts. To use this feature, upgrade or create a Business account.
How do I test this experience on PayPal Sandbox?
Pay links and buttons is available to test on Sandbox.
The Credit/ Debit inline expansion doesn't show completely on my
website.
Ensure that the parent container width and height are set to accommodate the inline expansion. Consult your hosting platform documentation/support for more details.
Do pay links and buttons support IPN (Instant Payment Notification)?
Yes. Follow these steps to setup and enable IPN.
Here's how to find the IPN setup in PayPal:
- Go to your Account Settings.
- Select Notifications and Instant payment notifications.
- Click Update link.
Here's how to enable IPN settings:
- Add the IPN handler URL and select Receive IPN messages (Enabled).
- Click Save.
Handle IPN in your server code:
- Whenever pay link and button transactions are completed, PayPal IPN invokes the Notification URL configured in step 2.
Accessing IPN history:
- https://www.sandbox.paypal.com/merchantnotification/ipn/history
- https://www.paypal.com/merchantnotification/ipn/history
References
Introduction: https://developer.paypal.com/api/nvp-soap/ipn/IPNIntro/
Make sure to use correct IPN url in Server Code
Samples for different languages GitHub - paypal/ipn-code-samples
When a customer is sent to the redirect page, what information about the
purchase does PayPal send? Does pay links and buttons support PDT;
what variables are supported?
Yes we do support PDT variables as documented here. You'll receive PDT if you turn on the Auto-Return setting during pay link and button configuration.
Does pay links and buttons support a locale if it’s manually added by the
merchant in the button code or payment link?
By default, pay links and buttons use customers' browser preferences to show the button code and payment link experience.
Merchants can override the same only for payment link and button code by appending “locale.x=fr_FR” as a query parameter. The list of supported codes for locales can be found here. Any text entered by a merchant during config will not be translated.
Example: https://www.paypal.com/ncp/payment/F3YMU2ZGT49XX?locale.x=jp_JP
Example:
<script src="……¤cy=USD&locale.x=jp_JP"></script>
Is it possible to hide some of the labels that come from the pay links and
button code?
We understand that you may have a different visual setup on your website, however, we don't recommend hiding the button code that we provide.
Hiding them from your website won't change how the transaction is processed. The transaction will still use your hosted button ID configuration.
You can hide certain or all text around buttons once you're using a button type that doesn't require customer input. For example, if your customer needs to select the quantity or multiple item select list and you've hidden those input elements, the transaction will fail.
Here's an example of how to hide the price of an item:
Add this script below your button code, replace the <HostedButton_ID> with actual button id.
<style> #paypal-container-<HostedButton_ID> {
#paypal-form-fields-container-<HostedButton_ID> {
#price-label {
display: none !important;
}
}
}
</style>
-
desc-label (for Product name) -
price-label (For Price)
style> #paypal-container-
<style>
#paypal-container-<HostedButton_ID>
{
#paypal-form-fields-container-<HostedButton_ID>
{
display: none !important;
}
}
</style>
Is it possible to override my pay links and buttons to use 'shipping from
settings'?
Pay links and buttons won't honour bulk override of shipping from account settings, also known as the following setting from Shipping Setting.
I changed the currency of my button but don't see it updated on the
website.
If you change the currency of a button after already pasting it on your website, you'll need to copy/paste the button code again on your website.
I'm unable to select "Use shipping from Settings" and "Use tax from
Settings" when I select "Do not collect shipping address".
Shipping and Tax from Settings relies on the customer’s shipping postal code and/or country. If you select “Do not collect shipping address”, you won’t receive the customer’s shipping address to allow for shipping and tax calculation from Settings. We recommend using other options from “Shipping fee” and “Tax Rate” dropdowns.
Do pay links and buttons support Webhooks?
Yes. Here's how to enable Webhooks:
- Log into the Developer Dashboard using your merchant account credentials.
- Toggle to Live.
- Click Apps and Credentials.
- Scroll down and select Manage Webhooks.
- You can now add a Webhook URL for Live. If you want to add Webhooks for Sandbox, remain on this page and toggle from Live to Sandbox from the top right corner.
- Add your Webhooks callback URL, select all events or checkout, payment events which will be invoked by PayPal upon selected events depending on your NVP or SOAP api implementation call PayPal NVP/SOAP api for webhook information.
Sample webhook response:
"id": "WH-12D11567VE3425924-2G120938U32719946",
"event_version": "1.0",
"create_time": "2024-09-14T15:55:58.043Z",
"resource_type": "capture",
"resource_version": "2.0",
"event_type": "PAYMENT.CAPTURE.COMPLETED",
"summary": "Payment completed for $ 128.88 USD",
"resource": {
"supplementary_data": {
"related_ids": {
"order_id": "8LM68409BR5528307"
}
],
"id": "7KK30254642170736",
"status": "COMPLETED"