Can I add a Venmo button to my PayPal button on my website pages?

[Olcaliforniakid]

I have always found it relatively easy to put PayPal buttons on my web pages through the button builder on PayPal. It gives me the code and I insert it into my html through Microsoft Expression 4. I know this is old school and my site is also old school but very efficient. I have a Venmo account but can’t find a way to build a Venmo button to insert along with my PayPal button. Any ideas?

[MTS_Jennifer]

Hello @Olcaliforniakid 

Thank you for posting to the PayPal Merchant Community. The new Copy and Paste Pay links and buttons will allow you to create a payment button through your PayPal Account that will display a Venmo button, provided both the buyer account and the seller account is in the US.

Here is how to create this new button:

• Log into your PayPal Account at https://paypal.com
• Click on Pay & Get Paid
• Click on Pay Links & Buttons
• Fill in the details for your button
• Click Change the Look and Feel to customize the buttons
• Click Build It

You will be given the option for Code, Link or QR code. You can copy and paste it into your website.

As you build the button a preview is shown to the right. US Business accounts will see this preview ( I changed the button shape to Pill):

Thank you,

Jennifer

MTS

PayPal

[Olcaliforniakid]

I went through the same process as when I added my PayPal button and nothing happens. It's been awhile since I built the 60+ buttons on my site. I added the html generated by the button maker and put it in the body below the current PayPal button and also removed the current button but nothing appears in the view. Sorry if I am sounding like an amateur but I'm missing something.

Thanks for your help.

Scott

[MTS_Jennifer]

Hi @Olcaliforniakid ,

Thank you for posting. It sounds like you have multiple buttons being displayed on the same page. The issue you are having is most likely caused by a specific line of code in your buttons that may be conflicting.

There are two different ways this can be resolved.

Instead of using the button code, you can opt to use the Pay Links on your web page rather than the button code. 

The other option is to leave one button completely intact, and then remove the very first line of code from all additional buttons.

Make no changes to the first button displayed on  your website. Copy and paste the code you receive from PayPal, like normal.

Example (for illustration purposes, the code you receive from PayPal will have your specific details):

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

Each additional button will need that first line of code between the initial script tags removed to be able to display on the same page as the first button.

It looks like the below example:

<div id="paypal-container-{{Hosted_button_ID}}"></div>
<script>
  paypal.HostedButtons({
    hostedButtonId: "{{Hosted_button_ID}}",
  }).render("#paypal-container-{{Hosted_button_ID}}")
</script>

Together the button code would look similar to this (it will have your specific details):

First Button:
<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-{{Hosted_Button_ID}}"></div>
<script>
  paypal.HostedButtons({
    hostedButtonId: "{{Hosted_Button_ID}}",
  }).render("#paypal-container-{{Hosted_Button_ID}}")
</script>

Second Button: 
<div id="paypal-container-{{Hosted_Button_ID}}"></div>
<script>
  paypal.HostedButtons({
    hostedButtonId: "{{Hosted_button_ID}}",
  }).render("#paypal-container-{{Hosted_button_ID}}")
</script>

Additional troubleshooting is found in this help article:

https://www.paypal.com/us/cshelp/article/help1137

Thank you,

Jennifer

MTS

PayPal