The Divi Payment Button module lets you add a checkout button that sends visitors straight to a PayPal or Stripe payment. It looks and styles exactly like the regular Button module, with an extra Payment group where you connect your payment provider and set the amount.
Before you start, it helps to know three things:
Provider - The Payment Button works with PayPal or Stripe. You choose one per button.
Resource - This is the account the payment goes to: your PayPal business email or your Stripe hosted checkout link. You save it once and then reuse it on any Payment Button.
Environment - Use Sandbox to test the button without taking real money, then switch to Live when you're ready to accept payments.
Add The Divi Payment Button Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Payment Button module and click on it to load it. Alternatively, you can use the Search option to find it.
The Divi Payment Button Module Use Cases
Selling a single product: Add a "Buy Now" button that sends the buyer straight to checkout for a fixed price.
Accepting donations: Let visitors enter their own amount by setting the button to a user-defined amount.
Collecting a booking or deposit fee: Charge a fixed fee to reserve a spot, a table, or an appointment.
Payment Button Module Settings Breakdown
Once you've added the Payment Button module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab is where you connect your payment, set the amount, and choose the button text.
Payment - Holds everything the button needs to start a checkout:
Provider - Choose the payment provider for this button: PayPal or Stripe.
Note: Stripe requires you to create a Stripe Payment Link for each Stripe product you want to link to the Payment Button module. Check the How to Create a Stripe Payment Link article for more information.
Resource - Choose the account the payment goes to. Click Add to save a new one (give it a name and enter your PayPal business email or Stripe hosted checkout link), then select it from the list. You can Edit or Remove a saved resource at any time.
Environment - Choose Sandbox to test the button safely, or Live to accept real payments.
Amount Mode - Choose Fixed to charge a set price, or User Defined to let the visitor enter their own amount.
Amount - Set the price to charge. This is used when Amount Mode is set to Fixed.
Currency - Choose the currency for the payment. Start typing to search by currency or country. The default is USD.
Return URL (only applies if the chosen provider is PayPal) - Choose the page the visitor is sent to after a successful payment.
Cancel URL (only applies if the chosen provider is PayPal) - Choose the page the visitor is sent to if they cancel the payment.
Open In New Tab - Choose whether the checkout opens in a new browser tab.
Text - Choose the button's text, such as "Buy Now" or "Donate".
Loop - Enables the loop builder.
Order - Choose the order in which the Payment Button module appears inside a Flexbox and Grid layout.
Meta - Choose the Payment Button module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Payment Button module are in this tab. Because the module shares the Button module's styling, these controls work exactly the same way.
Layout - Choose the text and logo alignment, and whether the module should be full-screen. In addition, you can also change the Layout Style:
Alignment - Choose the Payment Button module's alignment on the page.
Text - Choose the overall Payment Button module's text styles for this module.
Button - Choose the Payment Button module's design styles.
Spacing - Choose the Payment Button module's spacing.
Box Shadow - Choose the Payment Button module's Box Shadow styles.
Filters - Choose the Payment Button module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Payment Button module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Payment Button module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Payment Button module, enabling advanced styling that perfectly aligns with your vision.
HTML - Choose the semantic HTML tag for the Payment Button module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the Payment Button, and many more.
Visibility - Choose the Payment Button's module visibility based on different devices.
Transitions - Choose how long the Payment Button's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Payment Button's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Payment Button module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
