In addition to Styling Dividers and Inline HTML Tags, our latest EverWeb release, version 3.9, introduces the brand new Stripe Payment widget. If you are already a Stripe user, or want an alternative payments provider to PayPal, the Stripe widget will be just for you.
Stripe can be used by any business, whether you are working as a one person entrepreneur, small business or even a multinational corporate. Stripe will scale to your needs at all levels. As you would expect, payments can be managed on both desktop and mobile environments. In terms of reach, Stripe supports millions of customer interactions per day throughout the world.
Getting Started with The Stripe Payments Widget
To use the new Stripe Payments widget, you will need EverWeb 3.9 or later. We do, however, recommend using EverWeb version 3.9.5, or higher, which contains important improvements and fixes to the widget. If you are using a version of EverWeb before version 3.9, you can get the latest version of EverWeb by using the EverWeb-> Check for Update… menu on macOS, or the Help-> Check for Update… menu infusing EverWeb for Windows.
If you do not already have a Stripe account, you can sign up on their website and add in your products and subscriptions straight away. You may also want to add in any shipping rules that you want to use in Stripe at the same time. For convenience, you can also use the ‘Create Stripe Account…’ button in the widget itself which will take you to directly to Stripe to create your Stripe account. To add the widget to your page in EverWeb, just click on the Widgets tab, then drag and drop the Stripe Payments Widget on to your page. You can use the widget in either a fixed width or responsive page and as a full or fixed width object.
Working with the Stripe Payments Widget
One you have added the Stripe Payments widget to your page in EverWeb, use the Widget’s Widget Settings tab to link to your Stripe products and subscriptions to the Stripe Payments widget. This is easily done by entering in your Stripe Secret Key in to the widget’s ‘Stripe Secret Key’ field. If you have forgotten your ‘key’ or if the key has expired, Stripe can generate a new one for you.
Apart from the Stripe Secret Key, the other important things that you need to collect together are all related to the product, or subscriptions, that you have added in to your Stripe account. For the product or subscription you want to add in to the Stripe Payments widget, you will need its API Code. This is a unique identifier generated by Stripe that you plug in to the ‘Product Price ID’ field in the Widget Settings.
After entering in your Product Price ID and setting the Product Type to either ‘Product’ or ‘Subscription’, the rest of the information that you gather from Stripe to enter in to the Widget Settings is straightforward: Price, Currency, product image if needed and your product’s description.
After entering in all of your product details, the last piece of information to add in (if applicable) is the ‘Shipping Rate ID’. You may have set up your shipping rules when you first started adding your products in to Stripe, but if you have not done this yet, just click in the ‘Create Shipping Rule…’ button to create a new rule that you can then add in to the Widget Settings later on.
The next section of the Widget Settings let you style the ‘Buy’ button. You can use your own caption and colors to suit your site. If you want, you can also set up pages in your EverWeb Project file for Successful Payment, Cancelled Payment and any instances where there is an Error. Creating your own pages for these functions helps continuity during the payment process, so the person purchasing always knows they are still in your site, or have been returned to your site after the payment process has been completed.
Rounding off the settings, you can choose the payment type as either Purchase, Book or Donate. You can also require a billing address and allow for changes in quantity to be possible.
EverWeb’s new Stripe Payments widget is a great way to easily add products and subscriptions to your site!