STRIPE CHECKOUT
Stripe Checkout Changelog
v1.1.0
-
AddedUpdated to working with YOOtheme Pro 4
-
UpdatedUpdated Stripe SDK & API to latest version
v1.0.0
-
AddedStripe Checkout Element - First Release for YOOtheme Pro
Jan 16, 2025
1. Getting Started
Introduction
Requirements
- Joomla v4 or v5
- Stripe.com Account with access to dev tools
- YOOtheme Pro v2 or v3
- PHP v8.x
Installation & Upgrade
A free account is required to download the Stripe Checkout element from our site, when you log into your account, you can navigate to Account > Downloads > Stripe Checkout. Once you download the zip file, do not extract it, you will upload this zip file directly into the CMS install area. The file name will be: plg_system_md_stripe_checkout_X.X.X.zip
. Follow the instructions below to install the element easily:
Joomla Installation
- Login to back-end area of your Joomla CMS site using a super administrator account and Navigate to Extensions > Manage > Install > Upload Package File.
- Drag and drop the file to upload or browse for the file by clicking the green button. The file name will be:
plg_system_md_stripe_checkout_X.X.X.zip
. - After the installation process is complete, you may need to active the plugin at Extensions > Plugins >
System - [MD] Stripe Checkout Element for YOOtheme Pro
. - Once installed and activated, you can launch YOOtheme Pro and add the Stripe Checkout element when adding a new element in the builder.
Upgrade Remotely
- You will first need a download key from your Modern Designs account. Go to Account > Dashboard and copy your
Download Key
. - In the back-end of your Joomla site, you need to navigate to Extensions > Update Sites > Stripe Checkout Element for YOOtheme Pro. Click on the title and paste the copied key in the Download Key field.
- Now navigate to Extensions > Update and click the Check For Updates button to update the Stripe Checkout Element if there's an updated version.
Upgrade Manually
- See the instructions above for Joomla Installation to manually update to the newest version of the element.
Joomla Uninstall
- Login to back-end area of your Joomla CMS site using a super administrator account and Navigate to Extensions > Manage > Manage.
- Search for the plugin:
System - [MD] Stripe Checkout Element for YOOtheme Pro
. - Select the checkbox next to the plugin, click on the dropdown in the Actions dropdown menu and choose Uninstall.
Note:
It's highly recommended to make sure the Stripe Checkout element is not being used anywhere on your website in the builder, otherwise uninstalling this element could causing problems on your site.2. Setup

Adding the Element
- The Stripe Checkout element will be organized in the Modern Designs element group under the Elements tab.
- Click on the Stripe Checkout icon to add the element to your layout.
Editing the Element

Product Tab
- Price
- Add the price of the product without the currency symbol. ie. 10.99, 10.00 or even 10.
Default: Empty
- Product Name
- Enter the name or title of the product you're selling in this field.
Default: Empty
- Product Image
- Add an image to your Stripe product to be shown to the user in the Stripe Checkout area.
Default: Empty
- Product Description
- Enter a details product description to be shown to the used on the Stripe Checkout area for the product they are purchasing.
Default: Empty

Layout Tab
- Content
- Call to action text that shows in the button
Default: Empty
- Icon
- Optional icon to show inside the button.
- None
- Brand: Stripe Logo
- S: "S" Logo for Stripe
- Card: Stripe Logo in a credit card shape
Default: None
- Icon Width
- Enter the size of the icon you want displayed if "None" is not selected.
Default: 30px
- Icon Alignment
- Choose from either Left or Right positions for the icon in the button if "None" is not selected.
Default: Left
- Style
- Choose from the following styles for your butto:
- Default
- Primary
- Secondary
- Danger
- Text
- Link
- Link Muted
- Link Text
Default: Default
3. Settings

General Settings
Most of these General Settings are the default/standard YOOtheme Pro settings for base elements and should be familiar to you. The following is the list of these available base settings for reference.
- Position
- Left
- Right
- Top
- Bottom
- Z index
- Margin
- Remove Top Margin
- Remove Bottom Margin
- Max Width
- Max Width Breakpoint
- Block Alignment
- Block Alignment Breakpoint
- Block Alignment Fallback
- Text Alignment
- Text Alignment Breakpoint
- Text Alignment Fallback
- Animation
- Edit Parallax
- Visibility
4. Advanced

Advanced Options
Most of these Advanced Options are the default/standard YOOtheme Pro settings for base elements and should be familiar to you. The following is the list of these available advanced options for reference.
- Name
- Status: Disable element
- ID
- Classes
- Attributes
- CSS
- the class name
.el-element
can be used to override styles and settings as needed.
- the class name
5. Troubleshooting / FAQs
The Spacer Element isn't showing in the list of elements
- Make sure you've installed and activated the plugin correctly. See the Getting Started section to learn more.
- Verify that the element is enabled in the plugin section (Joomla). See the Getting Started section to learn more.
- Review the prerequisites (Requirements) above to check for anything that may need to be updgraded on your site.
Is the Spacer Element free?
- YES! I had this element created to make my life a little easier and if you found it helped you, you can Buy me a drink! Thank you for your support.

Need Help?
Email me:
Join our community for quick help on our
Discord Server