Elementor Stripe Button Widget Tutorial

Elementor Stripe Button Widget Tutorial

Learn how to add the Elementor Stripe button widget to a WordPress website! Step-by-step tutorial to accept payments for beginners.

Table of Contents

Install and activate Elementor Pro

To add a Stripe button, you need the Pro version of Elementor, which you can purchase for a few dollars per month.

This gives you many more useful options at your disposal, as I have already explained in previous videos.

As you can see, I have already installed and activated Elementor Pro.

In another video I have also explained step by step how to do this, but in short it is simply downloading the Elementor Pro plugin from the Elementor site and you can then upload it to WordPress.

Make sure you have the free version of Elementor and also the Pro add-on activated for your website.

Install and activate Elementor plugin for WordPress

Select a WordPress Page or Post

Now you can select a page or post to add the Stripe button. For this example, I’m going to select the homepage, so I’ll go to Pages in the left menu and click on Pages.

Then I go to the homepage and click on the Edit With Elementor option to open the Elementor editor.

Open Elementor editor

Add Elementor Stripe Button widget to WordPress website

After the page has loaded, you can click on the icon with the 9 dots to display the overview of all widgets.

The widgets are displayed by category and here you can see that there are many useful widgets that you can choose from.

Now go to the Pro category and go to the Stripe Button widget at the bottom of the section.

Here you can select the Stripe button widget and place it on the canvas simply by dragging it there.

Drag Elementor Stripe button widget to WordPress page or post

As you can see the Elementor Stripe button widget is now displayed on the page and by default it’s aligned to the left.

Elementor Stripe button widget added

Elementor Stripe button  widget settings

Now you can see that the button is displayed on the canvas.

I will first show some styling options, for example you can make the button larger or smaller by going to the Style tab.

Click on the pencil icon at the Typography settings.

With the slider you can set the Size and the size of the button.

Here you can also set the font Family and there are also options for setting the Line Height, Letter Spacing and Word Spacing.

button size

You can also easily adjust the color of the button to something different with the Color option.

Color

Link Stripe button in WordPress to Stripe account settings

To link your Stripe account to the button, it is important to go to the Content Tab.

Here you will see the message: For this widget to work, you need to set your Stripe API keys in the Integrations Settings.

Elementor stripe button widget integration

To show you how to do that, I will open the WordPress dashboard in a new window.

In the left menu you can go to Elementor and select the Settings option.

Then choose the Integrations tab and here you can see which integrations can be done via an API Key.

Elementor Settings Integrations

Scroll all the way down and there you will find the option for Stripe.

Enter the Test Secret Key here and the Live Secret Key in the field below.

There are many other tutorials on how to retrieve the keys in the Stripe dashboard so if you don’t know how to do that you can easily find a manual on the internet.

After you have validated the keys and everything is working properly, you can click on the blue Save Changes button to save the settings.

Elementor Stripe API

Stripe button settings

Now that that is clear, I go back to the Elementor editor for the homepage.

The message will also no longer be shown after you have added the Stripe keys.

Now let’s go over the other options, as you can see you can enter a Product Name in the field that is displayed.

It is also possible to set the Currency and Price.

stripe button widget settings

Below this there are also options for Quantity, Shipping price and Tax Rate.

more settings

Over at the Button options you can change the text from Buy Now to something different if you prefer that.

You can also set the Alignment and whether you want to show the Stripe Icon in the button.

If you want, you can also adjust the position of the icon with the Icon Position option.

change button text and alignment

In the Additional Options you can set the URL that must be linked to when payment has been made.

If you want to do a test you can select the option Stripe test environment, don’t forget to deselect it after the testing is done.

The last option at the bottom is to set custom messages. By selecting this option, you can see the default messages for different scenarios, and if you want you can also adjust them.

additional settings

Save setttings

After you have finished all the settings, you can click the Update button at the bottom left to save everything.

save settings

Now you have added a Stripe button to your WordPress website that is ready to use!

You can also watch the tutorial on YouTube via this link

If you find this tutorial useful, you can support me by liking the tutorial on YouTube and subscribing. There are many more useful tutorials on this website and on the YouTube channel.

See you in the next one!