Skip to main content

STRIPE CHECKOUT

Element For YOOtheme Pro

Documentation

Stripe Checkout Changelog: v1.1.0 - May 24, 2023

Stripe Checkout Changelog

v1.1.0

May 23, 2023
  • Added
    Updated to working with YOOtheme Pro 4
  • Updated
    Updated Stripe SDK & API to latest version

v1.0.0

February 27, 2023
  • Added
    Stripe Checkout Element - First Release for YOOtheme Pro

1. Getting Started

Introduction

The Modern Design Stripe Checkout element lets you quickly and easily add a Stripe Checkout button directly in the YOOtheme Pro website builder.

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

Once installed and activated you can now add the Stripe Checkout Element via the YOOtheme Pro page builder.
  • 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

In your page layout, click on the Stripe Checkout element icon to open 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.

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.

Josh Gilson

Need Help?

Something not working or quick question?
Email me: This email address is being protected from spambots. You need JavaScript enabled to view it.

Join our community for quick help on our
Discord Server
Cron Job Starts