A beautiful donation form block for Stripe by GiveWP. Accept donations in minutes.
Do you have a WordPress website? Great! You can use this block on your site. Simply log into your WP-Admin and go to Plugins > Add New.
Alternatively, when in the block editor open up the block editor and click the "Add Block" button. Once there, type "Donation" and you should see the block display in the list of available blocks. Simply hover over the block and click to install it and add the block to your page.
Looking to help the development? Great! Check out the development
This block allows for extensive customization. You can change the main image, headings, description, and button text.
This plugin uses wp-scripts under the hood to compile assets.
- Clone the repository to your
wp-content/pluginsdirectory - Run
composer installandnpm install - Run
npm run startto start the LiveReload feature
- Open an issue on GitHub 👆
- Include the steps to reproduce the bug
- Submit a PR if you have time 😀
Let's take a look at the development notes.
⚙️ Under the hood:
- React done the Gutenberg way
- wp-scripts (create-block)
- Composer and Strauss for the Stripe PHP SDK
- Currency React component
- Stripe JS for Payment Element
- Lotties for animations
- Aphrodite for CSS
Our styles are meant to be as opinionated as possible. This is because we want the block to look consistent between themes. We have found, especially with forms, that themes often add their own styles to the form which makes it look not as polished as it should.
What's up with all the !important styles? Well, they're there to make sure the block looks great on all devices. Under the hood, the plugin is using Aphrodite to style the block.
Aphrodite is a CSS preprocessor that makes it easy to write CSS in JS. With WordPress, themes can really adjust the styles of the block in ways that don't really look great. That's why we're aggressively styling it using this tool.