Can The HTML for the Pay Link Be Updated?

Question

Looking at the "Pay Link or Button" option from PayPal.com/buttons, the following code is generated once you fill in your options (except, of course, your client id and button id is provided):

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=hosted-buttons&enable-funding=venmo&currency=USD"></script>
<div id="paypal-container-BUTTON_ID"></div>
<script>
  paypal.HostedButtons({
    hostedButtonId: "BUTTON_ID",
  }).render("#paypal-container-BUTTON_ID")
</script>

Is it possible to utilize this with some additional HTML so the buttons aren't so big compared to the given text under the product name? Maybe additional parameters to go with the paypal.HostedButtons and I just can't find where they are? Any help or direction would be greatly appreciated.

Answer 1

If the issue is the buttons being too wide (by default they seem to fill the container up to 750px wide), that's straightforward, just add a max-width parameter. e.g.

<div id="paypal-container-BUTTON_ID" style="max-width:400px;"></div>

It's also possible to add a <style> tag above that button code that uses CSS to modify the HTML that is added by that button JS, if you need to make more bespoke modifications such as changing layout, text appearance, and the like.