Context first…

WordPress Strips out essential code to add a payment panel or button (code supplied by Stripe) when using the visual editor. The cause is that Stripe wraps the payment panel or button a non-standard HTML tag <stripe-buy-button>. 15 years ago non-standard HTML was not allowed past HTML markup checkers  – back when we wrote XHTML…

This issue is caused by my continued use of the Classic Editor plugin (I hate the extra markup inserted by Gutenberg when using JetPack galleries).

Hmmm…

I’m happy to use the code editor when required, but I really appreciate visual editors as they are much more usable and make editing content much easier.

Also, I use tiled galleries a lot and really hate the way Gutenberg inlines so much code (making editing HTML in the code editor a horrible experience), so I’m still very happily using the Classic Editor plugin…

If you know a way of curbing some of the weird things Gutenberg does, that would be great. BTW, I haven’t tried it in about a year. With typical bad luck, of course, my local dev site fell apart today regarding login and update. (I use the Local app for that.)

Perhaps the easiest solution is to use more standard markup. I’m guessing the WP <stripe-buy-button> is the bit that gets stripped out. Can I use a div with a class of “stripe-buy-button”?

Otherwise, I’d rather create a plugin than edit the theme functions.php. (As I’d like somewhere, not theme based, to add or edit the Stripe parameters)

Your previous solution says something about trusting all my users – I could never expect that. There are some bad people everywhere.

 

ChatGPT’s answer [I like]:

Got it! Since you’re using the Classic Editor and want to keep things clean and manageable, here’s a practical approach:

More Standard Markup:

Yes, WordPress is stripping out the custom <stripe-buy-button> tag because it doesn’t recognize it. You can definitely use a more standard approach by creating a div with a class or ID, and then initializing the Stripe button via JavaScript.

Example:

HTML (Classic Editor):

<div id="stripe-button"></div>

<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<script>
  const stripeButton = document.createElement('stripe-buy-button');
  stripeButton.setAttribute('buy-button-id', 'buy_btn_XXXXXXX');
  stripeButton.setAttribute('publishable-key', 'XXXXXXXXXXX');
  document.getElementById('stripe-button').appendChild(stripeButton);
</script>

This way, WordPress will recognize the <div> as standard HTML and won’t strip it out. The button will be dynamically created through JavaScript.

Creating a Simple Plugin:

Since you’d rather not mess with functions.php, a lightweight plugin is a great way to handle this.

Would you like me to put together a plugin that you can drop into your WordPress site? I can set it up to easily update the Stripe parameters from the plugin’s settings. Let me know!