Overview
The PayPal Button module adds a fully functional PayPal payment button to any page in the Divi Visual Builder. It allows you to accept payments directly from your visitors without redirecting them to an external checkout page. You can optionally display product details — including name, description, price, and a quantity selector — alongside the payment button. The module requires your PayPal API credentials to be configured in the plugin’s Integrations settings before payments can be processed.
Content Settings
Configuration
Success URL (Text Field)
The page your customer is redirected to after a successful payment. Enter the full URL of your thank-you or order confirmation page.
- Default: Empty (no redirect)
Cancel URL (Text Field)
The page your customer is redirected to if they cancel the payment. Enter the full URL of the page you want to show when payment is cancelled.
- Default: Empty (no redirect)
PayPal Button Text (Text Field)
The label shown on the payment button. Customise this to match your product or call-to-action, for example ‘Buy Now’, ‘Subscribe’, or ‘Donate’.
- Default: Pay Now
Show PayPal Badge (Toggle)
Toggles the PayPal badge that appears on the button. Showing the badge helps build trust with customers who recognise the PayPal brand.
- Default: On
Product
Show Product Details (Toggle)
Enables a product information block above the payment button, showing the product name, subtitle, description, price, and quantity selector.
- Default: Off
Product Name (Text Field)
The name of the product or service being sold. This is displayed prominently at the top of the product details section.
- Default: Starter Plan
- Only appears when Show Product Details is enabled
Subtitle (Text Field)
A short secondary line displayed below the product name, such as a plan tier or brief tagline.
- Default: Premium Subscription
- Only appears when Show Product Details is enabled
Description (Rich Text)
A longer description of the product or service. Supports basic rich text formatting such as bold and italic.
- Default: Get access to all premium features and priority support.
- Only appears when Show Product Details is enabled
Quantity (Text Field (number))
Sets the default quantity shown in the quantity selector. Customers can adjust this before completing their purchase.
- Default: 1
- Only appears when Show Product Details is enabled
Price (Text Field)
The price amount to display. Enter a number only, without a currency symbol (e.g., enter 79 to display $79). The currency symbol is taken from your PayPal integration settings.
- Default: 79
- Only appears when Show Product Details is enabled
Price Label (Text Field)
A short label displayed next to the price, such as ‘/month’ or ‘/One-time payment’. Use this to clarify the billing frequency or payment type.
- Default: /One-time payment
- Only appears when Show Product Details is enabled
Background
Standard Divi background options for the module wrapper, including solid colour, gradient, image, and video backgrounds.
Design Settings
Button
Button (Button Style)
Controls the visual style of the payment button including text colour, font, background colour, border, padding, and border radius. Use the built-in Divi button style controls to match your site’s branding.
- Default: Default Divi button style
Alignment (Button Options (Left / Center / Right))
Sets the horizontal alignment of the payment button within its container.
- Available options: Left, Center, Right
- Default: Left
Product Name
Font controls for the product name text, including font family, size, weight, colour, line height, letter spacing, and heading level.
Subtitle
Font controls for the subtitle text, including font family, size, weight, colour, line height, and letter spacing.
Product Description
Body font controls for the product description text, including font family, size, weight, colour, line height, and letter spacing.
Quantity
Select Background Color (Color Picker)
Sets the background colour of the quantity selector buttons and input field.
- Default: None
Font (Font Controls)
Controls the font style of the numbers displayed inside the quantity selector.
- Default: Inherited
Border (Border Controls)
Controls the border style, width, colour, and radius of the quantity selector.
- Default: None
Alignment (Button Options (Left / Center / Right))
Sets the horizontal alignment of the quantity selector within the module.
Available options: Left, Center, Right
- Default: Left
Price
Font controls for the price value and currency symbol, including font family, size, weight, and colour.
Price Label
Font controls for the price label text (e.g. ‘/month’), including font family, size, weight, and colour.
Price & Price Label Alignment
Alignment (Button Options (Left / Center / Right))
Sets the horizontal alignment of the price and price label together within the module.
Available options: Left, Center, Right
- Default: Left
Spacing
Product Name (Spacing Controls)
Controls the margin and padding around the product name.
- Default: None
Description (Spacing Controls)
Controls the margin and padding around the product description.
Default: None
Price (Spacing Controls)
Controls the margin and padding around the price block.
- Default: None
Quantity (Spacing Controls)
Controls the margin and padding around the quantity selector.
- Default: None
Button (Spacing Controls)
Controls the margin and padding around the payment button.
- Default: None
Sizing, Box Shadow, Filters, Transform & Animation
Standard Divi design options: Sizing controls module width and max-width. Box Shadow adds depth to the module. Filters apply visual effects such as blur, brightness, and opacity. Transform lets you rotate, scale, or skew the module. Animation triggers entrance effects when the module scrolls into view.
Advanced Settings
- CSS ID & Classes — Add a custom CSS ID or class names to the module for use with custom CSS or JavaScript.
- Conditions — Set display conditions to show or hide this module based on specific rules (e.g. logged-in users, date range).
- Custom CSS — Write custom CSS to fine-tune the appearance of specific parts of the module, including the product name, description, price, quantity selector, and button.
- Position — Control how the module is positioned on the page (relative, absolute, or fixed).
- Scroll Effects — Add scroll-triggered animations such as vertical movement, fade, blur, or rotation as the page is scrolled.
- Transition — Customise the speed and style of hover transition effects on the module.
- Visibility — Show or hide this module on desktop, tablet, or mobile devices independently.
Tips & Best Practices
- Before placing this module on a live page, make sure your PayPal Client ID and Secret are entered in the plugin’s Integrations settings. Without these, the button will display a warning and payments will not be processed.
- Use the ‘Show Product Details’ toggle to display a product card above the button. This is ideal for pricing tables or single-product checkout pages where you want customers to confirm what they are buying before paying.
- Customise the button text to match your offer — words like ‘Enroll Now’, ‘Get Instant Access’, or ‘Donate’ can significantly improve conversion rates compared to the default ‘Pay Now’ label.
- You can set separate Success and Cancel URLs so customers land on the right page after payment. Always use a dedicated thank-you page as your Success URL so you can track conversions accurately.