Introducing the All NEW EverWeb PayPal Modern Widget
December 13th, 2024The recently introduced EverWeb 4.3 for macOS, or Windows brings a host of new and updated features to the product, with the headline feature being the introduction of the new PayPal Modern Widget!
Our new widget uses the latest PayPal button API, adding more options for how your customers can pay you. This means you have more control and flexibility to offer different payment methods, making it easier for visitors to purchase products and services from your website. You can now offer Venmo payments in the US and local European and Australian payment methods including PayPal’s pay later options.
The new widget also enables you to sell subscription services as well as products, from your site.
Before we get started with the PayPal Modern widget, remember that EverWeb also includes the PayPal Widget. We recommend that you check out this widget as well in case it is more appropriate for you to use our original widget rather than the new PayPal Modern widget which we will be exploring below..
Getting Started With The PayPal Modern Widget
To use PayPal Modern widget, make sure that you have signed up for a PayPal account, if you do not have one already. Once you have a Paypal account set up you can add the widget to your page in EverWeb. If you are using a Center Aligned page layout, you can just drag and drop the widget on to the page and size and position it where you want. If you are using a Responsive page layout, you will need to add the widget in to a Responsive Row widget. To do this, drag and drop a Responsive Row widget on to the page, then drag and drop the PayPal Modern Widget in to the Responsive Row that you just added, or in to an existing Responsive Row.
Once you have placed the widget on your page, choose the button type from the dropdown menu. You can choose either Purchase for goods and services, or Subscription if you are offering a subscription service.
The PayPal Client ID
After selecting the button type that you want to use, the next step is to enter your PayPal Client ID in to the PayPal Client ID field. If you do not have a PayPal Client ID, click on the “Get Client ID” button. This will take you to PayPal’s Developer website. Although the developer’s website has a lot of tools to use, we are only interested in generating a PayPal Client ID that can be used in the PayPal Modern widget.
At certain times, you may be required to log in to your PayPal account e.g. when first accessing the developer website. Once you have logged in, you will be taken to the PayPal Developer Dashboard.
Click on the Create App button, then enter a name for the app in the App field. it does not matter what name you choose here, so you could call it e.g. ‘My first app’. After entering a name for your app, click on the Create App button to finish.
The next screen you will be taken to is where you will see the Client ID which has been automatically generated for you. All you need to do here is to click on the Copy icon to copy the Client ID to the Clipboard.
After copying your Client ID to the Clipboard, you can logout of the PayPal Developer app and go back to EverWeb. Paste the Client ID in to the PayPal Client ID field. If you are not going to use the widget to add a Subscription Plan, you can skip the next section and go to the section ‘Completing the Widget Settings’ below.
Creating a Subscription Plan
If you are going to be using the PayPal Modern widget to create a subscription service, you will need to first create a subscription plan in PayPal itself. When you create a subscription plan, it will have its own PayPal Subscription Plan ID.
In the PayPal Modern widget, remember to set the Button Type in the Widget Settings to Subscription before you start. Next click on the click on the Create Subscription Plan ID button. If asked to, login to your PayPal account. You will then be taken to the Subscriptions home page.
Begin by clicking on the Getting Started button. if this is the first time that you are accessing the Subscriptions page you may see a short slideshow first before being taken to the Manage Subscriptions page.
PayPal will guide you step by step to create your subscription service plan. Once the plan has been set up, you can either save the plan you have created as a draft, or you can turn the plan on. After creating your plan, copy the Plan ID to the clipboard, then return to EverWeb and paste the Plan ID in to the widget’s Plan ID field.
Completing the Widget Settings
After entering your PayPal Client ID and, optionally, your Subscription Plan ID, you can now complete the rest of the Widget Settings…
Product Name
Use this field to enter the name of the product or subscription service that you are adding to the page. When you update the Product Name field, the widget updates automatically in the Editor Window. If you want to change the font of the Product Name (and the font of the Product Pricing and Currency fields), click on the Fonts button in the Toolbar and select the font that you require. The font size is automatically set for you.
Product Details
The Product Details section of the widget is where you add a detailed description of the product, or subscription service, that you are selling. The description is added using the Styled Text Editor so you can use predefined Paragraph Styles to automatically style your descriptive text.
At this point, you probably will want to add an image of the product, or subscription. To do this, scroll down to the Appearance section of the Widget Settings. Click on the Product Image field’s ‘Choose…’ button to select the image that you want to use.
Product Pricing
Enter the price of the product or subscription service, the currency used, and the country in which you operate your business in. Note that you can only use one currency per page so make sure all PayPal Modern widgets that you add to the page use the same currency.
EverWeb also lets you specify which Payment Sources you would like to use, by checking the appropriate payment sources in the Payment Sources list box.
If a tax rate is applicable to your product or service, enter the Tax Rate in as a percentage.
If the product or subscription is something that buyers can purchase multiples of, check the ‘Allow Multiple Quantity’ field,
The Quantity label by default will display ‘Quantity’, but you can change this if you want. In addition, you can also set a maximum quantity a buyer can purchase in the Max Quantity field.
Options
The Options section of the Widget Settings is used when you are selling items that have different options available. In my example, I am selling a standard lawnmower model, and also a deluxe version, so I can list both as options to buy. Start by clicking on the ‘Add Options with Price’ button. Enter the option that you want, in my example this is the standard lawnmower model. Next, enter the price of the product. Now click on the ‘Add Options with Price’ button again, and add the deluxe lawnmower model and its price.
The second option allows you to do the same thing as just described, but without the price difference. So for example, in this case I could add different color choices as my options.
Shipping Options
If you want to add a shipping cost to the product check the ‘Enable Shipping’ checkbox. Click on the ‘Add Shipping Method’ button to add a shipping cost option. For example, you could add a standard shipping and express shipping options.
In addition, you can allow shipping outside of your own country by checking the ‘Allow International Shipping’ checkbox. You can also allow shipping by quantity, by clicking on the ‘Calculate Shipping Per Quantity’ checkbox. Furthermore, you can add a Handling fee to the customer’s purchase using the ‘Handling Fee’ option. The fee can also be calculated by quantity if you want. To set up International shipping, or handling, based on quantity you will need to do this in PayPal itself.
Discounts
If you want to add discount possibilities you can do so in the Discounts section. A discount can be applied as a percentage of the product price, or as a fixed amount.
Directing and Redirecting Your Customers
Use the Actions section of the widget, to redirect your customers to a ‘Thank You Page’ or to a ‘Cancelled Page’ that you have created in your site. This is useful to do as it will keep your customers within your website after their purchase.
If your customers are not redirected automatically back to your website after their purchase, you may need to set up in PayPal the redirect back to your website after the customer purchase. To activate this, log in to PayPal then go to your PayPal Account Settings.
Under the Website Payments option, make sure that your Website Preferences are set to ‘bring customers back to my website after they pay with PayPal’.
One you have completed your settings, preview or publish your site to test that the features you have added work properly.
The new PayPal Modern Widget opens up a new world of possibilities to PayPal users by allowing subscription services for your customers to purchase in addition to product sales. The new widget also gives you more control over the different payment methods that you may want to offer your customers.