In this tutorial we will learn how to use the PayPal button widget in Elementor. We will create, set up, and style a PayPal button widget to accept payment on a website. This tutorial will cover:
✔︎ How to add the PayPal button widget to your web page
✔︎ How to configure pricing and payments for your button
✔︎ How to customize the PayPal button styling options
✔︎ And much more!
Hey there. It’s Aviva from Elementor. Today I’ll show you how to add and customize the Elementor Paypal Button widget on your website.
With the Paypal Button widget, you can collect payment for single purchases, donations, or subscriptions via Paypal, without a complex ecommerce setup, and without writing any code.
We’ll go through each Transaction type and the setup options, so you can get started collecting payments right away.
Content
For this tutorial, we’ll use a landing page designed for an educational non profit. I’ll go ahead and delete this Paypal donation button here, so we can recreate it from scratch.
In widgets, search for and Drag in the Paypal Button.
Pricing and Payments
The first thing we’ll set up is Pricing and Payment. Enter the email address for the Paypal account you will use to accept payments. There is also a Dynamic tags icon, which you can use to easily select dynamic content, here, as well as for any other field where you see this icon.
Next is the Transaction Type. We’ll cover each one and its options, as we go.
Checkout
Start with Checkout. This will collect payment for a single product. Enter the Item Name, SKU number, Price and of course the Currency. Next, you can change the Quantity and add a Shipping Price. If you need to collect tax, choose Percentage from the Dropdown, and type in the amount of tax to be charged.
Donation
The second Transaction Type option is Donation. Here again, are Item Name and SKU fields. Set whether the donation amount may be chosen by the client, by selecting Any Amount, or if the donation is a set amount, by selecting Fixed. Then enter the Amount and choose the Currency.
Subscription
The last type of transaction is Subscription. You will notice a few new options here. Under Billing Cycle, choose Daily, Weekly, Monthly, or Yearly, to select the payment frequency. Auto renewal is on by default, but you may turn it off to disable it.
Let’s switch the Transaction type back to Donation for this Landing Page.
Button
Next we’ll configure the button content options. Change the button text. And the button alignment.
You can remove the Icon, upload your own SVG icon, or choose another icon from the library. I’ll keep the official Paypal logo for the icon.
Change the Icon Position here. And drag the slider or type in a value to change the Icon Spacing.
And last, you can enter a unique Button ID here, if needed.
Additional Options
Expand the Additional Options section.
If you’d like to redirect customers to a different page after purchase has been successfully completed, you can add a link to it here.
To test payments, switch Sandbox on and enter your Sandbox Email Account. Be sure to switch it off, before going live.
Next is the option to Open the Paypal transaction page in a new tab. I would recommend this, so as not to take your clients away from your website.
If you’d like to customize the error messages, switch Custom Messages to Yes and type in your preferred text.
Style
Button
Great, now that the content options are all set, we can style the button!
First we’ll set the Typography. You can use a Custom style…or Global Style. And here, you can give the button’s text a shadow. Enter a color code, or use the color picker to choose a color for the shadow.
Now let’s set the text color. Once again, choose from a Custom…or Global style. You can’t see it on this button currently, because it’s the same color as the background. Let’s fix that.
Next we’ll add a border to the button. To better see the border options, first choose a border color, then enter a value for the width. By default, the values are linked together, but you can unlink them to use different values for each side.
Now go to Border Type. Check out the other options, like double, dotted, and more. I’ll set it back to solid. And I’ll also reduce the border width, for a thinner border.
Next, we’ll round the button corners, by adding a Border radius. You can also unlink these values for some interesting effects.
Click the pencil icon to add a Box Shadow to the button. Change the shadow color from here, and edit the settings below for different effects. Click the Reset icon to go back to the default settings.
Padding allows you to adjust the space around the button content. Here too, you may unlink the values, and set them individually.
Now go back up, and click Hover to set the button behavior, upon hover. I’ll invert the hover Text color…and Background color. If you’d like, you can change the Hover Border color as well. Mouse over the button to preview the hover effect.
You can also choose from a range of Hover Animations, such as Grow….and Shrink…to name a few. Click the X to remove the animation.
Ok, the Button is styled, and all that’s left, is to style the error messages. Select the message Typography…and Colors, and you’re good to go.
Note that you won’t see a preview here, since these messages only show if there’s an error.
Great, click Publish…and Preview
The Button looks great, and matches the look and feel of the whole page. Let’s test it out. Perfect! Now the customer can simply log in to their Paypal account and authorize the purchase.
And that’s all there is to using the Paypal Button Widget. Now you’re ready to use it on your website to collect payment for single item purchases, subscriptions and donations.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell.
