Introduction
Using Sitely
Elements
How to
A Video Tutorial is available for this topic Click Here to view
Payment buttons make it easy to collect payments from your site visitors, for your products and services.
Sitely integrates a few third party providers, each of which has different features, prices and configuration options. You will need to research which one works best for you, and sign up with the one you pick, to be able to collect payments.
The payment providers supported by Sitely are:
You add a payment button to your site from the “Add” toolbar button, or from the Insert menu.
You will need to have an account with the payment provider you intend to use. Here are some details on them, and their integration with Sitely.
PayPal
PayPal is well known and the oldest payment service around. The modern PayPal buttons have a few styles and themes to pick from, as configured in the button settings.
You can configure the button to accept a one time payment directly in Sitely, or link it to a subscription plan configured on the PayPal dashboard.
When a customer clicks on a PayPal buy button, the PayPal window will appear over the page, and include a customer checkout flow, like this:
Purchase fulfillment will be based on communication with PayPal (their dashboard or purchase emails).
To fully set up Sitely for PayPal you will need to copy the “Client ID” from the PayPal applications page, and paste it into the Sitely payments settings.
PayPal Legacy
The legacy PayPal buttons might never completely go away, but new features are more likely to come to the modern style PayPal buttons, described above.
That said, you can’t beat the simplicity of the legacy PayPal button setup, requiring only the email address of your account, other than the product details.
When a customer clicks on the PayPal button, the checkout is taken off of your site to PayPal’s site, and the purchase is completed there.
Purchase fulfillment will be based on communication with PayPal (their dashboard or purchase emails).
Stripe
The Stripe service is known for its low fees. In the Sitely integration you can use it for product or service payments, single or recurring charge. The products will be defined on the stripe dashboard.
When you set the payment button to Stripe, you can set the button label, color theme and the success and failure pages.
The product or service information (“price” in Stripe’s terms) needs to match what you configure on the Stripe dashboard, so to create a new button on your site you will first need to go there and create the price.
While payment success (or failure) redirect the visitor back to your site, you need to handle fulfillment based on communication with Stripe (their dashboard or purchase emails).
To fully set up Sitely for Stripe you will need to copy the “publishable key” from the Stripe api key settings page, and paste it into the Sitely payments settings.
Finally, Sitely relies on Stripe’s so called “client-only checkout”, which you need to expressly enable in the Stripe checkout settings, and also add the domain where the site will be published.
Snipcart
The Snipcart service offers a shopping cart that will appear in your website, making it easy to sell multiple products without having your visitors leave. Snipcart also includes a shipping cost calculator, something that many commerce providers treat as a premium option. Snipcart supports both physical and digital products.
When you set the payment button to Snipcart, you can customize all product features and options without leaving Sitely.
When a customer adds a product to their shopping cart it will appear as a full page overlay, and include a customer checkout flow, like this:
Snipcart has two additional buttons, one to let customers view their shopping cart, the other to let customers access their purchases dashboard (provided by Snipcart).
To fully set up Sitely for Snipcart you will need to copy the “public api key” from the Snipcart credentials page, and paste it into the Sitely payments settings.
Fulfillment of physical products will be based on communication with Snipcart (their dashboard or purchase emails), whereas fulfillment of digital products will be done directly by Snipcart, so when setting up a digital product you need to upload it to the Snipcart digital goods pages.
Ecwid
The ecwid.com service offers a shopping cart, with a free plan for up to 10 physical products. The product management is entirely done in their dashboard, and you can opt to only make updates there if you use the ecwid product browser widget. Otherwise you can use individual product purchase buttons that you integrate in your Sitely pages organically.
Since the product browser shows all products, and products are configured in the ecwid dashboard, there is no additional configuration in Sitely. The product browser will be full width and will expand vertically in the page as needed.
When a customer adds a product to their shopping cart it will appear in page, and include a customer checkout flow, like this:
The ecwid integration offers four additional buttons:
To fully set up Sitely for ecwid you will need to copy the “Store ID” from ecwid, and paste it into the Sitely payments settings.
Fulfillment of physical products will be based on communication with Ecwid (their dashboard or purchase emails), whereas fulfillment of digital products will be done directly by Ecwid, so when setting up a digital product you need to upload it to the ecwid product editor.
Gumroad
Gumroad lets you sell digital or physical products, it offers a product creator marketplace and an in-page purchase and checkout flow.
When a customer clicks on a Gumroad buy button, the Gumroad overlay will appear in page, and include a customer checkout flow, like this:
The setup of a Gumroad purchase button in Sitely has no requirements other than setting up the button itself.
Fulfillment of physical products will be based on communication with Gumroad (their dashboard or purchase emails), whereas fulfillment of digital products will be done directly by Gumroad, so when setting up a digital product you need to upload it to the Gumroad product setup.
Paddle
Paddle is a software and SaaS-focused payment processor and “Revenue Delivery Platform”.
The Paddle button only needs the product ID, from the Paddle product page.
When a customer clicks on a Paddle buy button, the Paddle overlay will appear in page, and include a customer checkout flow, like this:
To set up the Paddle integration in Sitely you need to copy the Vendor ID from the Paddle SDK integration page and paste it into the Sitely payments settings.
Fulfillment of digital products can be as simple as uploading the files to Paddle’s control panel, but can be much more sophisticated, with custom coding in your website backend.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 5.6