Skip to main content

STRIPE CHECKOUT

Element For YOOtheme Pro
Documentation
Last Updated on:
Dec 10, 2025

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 5.4+ or 6+
  • Stripe.com Account with access to dev tools
  • YOOtheme Pro 4/5
  • PHP v8.1+

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. Webhook Setup

This is for the Stripe Ajax Mail Plugin

For Live Mode API Keys go to: https://dashboard.stripe.com/apikeys
For Test Mode API Keys go to: https://dashboard.stripe.com/test/apikeys (Use the secret test key already shown)

  1. Click "Create secret key"
  2. Choose "Building your own integration"
  3. Verify your account
  4. Create a key name like website.com
  5. Copy secret key and make a note if wanted.
  6. Paste secret key "sk_live_1234567890" etc. into Stripe AJAX plugin in Joomla

For Live Mode Webhook: https://dashboard.stripe.com/workbench/webhooks
For Test Mode Webhook: https://dashboard.stripe.com/test/workbench/webhooks

  1. Click "Add destination"
  2. Choose "Your Account", API Version 2025-10-29 or newer if available, Search and add the event: checkout.session.completed
  3. Click continue and choose Webhook endpoint,
    Generate or make a destination name and then add your url endpoint: https://yourdomain.com/index.php?option=com_ajax&plugin=stripewebhook&format=raw
  4. Add an optional description like your website and click "Create destination"
  5. Show the signing secret and copy/paste it into the Stripe Ajax plugin, it'll look like: whsec_P1234567890
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