Recurring payment button showing in a different color and position than editor

[carladoria]

User in 14691016-hc reached to us mentioning that even though they've added a different background color for the payment button and it was showing centered in the page editor view, the published page showed a dark button (with dark font) and misplaced to the left.
I was able to reproduce this on a test site and with different themes.

Steps to reproduce the issue

1. Go to a page
2. Insert the Recurring payment button, add a recurring payment plan, specify a price, description and renew interval, click Add amount. The button is added to the page
3. Notice the current color of the button and position.
4. Click Preview or Publish
5. The button is added in a dark background color (with dark color over dark font) and the location is pushed to the left side.
6. Change the background color of the button (and it might refresh/update but the first time the button is added, it doesn't show the original color on the editor)

What I expected

To see the button's background color and position as in the editor view

What happened instead

It showed a different background color and with a different position

How it looks on the editor:

How it looks on the published page:

[jeherve]

Yes, that is an issue with some themes adding default colors to buttons, but not inside the editor. That's something we would need to address with the Recurring Payments button, but also with our other blocks that output buttons on the page, like the Mailchimp button or the Subscriptions form. 👍

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.