No-Code Checkout 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 of 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 the button code is the same as what you have 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 will 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

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/ color of the product name/ price/ quantity?

It’s not currently possible to change the layout/size/color for this integration.

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&currency=USD"></script>

I have a Premier PayPal account, and I don’t see the pay link and button

feature.

This feature is only available for Business PayPal accounts. 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//ipn/history
https://www.paypal.com/merchantnotification/ipn/history

Accessing IPN history:

https://developer.paypal.com/api/nvp-soap/ipn/IPNIntro/

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 “price label”:

Add this script below your button code, replace the <HostedButton_ID> with actual button id.

#paypal-form-fields-container-<HostedButton_ID> {

#price-label {

display: none !important;

}

</style>

Similar to “price label”, you can do the same for other text too:

desc-label (for Product name)
price-label (For Price)

If you want to hide multiples of them, use separated ID:

If you want to hide all text around buttons, remember that your button type shouldn't require any selections or input from your customer:

<style>

#paypal-container-<HostedButton_ID>

{

#paypal-form-fields-container-<HostedButton_ID>

{

display: none !important;

}

</style>

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 our website, you'll need to copy/paste the button code again on your website.