How to solve PayPal button not showing up issue

Are you facing an issue with a PayPal button not showing up on your site? In this article, I will share the methods I used to solve the problem.

Many developers face an issue that a PayPal button either does not show up or shows up only in block preview mode. No button turns up when the page is seen in the preview or live mode.

In this post, I will share common mistakes to avoid and a workaround for the problem. I will also share the code I use on my site to receive donations through PayPal successfully.

Common mistakes

People often make common mistakes that result in the PayPal button not showing up on their site. A few of these are:

Using a wrong block type

In WordPress, we have multiple types of block possible depending on the type of content. As the PayPal button code is an HTML code, we must place it in a custom HTML block. An example of it is shown below.

Placing Multiple PayPal Buttons Code

One common reason for a PayPal button not appearing is to place multiple buttons code on a single page. These buttons appear when we preview them in the block preview mode but not when we see the page preview.

The reason for the above is that a PayPal button code defines a few variables. The names of these variables are often the same across the various types of button codes. When we place the code multiple times, then name conflict takes place.

So, on a page, place the PayPal button code once only.

Variable price button issue

There are three types of PayPal buttons possible

• Fixed price
• Single select list
• Variable price

The last type of button is the most flexible for many use cases. Hence, people often choose it for their site.

The issue may be happening with a particular type of button only. Hence, change the type of button you are using and experiment with an alternative one.

I observed that fixed price and single select list buttons work fine for a site but not the variable price button. The code there has some issues. I will share the modified code I am using for a variable price button.

Fixing variable price button

The variable price button code from PayPal has some issues. It does not appear in the preview or after publishing the page.

I am using a modified version of the variable price button code. You can check out my donate page to see its working.

Modified code

I am using the below code for my site

<div id="smart-button-container">
      <div style="text-align: center"><label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value=""><span> USD</span></div>
      <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter an amount</p>
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&amp;enable-funding=venmo&amp;currency=USD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          var amount = document.querySelector('#smart-button-container #amount');
          if (amount.value.length < 1) {
              amount.value = 1;
          }
          if (amount.value == 0) {
              amount.value = 1;
          }
          if (amount.value < 0) {
              amount.value = -amount.value;
          } 

          return actions.order.create({
            purchase_units: [{"description":"Donate","amount":{"currency_code":"USD","value":amount.value}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

            // Show a success message within this page, e.g.
            const element = document.getElementById('paypal-button-container');
            element.innerHTML = '';
            element.innerHTML = '<h3>Thank you for your payment!</h3>';

            // Or go to another URL:  actions.redirect('thank_you.html');
            
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container');
    }
    initPayPalButton();
  </script>

It has certain special features:

• PayPal variable price button code has a mandatory description field label which has been removed.
• Ensuring that any negative amount entered is converted into a positive one.
• Works perfectly on a live page.

To use it for your site, you have to carry out the following steps:

Step 1-Ensure business account

The above code will work only when you have a PayPal business account. So, if you have a PayPal business account, you can move to the next step. Otherwise, follow the steps given in the below post to convert to a business account.

• Steps to convert a PayPal account to a business account

Step 2-Obtain your client id

In the code, you may observe that the line “<script src=”https://www.paypal.com/sdk/js?client-id=sb“. In place of ‘sb,’ you have to use an id that represents your PayPal account. For that, log in to your PayPal account. Post that, visit the below page on PayPal to find out your client id

• https://www.paypal.com/commercesetup/APICredentials?guided=true

A page shown below will appear.

Copy your client id and paste it in place of ‘sb’ in the line mentioned. With that, the code must work perfectly for you, also.

Summary

In this article, we have seen common mistakes which lead up to a PayPal button not showing up on a site. For the variable price button, we have seen a modified code that works perfectly on a site.

If you face any issues with PayPal buttons, then feel free to drop a comment 🙂 I will be more than happy to help you out with your issue.

Cheers!