Display tooltip when hovering over paypal button?

Question

I have tried using alt and title attributes in the <div> surrounding the code, but it doesn't seem to work. 😕

I'd like to give potential buyers some reassurance about the price without them having to login to paypal or even click the button. Surely there must be a way to get this to work? It has to be an official browser tooltip though, because it has to be trustworthy.

Here is the standard paypal code these days:

    <div id="smart-button-container">
      <div style="text-align: center;">
        <div id="paypal-button-container"></div>
      </div>
    </div>
  <script src="https://www.paypal.com/sdk/js?client-id=clientID&enable-funding=venmo&currency=AUD" data-sdk-integration-source="button-factory"></script>
  <script>
    function initPayPalButton() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'silver',
          layout: 'horizontal',
          label: 'paypal',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"test","amount":{"currency_code":"AUD","value":100}}]
          });
        },

        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>

Preston PHX · Accepted Answer · 2022-01-03 22:49:45Z

0

I'd like to give potential buyers some reassurance about the price without them having to login to paypal or even click the button.

The only solution is to display the price/description in a DOM element (separate <div> or similar) next to the paypal button container.

So, something like:

    <div id="smart-button-container">
      <div style="text-align: center;">
        <h2>Test A$100</h2>
        <div id="paypal-button-container"></div>
      </div>
    </div>

Or whatever styling and positioning fits your page.

answered Jan 3, 2022 at 22:49

Preston PHX

30.8k5 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

leslie dean brown Over a year ago

Are you sure there is no way of accomplishing this? It's not a case of unknown unknowns?😟

Preston PHX Over a year ago

The contents of the paypal button container are not guaranteed and subject to change at any time. You can/should only insert your own additional content outside that container.

leslie dean brown Over a year ago

Can? Should? If there's a way to do it I would like to know. That's my <div> on a server that I'm paying for. And paypal is getting my commission. I want to do it to remove ambiguity, not to trick people.

Preston PHX Over a year ago

See the answer for what you should do.

leslie dean brown Over a year ago

But I don't want to display the price in h2 (or any other h). If I had've wanted that I would've asked for it.😐 It's going to completely ruin the aesthetic design aspect of it.😁

|

Collectives™ on Stack Overflow

Display tooltip when hovering over paypal button?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related