Adding PayPal Donate Script Button

Ask the community
,
1

My site takes tax free donations. I was told by PayPal that by using the Wix PayPal app the transaction on their credit card will show as goods and services, not a donation. PayPal says I have to use their button script, one of which goes in the header and the other on the page I want the button.

I have found no way to do this in Wix Studio, support is not sure if it can be done. I have tried the Embed Code elements but as expected that does not work.

If anyone else is using PayPal’s donate button script, can you explain how you installed it?

Thanks.

2

You can place the global script in the header from your dashboard → settings → search “custom code”. Drop your code snippet in the header section.

Then for the pay pal button to display on your site, add an iFrame/embed element element to your page then past the other script into your iFrame.

Also check out wix donations if you have not already.

1 Like
3

Thanks for the quick reply. I have tried what you suggested but when I add the button code to the iframe and save the frame is blank. The code placed in the iframe is just a container followed by a script I suspect the script is the problem. The iframe instructions say it will accept https only.

I am using the Wix donations with the PayPal app but as I mentioned, according to PayPal the transaction will show as goods and services and they are the ones who said I need to user their code. There is also the option to use an URL in an iframe which works fine in Safari but Firefox is blocking it.

4

Does your site have a premium plan on it? iFrame’s require a site plan in order to render. If your provide your code snippet, we can take a look at it, just make sure you hide and sensitive API keys before sharing, if any.

It may be blank in the editor depending on CORS but does it work in production (live published site)?

Also Firefox is not as popular as Chrome or Safari so ensuring that it works on the other two is more of a pressing matter first.

5

Yes we are on a premium plan. Here are the two scripts, the first goes in the header which is not a problem. The second would go into an iFrame. When I do that the frame is blank. Tried publishing it but the content did not show up.

Thanks again for your advice.

<script 
  src="https://www.paypal.com/sdk/js?client-id=x&components=hosted-buttons&enable-funding=venmo&currency=USD">
</script>

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

Try the following instead …..

WIX EDITOR – Correct Implementation (Step-by-Step)

STEP 1 — Add a placeholder element to your page

In the Wix Editor:

  1. Click Add

  2. Choose Embed Code

  3. Choose Embed HTML

  4. Select “HTML” mode, not “iFrame”

  5. Paste ONLY this into the HTML embed:

<div id="paypal-container-x"></div>

Do not paste the PayPal script here.
This element will act as the rendering target for the PayPal button.

STEP 2 — Add the PayPal SDK via Custom Code

In the Wix dashboard (not the page editor):

  1. Go to Settings

  2. Select Custom Code

  3. Click Add Custom Code

  4. Set “Apply to: All pages” (or just the page where the button is)

  5. Paste:

<script 
  src="https://www.paypal.com/sdk/js?client-id=x&components=hosted-buttons&enable-funding=venmo&currency=USD">
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
      paypal.HostedButtons({
          hostedButtonId: "x"
      }).render("#paypal-container-x");
  });
</script>

  1. Choose Place code in: Body – end

  2. Save & Publish

Why this works

Wix’s “Embed HTML” element inserts the <div> directly into the DOM.
The PayPal scripts added via Custom Code run in top-level window context, not inside a sandboxed iFrame.

Thus:

  • window.paypal loads normally

  • .render("#paypal-container-x") succeeds

  • The hosted button displays correctly

7

Thank you, I will give this a try.

8

Theres no need to use two iFrames to inject this code. That makes things things overcomplicated.

Your iFrame is most likely blank because we are not providing a full doctype html injection. Try this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PayPal Donate Button</title>

  <script 
    src="https://www.paypal.com/sdk/js?client-id=x&components=hosted-buttons&enable-funding=venmo&currency=USD">
  </script>

  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div id="paypal-container-x"></div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      paypal.HostedButtons({
        hostedButtonId: "x"
      }).render("#paypal-container-x");
    });
  </script>
</body>
</html>

Also for the following line:

<script 
    src="https://www.paypal.com/sdk/js?client-id=x&components=hosted-buttons&enable-funding=venmo&currency=USD">
  </script>

client-id=x // this should be an actual client ID.