{"id":1513,"date":"2021-06-17T12:30:57","date_gmt":"2021-06-17T12:30:57","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1513"},"modified":"2023-02-22T09:40:31","modified_gmt":"2023-02-22T09:40:31","slug":"how-to-use-the-paypal-button-widget-in-elementor-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/","title":{"rendered":"How to Use the PayPal Button Widget in Elementor Pro"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1513\" class=\"elementor elementor-1513\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-14bef1cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"14bef1cd\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-503dd873\" data-id=\"503dd873\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-71e73324 elementor-widget elementor-widget-video\" data-id=\"71e73324\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=ym5oqpgRQu8&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-238b604c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"238b604c\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6333fbed\" data-id=\"6333fbed\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54c90072 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"54c90072\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1421\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1421\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1422\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1422\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1421\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1421\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1421\" tabindex=\"0\" hidden=\"false\"><p>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:<\/p><p>\u2714\ufe0e How to add the PayPal button widget to your web page<\/p><p>\u2714\ufe0e How to configure pricing and payments for your button<\/p><p>\u2714\ufe0e How to customize the PayPal button styling options<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1422\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1422\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1422\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there. It\u2019s Aviva from Elementor. Today I\u2019ll show you how to add and customize the Elementor Paypal Button widget on your website.<\/p><p>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.<\/p><p>We\u2019ll go through each Transaction type and the setup options, so you can get started collecting payments right away. <\/p><p>Content<br \/>For this tutorial, we\u2019ll use a landing page designed for an educational non profit. I\u2019ll go ahead and delete this Paypal donation button here, so we can recreate it from scratch.<\/p><p>In widgets, search for and Drag in the Paypal Button. <br \/>Pricing and Payments<br \/>The first thing we\u2019ll 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.<\/p><p>Next is the Transaction Type. We\u2019ll cover each one and its options, as we go.<br \/>Checkout<br \/>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.<br \/>Donation<br \/>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.<br \/>Subscription<br \/>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.<\/p><p>Let\u2019s switch the Transaction type back to Donation for this Landing Page.<br \/>Button<br \/>Next we\u2019ll configure the button content options. Change the button text. And the button alignment.<\/p><p>You can remove the Icon, upload your own SVG icon, or choose another icon from the library. I\u2019ll keep the official Paypal logo for the icon.<\/p><p>Change the Icon Position here. And drag the slider or type in a value to change the Icon Spacing.<\/p><p>And last, you can enter a unique Button ID here, if needed. <br \/>Additional Options<br \/>Expand the Additional Options section.<\/p><p>If you&#8217;d like to redirect customers to a different page after purchase has been successfully completed, you can add a link to it here.<\/p><p>To test payments, switch Sandbox on and enter your Sandbox Email Account. Be sure to switch it off, before going live.<\/p><p>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.<\/p><p>If you\u2019d like to customize the error messages, switch Custom Messages to Yes and type in your preferred text.<br \/>Style<br \/>Button<br \/>Great, now that the content options are all set, we can style the button!<\/p><p>First we\u2019ll set the Typography. You can use a Custom style&#8230;or Global Style. And here, you can give the button\u2019s text a shadow. Enter a color code, or use the color picker to choose a color for the shadow.<\/p><p>Now let\u2019s set the text color. Once again, choose from a Custom&#8230;or Global style. You can\u2019t see it on this button currently, because it\u2019s the same color as the background. Let\u2019s fix that.\u00a0<\/p><p>Next we\u2019ll 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.<\/p><p>Now go to Border Type. Check out the other options, like double, dotted, and more. I\u2019ll set it back to solid. And I\u2019ll also reduce the border width, for a thinner border.<\/p><p>Next, we\u2019ll round the button corners, by adding a Border radius. You can also unlink these values for some interesting effects.<\/p><p><br \/>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.<\/p><p>Padding allows you to adjust the space around the button content. Here too, you may unlink the values, and set them individually. <br \/>Now go back up, and click Hover to set the button behavior, upon hover. I\u2019ll invert the hover Text color&#8230;and Background color. If you\u2019d like, you can change the Hover Border color as well. Mouse over the button to preview the hover effect.<\/p><p>You can also choose from a range of Hover Animations, such as Grow\u2026.and Shrink&#8230;to name a few. Click the X to remove the animation.<br \/>Ok, the Button is styled, and all that\u2019s left, is to style the error messages. Select the message Typography&#8230;and Colors, and you\u2019re good to go.<\/p><p>Note that you won\u2019t see a preview here, since these messages only show if there\u2019s an error.<\/p><p>Great, click Publish&#8230;and Preview<\/p><p>The Button looks great, and matches the look and feel of the whole page. Let&#8217;s test it out. Perfect! Now the customer can simply log in to their Paypal account and authorize the purchase.<\/p><p>And that\u2019s all there is to using the Paypal Button Widget. Now you\u2019re ready to use it on your website to collect payment for single item purchases, subscriptions and donations.<\/p><p>Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don\u2019t forget to hit the notifications bell.<\/p><p>\u00a0<\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview 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: \u2714\ufe0e How to add the PayPal button widget to your web page \u2714\ufe0e How to configure [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4190,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the PayPal Button Widget in Elementor Pro - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the PayPal Button Widget in Elementor Pro - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview 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: \u2714\ufe0e How to add the PayPal button widget to your web page \u2714\ufe0e How to configure [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T12:30:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:40:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the PayPal Button Widget in Elementor Pro - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the PayPal Button Widget in Elementor Pro - Academy","og_description":"Overview Transcript Overview 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: \u2714\ufe0e How to add the PayPal button widget to your web page \u2714\ufe0e How to configure [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/","og_site_name":"Academy","article_published_time":"2021-06-17T12:30:57+00:00","article_modified_time":"2023-02-22T09:40:31+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the PayPal Button Widget in Elementor Pro","datePublished":"2021-06-17T12:30:57+00:00","dateModified":"2023-02-22T09:40:31+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/"},"wordCount":1088,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/","name":"How to Use the PayPal Button Widget in Elementor Pro - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg","datePublished":"2021-06-17T12:30:57+00:00","dateModified":"2023-02-22T09:40:31+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/PayPal-Button.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-paypal-button-widget-in-elementor-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the PayPal Button Widget in Elementor Pro"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":9593,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1513\/revisions\/9593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4190"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}