How to include a PayPal Donation button into a .mdx page?

[ilg-ul]

Sorry for this stupid question, but my experience with MDX is small. :-(

I'm trying to integrate a Donation button into a .mdx page in Docusaurus, using the PayPal generated code:

<div id="donate-button-container">
<div id="donate-button"></div>
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
env:'production',
hosted_button_id:'5MFRG9ZRBETQ8',
image: {
src:'https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif',
alt:'Donate with PayPal button',
title:'PayPal - The safer, easier way to pay online!',
}
}).render('#donate-button');
</script>
</div>

I tried it in the Playground page and the error is Could not parse expression with acorn at the env: line.

Is there a way to fix this code to make it compile as .mdx?

Thank you!

[remcohaszing]

Your question seems to be more about adding arbritrary JavaScript via a <script> tag than about PayPal. You can use an MDX JSX expression to add <script> contents.

<div id="donate-button-container">
  <div id="donate-button"></div>
</div>

<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>{`
  PayPal.Donation.Button({
    env:'production',
    hosted_button_id:'5MFRG9ZRBETQ8',
    image: {
      src:'https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif',
      alt:'Donate with PayPal button',
      title:'PayPal - The safer, easier way to pay online!',
    }
  }).render('#donate-button');
`}</script>
</div>

[ilg-ul]

Your question seems to be more about adding arbritrary JavaScript via a <script> tag than about PayPal

Right!

You can use an MDX JSX expression to add <script> contents.

Ah, yes, I used the same syntax for multi line <CodeBlock> in Docusaurus.

Thank you!

[ilg-ul]

Using the fixed syntax made the code compile, however there probably must be another trick to make the code also run, since the Playground does not render the button.

Since the above suggested code had a misplaced </div>, I edited the original code and tested exactly the following code:

# Hello, world!

Below is an example of markdown in JSX.

<div style={{backgroundColor: 'violet', padding: '1rem'}}>
  Try and change the background color to `tomato`.
</div>

<div id="donate-button-container">
<div id="donate-button"></div>
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>{`
PayPal.Donation.Button({
env:'production',
hosted_button_id:'5MFRG9ZRBETQ8',
image: {
src:'https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif',
alt:'Donate with PayPal button',
title:'PayPal - The safer, easier way to pay online!',
}
}).render('#donate-button');
`}</script>
</div>

Only the elements up to the violet rectangle are displayed.

[wooorm]

The playground uses React.
React is JavaScript. But a particular version of JavaScript. It wants to own the page.
You want to paste vanilla (normal) JavaScript in it. React doesn’t let you.

You’re doing this at the wrong place. It sounds like someone made this website for you. Ask them where to place such code.

[ilg-ul]

The test was not performed in a website, but in the MDX Playground page.

So the correct answer is that the Donation button generated by the PayPal page cannot be used as-is in a .mdx page.

[wooorm]

Sure it can. Just not like this. It has to do with React. https://github.com/paypal/paypal-js/blob/main/packages/react-paypal-js/README.md

[ilg-ul]

I took a look at the paypal-js and I understood that loading scripts requires a different approach on React.

Unfortunately things are pretty complicated and that README does not provide an example how to integrate the Donate button, so I'll probably give up for now, and use a simple image with a link.